webrtc - 如何从 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 不制作新流？

标签： webrtc

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