Change the VideoTrack of a MediaStream object

Question

In a Nutshell: I'm trying to change the VideoTrack of a MediaStream object.

(Documentation: https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API)

I have a MediaStream object __o_jsep_stream_audiovideo which is created by the sipml library.

__o_jsep_stream_audiovideo looks like this:

So it has one AudioTrack and one VideoTrack. At first the VideoTrack comes from the users camera (e.g label: "FaceTime Camera").

According to the Documentation:

A MediaStream consists of zero or more MediaStreamTrack objects, representing various audio or video tracks.

So we should be fine adding more Tracks to this Stream.

I'm trying to switch/exchange the VideoTrack with that from another stream. The other stream (streamB) originates from Chromes ScreenCapture api (label: "Screen")

I tried:

__o_jsep_stream_audiovideo.addTrack(streamB.getVideoTracks()[0])

which doesn't seem to have any effect.

I also tried assigning the videoTracks directly (which was desperate I know).

I must be missing something obvious could you point me in the right direction?

I'm running

• Chrome (Version 34.0.1847.131) and
• Canary (Version 36.0.1976.2 canary)
• OSX 10.9.2

Answer 1

Adding and removing tracks on a MediaStream object do not signal a renegotiation and there are also issues with a MediaStream having two tracks of the same type in chrome.

You should probably just add the separate mediastream to the peer connection so that it can fire a re-negotiation and handle the streams. The Track add/remove functionality in chrome is very naive and not very granular and you should move away from it as much as you can.

Answer 2

When you talk about change video track, we mean 2 areas:

1. change the remote video track (what the others can see from u)

WebRTC gets new version of doing that, since it deprecates addStream/removeStream. However, the excelence is that they introduce new interface replaceTrack

stream.getTracks().forEach(function(track) {
    // remote
    qcClient.calls.values().forEach(function(call) {
    var sender = call.pc.getSenders().find(function(s) {
        return s.track.kind == track.kind;
    });
    sender.replaceTrack(track);
    });
});

2. change your display video (You see yourself)

Better to just add a new video element (or using existing video element) But assign srcObject to the new captured stream