javascript - 使用 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 函数后，我确实收到了一个 ended 事件。 gotRemoteStream 函数被调用媒体没有开始播放。

在爱丽丝这边，魔术应该发生在说source.connect(destination) 的行中。当我用 source.connect(context.destination) 替换该行时，媒体开始通过 Alice 的扬声器正确播放。

在鲍勃这边，媒体流源是根据爱丽丝的流创建的。但是，当使用 mediaStreamSource.connect(context.destination) 连接本地扬声器时，音乐不会通过扬声器开始播放。

当然，我总是可以通过 DataChannel 发送媒体文件，但这样做的乐趣在哪里......

任何有关我的代码有什么问题的线索或有关如何实现我的用例的一些想法都将不胜感激!

我使用的是最新最好的 Chrome Canary。

谢谢。

Answer 1

可以像这样使用 Audio 元素播放音频:

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

通过 WebAudio API 播放音频对我来说(还)不起作用。