使用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);
}

此代碼不會使媒體（音樂）在接收方播放。 event right after the WebRTC handshake is done and the function was called. 但是，在WebRTC握手完成並且調用了 函數之后，我確實收到了一個已 事件。 function gets called the media does not start playing. 調用函數，媒體無法開始播放。

. 在愛麗絲的一面，神奇的假設發生在說明 。 the media start playing correctly through Alice's speakers. 當我用替換該行時，媒體開始通過Alice的揚聲器正確播放。

在Bob的一側，基於Alice的流創建媒體流源。 the music doesn't start playing through the speakers. 但是，當使用連接本地揚聲器時，音樂不會通過揚聲器開始播放。

當然，我總是可以通過DataChannel發送媒體文件，但那里的樂趣在哪...

關於我的代碼有什么問題或者如何實現我的用例的一些想法的任何線索將不勝感激！

我正在使用最新最好的Chrome Canary。

謝謝。

Answer 1

element like this: 可以使用元素播放音頻，如下所示：

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

通過WebAudio API播放音頻它對我來說還不起作用。

Answer 2

請注意Chrome; 聽起來像個臭蟲。

在Firefox上試試（我建議每晚）; 雖然我不知道當前支持的所有細節，但我們在那里有WebAudio支持。

另外，在Firefox上至少我們有stream = media_element.captureStreamUntilEnded（）; 我相信，我們在dom / media / tests / mochitests的一些測試中使用它。 這使您可以采用任何音頻或視頻元素並將輸出捕獲為媒體流。

編輯：見下文; Chrome和Firefox都沒有將WebAudio與WebRTC PeerConnections結合使用，但在不同的地方。 Mozilla希望很快能解決最后一個bug。

Answer 3

查看MediaStream Integration頁面。 它說明了WebRTC與Web Audio API的集成。 特別是此示例與您的問題相關：

5. 捕獲麥克風輸入，將其可視化，混合另一個音軌並將結果傳輸到對等端

<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>

但是，我擔心這只是目前的提案。