javascript - RTC 对等连接 - 接收流两次

Question

我有一个 RTCPeerConnection 的实例与 ontrack定义:

 newConnection.ontrack = receivedStream // remote

一旦 SDP 交换完成并且对等方添加了他们的本地流:

 connection.addStream(stream); // local

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

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

所以我得到了四个 MediaStreamTracks在 receivedStream 的两次 调用中尽管打电话addStream一次。

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 实例，然后设置 。 HTMLMediaElement

的 srcObject

const mediaStream = new MediaStream();

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

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

video.srcObject = mediaStream;