如何从 WebRTC PeerConnection 获取多个流

Question

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

这里是 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() returns 只有一个对象。当它只有一个流时，怎么可能 ontrack 触发两次，为什么第二个 RTCRtpTransceiver 不创建新流？

Answer 1

在与不同的浏览器斗争几个小时并多次阅读文档后，我解决了这个问题！

问题从 MediaStream.id 开始，它应该是唯一的，但 HTML5 中的 <video> 元素仅收听每个流中的第一首曲目。 PeerConnection 将新的收发器（如 MediaStreamTrack）添加到同一个 MediaStream，因此无论 ontrack 处理程序触发多少次，你都会得到完全相同的 MediaStream 对象，但每次你都有新的唯一 MediaStreamTrack 内部RTCTrackEvent.

解决方案是为 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

您将获得两个 tracks，它们是单个流的一部分。你可以看到在event.track属性里面，其中一个应该是音频，另一个应该是视频。

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

如何从 WebRTC PeerConnection 获取多个流

How to get multiple streams from WebRTC PeerConnection

webrtc