如何从 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，它应该是唯一的，但<video>HTML5 中的元素仅侦听每个流中的第一个轨道。PeerConnection 将新的收发器（如 MediaStreamTrack）添加到同一个 MediaStream，因此无论ontrack处理程序触发多少次，您都会得到完全相同的MediaStream对象，但每次MediaStreamTrack在RTCTrackEvent.

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

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]);
};