如何在 WebRTC 中将多个轨道添加到对等连接？答案

【问题标题】：How to add multiple tracks to peer connection in WebRTC?如何在 WebRTC 中将多个轨道添加到对等连接？
【发布时间】：2018-10-12 09:20:17
【问题描述】：

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

我尝试做的是在提供报价之前将两个轨道都添加到对等连接对象，但它在 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 中）。如果您需要这些位，我会添加它们。

这是 ontrack 事件处理程序。

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

【问题讨论】：

嗨！我知道这很麻烦，但你能给我们看一个精简版的代码吗？也许在实现这一目标的过程中，您将自己解决问题。它发生在我身上好几次... :wink:
我添加了一些代码！如果您需要更多或不同的部分，请告诉我。
你解决了这个问题吗？

标签： javascript webrtc

【解决方案1】：

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

【讨论】：

谢谢。虽然，这是一个生产应用程序，所以我担心这不太可能......你也许有一个解决我在 Firefox 上的情况的解决方案吗？本地对等 connection.ontrack 仅检测添加到远程连接的第一个轨道。
另外，如果此时无法实现互操作性，您会建议我如何实现画布流式传输和视频流式传输？两个连接？
两个连接是目前使用更广泛的方法。 SDP 在统一计划和计划 b 之间转换是可能的，但很难做到正确。请参阅github.com/jitsi/sdp-interop 了解一种方法
好的，所以这个github.com/jitsi/sdp-interop 链接似乎是金色的。