Question

这是我的用例：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。

感谢。

Answer 1

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

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的集成。特别是这个例子与您的问题相关：

捕捉麦克风输入，将其可视化，混合另一个音轨并将结果传输给同伴

 <set-attachment attachmentName="#[flowVars.filename]" value="#[payload]" contentType="text/plain" doc:name="Attachment" metadata:id="2d991254-c66e-4861-b099-eb624ea4a018"/>
    <http:request config-ref="HTTP_Request_Configuration" path="/rest/api/2/issue/JIR-2/attachments" method="POST" doc:name="HTTP">
        <http:request-builder>
            <http:query-param paramName="oauth_nonce" value="#[flowVars.para.oauth_nonce]"/>
            <http:query-param paramName="oauth_token" value="#[flowVars.para.oauth_token]"/>
            <http:query-param paramName="oauth_timestamp" value="#[flowVars.para.oauth_timestamp]"/>
            <http:query-param paramName="oauth_signature_method" value="RSA-SHA1"/>
            <http:query-param paramName="oauth_consumer_key" value="hardcoded-consumer"/>
            <http:query-param paramName="oauth_version" value="1.0"/>
            <http:query-param paramName="oauth_signature" value="#[flowVars.para.oauth_signature]"/>
            <http:header headerName="X-Atlassian-Token" value="nocheck"/>
            <http:header headerName="Content-Type" value="multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW"/>
            <http:header headerName="------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition" value="form-data; name=&quot;documentFile&quot;; filename=&quot;documentFile&quot;"/>
        </http:request-builder>
    </http:request>

但是，我担心这只是目前的提案。

使用WebRTC流媒体文件

3 个答案: