如何从 WebRTC PeerConnection 获取多个流

Question

根据RTCPeerConnection.ontrack 文档，“ontrack”事件假设为每个传入流触发。我有一个带有两个视频流的 PeerConnection，连接后，“ontrack”会触发两次（到这里一切正常）。但是两次它都发送相同的流，所以我最终得到了两个相同的视频，我确定发送者正在发送两个不同的流，它们的尺寸和帧速率不同，我可以在 chrome://webrtc-internals/ 中清楚地看到2 个视频流具有不同的帧大小/速率。

这是PeerConnection ontrack 代码：

        this.peerConnection.ontrack = function(evt) {
            console.log("PeerConnection OnTrack event: ", evt.streams);
            that.emit('onRemoteStreamAdded', evt.streams);
        };

我不认为evt.streams 有1 个对象，所以我没有写evt.streams[0]。

这是 Chrome 控制台日志：

从日志中可以明显看出getRemoteStreams() 只返回一个对象。 ontrack 只有一个流时怎么可能触发两次，为什么第二个 RTCRtpTransceiver 不创建新流？

Answer 1

在使用不同的浏览器和阅读文档数小时后，我解决了这个问题！

问题从MediaStream.id 开始，它假设是唯一的，但HTML5 中的<video> 元素只监听每个流中的第一个音轨。 PeerConnection 将新的收发器（作为 MediaStreamTrack）添加到同一个 MediaStream，因此无论ontrack 处理程序触发多少次，您都会得到完全相同的MediaStream 对象，但每次您在RTCTrackEvent 中都有新的唯一MediaStreamTrack。

解决方案是在ontrack 处理程序中为每个新的MediaStreamTrack 创建新的MediaStream 对象。

this.peerConnection.ontrack = function(event) {
    that.emit('onRemoteStreamAdded', new MediaStream([event.track]));
};

或者，更像是标准示例：

pc.ontrack = function(event) {
  document.getElementById("received_video").srcObject = new MediaStream([event.track]);
};

Answer 2

您会得到两个 轨道，它们是单个流的一部分。可以看到在 event.track 属性中，一个应该是音频，另一个应该是视频。

请参阅https://blog.mozilla.org/webrtc/the-evolution-of-webrtc/，了解有关流和轨道如何工作的背景信息。