WebRTCを使用したスト​​リームメディアファイル

Question

ここに私の使用例があります。アリスは、ボブが聴きたいクールな新しいメディアトラックを持っています。彼女はブラウザでメディアファイルを選択し、メディアファイルはBobのブラウザで即座に再生を開始します。

WebRTC APIを使用してこれを構築することが可能かどうかはまだ分かりません。すべての例では、私はgetUserMedia（を介して取得した利用ストリーム）を見つけることができますが、これは私が持っているものである。受信側では

var context = new AudioContext(); 
var pc = new RTCPeerConnection(pc_config); 

function handleFileSelect(event) { 
    var file = event.target.files[0]; 

    if (file) { 
     if (file.type.match('audio*')) { 
      console.log(file.name); 
      var reader = new FileReader(); 

      reader.onload = (function(readEvent) { 
       context.decodeAudioData(readEvent.target.result, function(buffer) { 
        var source = context.createBufferSource(); 
        var destination = context.createMediaStreamDestination(); 
        source.buffer = buffer; 
        source.start(0); 
        source.connect(destination); 
        pc.addStream(destination.stream); 
        pc.createOffer(setLocalAndSendMessage); 
       }); 
      }); 

      reader.readAsArrayBuffer(file); 
     } 
    } 
} 

私は、次のしている：

function gotRemoteStream(event) { 
    var mediaStreamSource = context.createMediaStreamSource(event.stream); 
    mediaStreamSource.connect(context.destination); 
} 

このコードは（メディアがありません音楽）が受信側で再生されます。 ただし、WebRTCハンドシェイクが完了し、 gotRemoteStream関数が呼び出された直後に が終了したイベントを受信しました。 gotRemoteStream関数が呼び出され、メディアの再生が開始されません。

アリス側では、 source.connect（宛先）という行で魔法が発生すると考えられます。その行を source.connect（context.destination）に置き換えると、アリスのスピーカーからメディアが正しく再生されます。

ボブ側では、アリスのストリームに基づいてメディアストリームソースが作成されます。ただし、ローカルスピーカーが mediaStreamSource.connect（context.destination）を使用して接続されている場合、スピーカーから音楽が再生されません。

オフもちろん、私は常にデータチャネルを介してメディアファイルを送ることができましたが、どこという点で、楽しいです...

を自分のコードや私のユースケースを実現する方法についていくつかのアイデアと間違っているものを上の任意の手がかりだろう大変感謝しています！

私は最新かつ最高のChrome Canaryを使用しています。

ありがとうございました。

Answer 1

このようにオーディオ要素を使用してオーディオを再生することが可能である：

function gotRemoteStream(event) { 
    var player = new Audio(); 
    attachMediaStream(player, event.stream); 
    player.play(); 
} 

それは私のために（まだ）機能していないWebAudio APIを介して音声を再生します。

Answer 2

Chromeについては、バグのように聞こえる。

Firefoxで試してください（夜間にお勧めします）。私はWebAudioをサポートしていますが、現在サポートされているものについての詳細はすべてわかりません。

また、Firefoxでは少なくとも以下のようなストリームがあります：media_element.captureStreamUntilEnded（）;私はdom/media/tests/mochitestsでの私たちのテストのいくつかに使っています。これにより、任意のオーディオまたはビデオ要素を取り込み、出力を中間ストリームとして取り込むことができます。

編集：下記を参照してください。 ChromeとFirefoxの両方で、WebAudioをWebRTC PeerConnectionsと組み合わせるのにミスがありますが、場所は異なります。 Mozillaはすぐに最後のバグを修正したいと考えています。

Answer 3

MediaStream Integrationをご覧ください。WebRTCとWeb Audio APIの統合を示しています。特に、この例では、あなたの質問に関連しています。私は、これは現在唯一の提案であること、しかし、恐れる

5. Capture microphone input, visualize it, mix in another audio track and stream the result to a peer

<canvas id="c"></canvas> 
<audio src="back.webm" id="back"></audio> 
<script> 
    navigator.getUserMedia('audio', gotAudio); 
    var streamRecorder; 
    function gotAudio(stream) { 
     var microphone = context.createMediaStreamSource(stream); 
     var backgroundMusic = context.createMediaElementSource(document.getElementById("back")); 
     var analyser = context.createAnalyser(); 
     var mixedOutput = context.createMediaStreamDestination(); 
     microphone.connect(analyser); 
     analyser.connect(mixedOutput); 
     backgroundMusic.connect(mixedOutput); 
     requestAnimationFrame(drawAnimation); 

     peerConnection.addStream(mixedOutput.stream); 
    } 
</script> 

。