RTC 对等连接 - 接收流两次

Question

我有一个RTCPeerConnectionwithontrack定义的实例：

 newConnection.ontrack = receivedStream // remote

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

 connection.addStream(stream); // local

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

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

因此，尽管调用了一次，但 我还是在两次调用中获得了四个 。MediaStreamTracksreceivedStreamaddStream

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

Answer 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;