2016-07-19 7 views
6

1つのクライアントから複数のリスナークライアントまでのリアルタイムのオーディオストリームが必要です。NodeJSサーバーからクライアントにライブストリーミングオーディオを取得する

現在、私はクライアントからの録音を行い、オーディオをsocket.ioからサーバーにストリームしています。サーバーはこのデータを受信し、このストリームをリスンするクライアントにオーディオを(またsocket.io?を介して)ストリーミングする必要があります。可能な限りリアルタイムでなければなりません(遅延を最小限に抑える)。

私はGetUserMediaを使用してマイクを録音しています(ブラウザの互換性はここでは重要ではありません)。私は、クライアントがストリームを聞くためにHTML5オーディオタグを使用するようにしたい。サーバー上で受信されたデータは、オーディオ/ wavタイプのブロブにパックされたチャンク(現在700でパックされています)です。

これは、それをサーバーに送信するために私のコードです:オン

socket.on('voice', function(blob) { 
    socket.broadcast.emit('voice', blob); 
}); 

:私はクライアントにこのような同じようにチャンクを送信することができるよサーバで

mediaRecorder.ondataavailable = function(e) { 
    this.chunks.push(e.data); 
    if (this.chunks.length >= 700) 
    { 
     this.sendData(this.chunks); 
     this.chunks = []; 
    } 
}; 
mediaRecorder.sendData = function(buffer) { 
    blob = new Blob(buffer, { 'type' : 'audio/wav' }); 
    socket.emit('voice', blob); 
} 

var audio = document.createElement('audio'); 
socket.on('voice', function(arrayBuffer) { 
    var blob = new Blob([arrayBuffer], { 'type' : 'audio/wav' }); 
    audio.src = window.URL.createObjectURL(blob); 
    audio.play(); 
}); 

これは私が送っチャンクの最初のブロブのために動作しますが、あなたはKEを許可していないクライアントは、私はこのように、これを再生することができますepをaudio.srcから新しいURLソースに変更すると、これは動作する解決策ではありません。

私はリッスンクライアントのHTML5のオーディオタグに入れることができる何らかのストリームをサーバー上に作成しなければならないと思いますが、私はその方法を知らないのです。チャンク付きの受信したブロブは、リアルタイムでこのストリームに追加する必要があります。

これを行うにはどのような方法が最適ですか?クライアントのマイクからサーバーまで、私はそうしていますか?

+0

webrtcについて聞いたことがあるなら、webrtcはピア・ツー・ピアであるため、これは問題の自然な解決策です。 –

+0

私は知っているが、ピアツーピアではなく、サーバーからブロードキャストすることを望んでいる。オーディオを録音しているクライアントは、すべてのクライアントにブロードキャストするのに十分な帯域幅を持っているので、それを行うにはサーバが必要です –

+0

WebRTCのMCUアーキテクチャを使用できますが、ここでは範囲外です。 –

答えて

1

次のように、動的にaudiosrcを変えることができるが(mp3タイプを想定):ソケットイベントが受信されるたびに、機能を以下

<audio id="audio" controls="controls"> 
    <source id="mp3Source" type="audio/mp3"></source> 
     Your browser does not support the audio format. 
</audio> 

コール:

function updateSource() { 
     var audio = document.getElementById('audio'); 

     var source = document.getElementById('mp3Source'); 
     source.src= <blob>; 

     audio.load(); //call this to just preload the audio without playing 
     audio.play(); //call this to play the song right away 
    } 
1

を私は少し遅れによここでパーティーをしていますが、まだ完成していなければ、WebオーディオAPIがあなたの友人になるようです。これを使用すると、音声ストリームをオーディオデバイスに接続して出力デバイスに直接再生することができます。

私は同じことをしているとあなたの質問は私の質問に答えている - クライアントからサーバーにデータを取得する方法。 WebオーディオAPIの利点は、ストリームを一緒に追加し、サーバー上でオーディオエフェクトを適用できることです。

MDN Web Audio API

IOイベントは、オーディオコンテキストにおけるオーディオバッファオブジェクトのデータを交換する必要があります。オーディオ処理は、各クライアントに単一のストリームとして出力される前に、nodeJS Webオーディオコンテキストで発生する可能性があります。

関連する問題