I have an instance of RTCPeerConnection with ontrack defined:

 newConnection.ontrack = receivedStream // remote

Once the SDP exchange is plete 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
        });
    }

I have an instance of RTCPeerConnection with ontrack defined:

 newConnection.ontrack = receivedStream // remote

Once the SDP exchange is plete 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
        });
    }

• javascript
• webrtc

• "I don't recall this happening in previous implementations" Can you include the code that you previously implemented at Question? – guest271314 Commented Jul 30, 2017 at 21:14
• @guest271314 - it was old code that somehow successfully configured the srcObject of a target <video> element to output both audio and video; I don't recall how though. – SB2055 Commented Jul 30, 2017 at 21:16

3 Answers 3

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;

May be you have added more than one track in remote peer like here:

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

Each call to peer.addTrack( ) in the remote Peer produces and event in local peer.ontrack = ()

the track event is fired once for each MediaStreamTrack. Hence, if you have two different tracks, such as an audio and a video, in a MediaStream, the ontrack event will fire twice. The stream property of the event of both events will be identical and you can attach the stream to the same audio or video element twice without consequences.