javascript - 如何在 WebRTC 中将多个轨道添加到对等连接?

标签 javascript webrtc

我希望仅使用一个 RTCPeerConnection 发送两个视频流(一个视频流和一个从 canvas HTML 元素捕获的流)。

我尝试做的是在提供之前将 addTrack 都跟踪到对等连接对象,但它在 Firefox 中不起作用(它在 Chrome 中起作用)。 peerConnection.ontrack 事件只发生一次,第一个轨道添加到对等连接对象(尽管有两个流)。

我已阅读有关重新协商的内容,但我目前在发送要约之前将两条轨道都添加到对等连接中,因此我不知道是否需要重新协商。我需要吗?

我还听说过 Firefox(统一计划)和 Chrome(计划 B)之间的多流互操作性问题,所以请告诉我现在应该采取什么方法。

我正在使用 adapter.js。

添加代码(实际上是javascript):

function createPeerConnection() {
    peerConnection = new RTCPeerConnection(iceServers);

    peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
            // send to server
        }
    };

    videoStream.getTracks().forEach(track => peerConnection.addTrack(track, videoStream));
    canvasStream.getTracks().forEach(track => peerConnection.addTrack(track, canvasStream));
}

这就是我创建 RTCPeerConnection 和添加轨道的方式。在这部分创建报价并发送到信令服务器之后......一切正常,只是另一端只收到添加的第一首轨道(在 Firefox 中)。如果您需要这些位,我会添加它们。

这是轨道上的事件处理程序。

    peerConnection.ontrack = (event) => {
        console.log(event); //only prints the first track in Firefox, but prints both tracks in Chrome
    };

最佳答案

尝试在 Chrome 中启用统一计划支持。这仍在进行中,并在标志后面(在 chrome://flags 上启用实验性网络平台功能)。 然后你需要构建你的 RTCPeerConnection 新的 RTCPeerConnection({sdpSemantics:'统一计划'})

关于javascript - 如何在 WebRTC 中将多个轨道添加到对等连接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50131688/

相关文章:

javascript - 如何将 Ember.JS 与数据库连接?

webrtc - 显示带有媒体流扩展(MSE)的getUserMediaStream实时视频

javascript - iOS 11.3 通过 getUserMedia 和黑屏访问相机

javascript - 使用 Firestore 进行 webRTC 视频聊天

javascript - 如何在 Chrome 中跟踪 WebRTC VideoStream 的分辨率/宽高比?

php - Echo Ajax - PHP、AJAX、Jquery

javascript - javascript是否有类似Object.assign之类的东西,其中包括可枚举的: false properties when copying objects?

javascript - D3 行生成器仅生成 NaN 值

javascript - 如何触发动态创建的元素的点击

amazon-web-services - 对从 iOS Safari WebRTC 创建的视频进行转码时,AWS MediaConvert 失败