11

这是我的用例：Alice 有一个很酷的新媒体曲目，她想让 Bob 收听。她在浏览器中选择媒体文件，媒体文件立即在 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函数被调用，媒体没有开始播放。

在 Alice 方面，魔法应该发生在source.connect(destination)行中。当我用source.connect(context.destination)替换该行时，媒体开始通过 Alice 的扬声器正确播放。

在 Bob 方面，基于 Alice 的流创建了一个媒体流源。但是，当使用mediaStreamSource.connect(context.destination)连接本地扬声器时，音乐不会开始通过扬声器播放。

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

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

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

谢谢。

4

3 回答 3

3

可以使用Audio元素播放音频，如下所示：

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

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

于 2013-07-16T11:04:10.477 回答
1

一定要注意 Chrome；听起来像一个错误。

在 Firefox 上试试（我建议每晚）；我们在那里有 WebAudio 支持，但我不知道当前支持的所有细节。

此外，至少在 Firefox 上我们有 stream = media_element.captureStreamUntilEnded(); 我相信我们在 dom/media/tests/mochitests 的一些测试中使用它。这使您可以获取任何音频或视频元素并将输出捕获为媒体流。

编辑：见下文；Chrome 和 Firefox 在将 WebAudio 与 WebRTC PeerConnections 相结合时都有失误，但在不同的地方。Mozilla 希望尽快修复那里的最后一个错误。

于 2013-07-08T14:41:13.020 回答
0

查看页面MediaStream 集成。它说明了 WebRTC 与 Web 音频 API 的集成。特别是这个例子与你的问题有关：

  1. 捕获麦克风输入，将其可视化，混入另一个音轨并将结果流式传输到对等方
<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>

然而，我担心这只是目前的一个提议。

于 2017-06-12T14:50:09.800 回答