CODEWITHSUNDEEP
htmlhtml5-videomedia-source
Alex Kyriazis
Alex Kyriazis

Reputation: 331

HTML5 how to display MediaStream with multiple video tracks

I have a MediaSource object in my browser (firefox). The following successfully displays a video.

document.getElementById("stream").srcObject = event.stream;

Now I actually have two video tracks in this MediaSource object. If I call

event.stream.getVideoTracks()

It returns two video tracks

(2) […]​
0: VideoStreamTrack { enabled: true, kind: "video", id: "{2ade10ae-cfff-2b4e-a1d2-5317edb2a525}", label: "remote video", … }​
1: VideoStreamTrack { enabled: true, kind: "video", id: "{89863fd0-3165-0848-91e7-14a627af9726}", label: "remote video", … }​

Both of these SHOULD have valid video tracks. Ideally I want to display each one in a separate video element if possible. However, I can't even get the second track to play at all (even instead of the first one).

I tried setting the 'enabled' property to false on the first track. The stream just goes blank. I tried swapping the array positions of the first and second, but the stream goes blank. I can't find anyway for the second stream to play.

Is there something I'm missing here? There is a surprising lack of resources for being able to deal with multiple video tracks.

Upvotes: 4

Views: 2834

Answers (1)

DMakeev
DMakeev

Reputation: 159

The easiest solution is to create 2 MediaStreams, based on those tracks:

const videoTracks = event.stream.getVideoTracks();
const MediaStream1 = new MediaStream([videoTracks[0]]);
const MediaStream2 = new MediaStream([videoTracks[1]]);

document.getElementById('video1').srcObject = MediaStream1;
document.getElementById('video2').srcObject = MediaStream2;

Upvotes: 3

Related Questions