RTC 对等连接 - 接收流两次答案

【问题标题】：RTC Peer Connection - receiving stream twiceRTC 对等连接 - 接收流两次
【发布时间】：2021-04-20 13:15:25
【问题描述】：

我有一个RTCPeerConnection 的实例，其中定义了ontrack：

 newConnection.ontrack = receivedStream // remote

一旦 SDP 交换完成并且对等方添加其本地流：

 connection.addStream(stream); // local

我看到receivedStream 在每个流中被调用两次 - 检查e.track 显示第一次调用是针对audio 轨道，第二次是针对video 轨道。

奇怪的是，检查e.streams[0] 并为此调用getTracks 给了我两个MediaStreamTracks - 一个用于音频，另一个用于视频：

因此，尽管调用了一次 addStream，但我在两次调用 receivedStream 时获得了四个 MediaStreamTracks。

receivedStream 在这里：

 function receivedStream(e) {
        var stream = e.streams[0]; // this gets invoked twice when adding one stream!
        if (!stream) {
            throw new Error("no stream found");
        };
        // this gets me the corresponding connection
        waitForStream(stream.id).then(function (connection) {
            // get element
            targetVideoElement[0].srcObject = stream; // this now gets called twice per stream - once for audio, once for video
        }).catch(function (error) {
           // log
        });
    }

【问题讨论】：

“我不记得在以前的实现中发生过这种情况”你能包括你以前在问题中实现的代码吗？
@guest271314 - 这是旧代码以某种方式成功配置目标<video> 元素的srcObject 以输出音频和视频；我不记得是怎么回事。

标签： javascript webrtc

【解决方案1】：

您可以对每个MediaStreamTrack 执行相同的过程，即将MediaStreamTrack 添加到MediaStream 实例，然后设置.srcObject 的HTMLMediaElement

const mediaStream = new MediaStream();

const video = document.querySelector("video");

for (const track of receivedMediaStream) {
  mediaStream.addTrack(track)
}

video.srcObject = mediaStream;

【讨论】：

谢谢 - 不过我该如何在接收端配对 video 和 audio 轨道？您是否知道无需手动编排这些对来传输 a/v 的任何方法？
@SB2055 不确定您的意思？您将每个MediaStreamTrack 添加到MediaStream 实例，每个流在HTMLMediaElement 处输出媒体。如果您收到MediaStream 本身，而不是单独的MediaStreamTracks，您可以将.srcObject 设置为收到的MediaStream
我的意思是我有一个newConnection.ontrack = receivedStream 函数，它接受传入的MediaStreamTrack，尽管看起来无法知道它们来自哪个stream。这意味着我需要告诉receivedStream 流用于哪个RtcPeerConnection，然后设置某种“等待”，即“当我们同时拥有音频和视频轨道时，推送到DOM”。对吗？
啊！这就是我想要的 - 接收整个 MediaStream 而不是轨道。我怎样才能避免上述复杂性？
您能否在问题中包含其余代码？您是否尝试过使用RTCPeerConnection.getRemoteStreams() 或.getLocalStreams()？

【解决方案2】：

可能您在远程对等点中添加了多个轨道，如下所示：

localStream.getTracks().forEach(track => peer.addTrack(track, localStream));

远程 Peer 中对 peer.addTrack() 的每次调用都会在本地 peer.ontrack = () 中产生和事件

【讨论】：

【解决方案3】：

track 事件为每个 MediaStreamTrack 触发一次。因此，如果您在 MediaStream 中有两个不同的轨道，例如音频和视频，则 ontrack 事件将触发两次。两个事件的事件的stream 属性将相同，您可以将流附加到相同的音频或视频元素两次而不会产生任何后果。

【讨论】：