如何从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只有一个对象，因此我没有写成evt.streams[0]。

以下是Chrome控制台日志:

从日志中可以明显看出getRemoteStreams()仅返回一个对象。如果只有一个流，为什么ontrack会触发两次，并且第二个RTCRtpTransceiver没有产生新的流？

- Keivan

Answer 1

在不同的浏览器上苦苦挣扎并多次阅读文档几个小时后，我终于解决了这个问题！

问题起源于MediaStream.id，它应该是唯一的，但是HTML5中的<video>元素仅侦听每个流中的第一个轨道。PeerConnection向同一MediaStream添加新的转换器(作为MediaStreamTrack)，因此无论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]);
};

- Keivan

Answer 2

这个帖子太旧了，但我会为未来的访问者添加这个答案。在WebRTC应用程序中，需要在两端进行更改。在发送端，需要单独将多个视频添加到轨道中（而不是使用常规程序）。使用常规程序，接收端会将两个流合并。在接收端，您需要检查event.stream和event.track，并将它们分别添加到适当的标签中。

- Basidh

Answer 3

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

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

- Philipp Hancke

---

谢谢您不阅读我的问题！首先，我不是有两个流，而是超过5个。其次，它们全部都是没有音轨的视频，请查看我的问题。第三，这不是WebRTC的错，部分原因是HTML <video>元素实现和浏览器中MediaStream实现的错误。请检查我的答案以获取正确的解决方案。 - Keivan

你是在连接的另一端调用了 addTrack(track) 而不是 addTrack(track, stream) 吗？如果是这样的话，那么这种行为就可以解释了，因为所有内容都会进入接收器上的一个通用 MediaStream 中。这通常被认为不是一个好主意。 - Philipp Hancke