RTC Peer Connection - receiving stream twice

Question

I have an instance of RTCPeerConnection with ontrack defined:

 newConnection.ontrack = receivedStream // remote

Once the SDP exchange is complete and the peer adds their local stream:

 connection.addStream(stream); // local

I see that receivedStream gets invoked twice per stream - Inspecting e.track shows me that the first invocation is for the audio track, and second is for the video track.

What's odd is that inspecting e.streams[0] and calling getTracks on this gives me two MediaStreamTracks - one for audio and another for video:

So I'm netting four MediaStreamTracks across two invocations of receivedStream despite calling addStream once.

receivedStream is here:

 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

You can perform the same procedure for each MediaStreamTrack, that is add the MediaStreamTrack to a MediaStream instance, then set .srcObject of HTMLMediaElement

const mediaStream = new MediaStream();

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

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

video.srcObject = mediaStream;