Is it possible to switch between video tracks in HTML5 MSE?

Question

I'm using HTML5 Media source extensions (MSE) to stream a video using DASH. I created my media segments using MP4Box from a MP4 file with two video tracks in it. So what I have is a single initialisation segment with moov->sidx boxes and multiple media-segments moof->mdat containing both video tracks. If I push them to the sourceBuffer with appendBuffer function, MSE decodes and shows only the first video track (I assume that the data from the second video track is just discarded).

Here are the relevant parts from my code:

sourceBuffer = mediaSource.addSourceBuffer(stats.mimeType); // mime type: video/mp4
...
// after downloading mediasegment append its contents 'data' to sourceBuffer
sourceBuffer.appendBuffer(new Uint8Array(data));

So my question is, is it possible to control the sourceBuffer in such a way that the client can select which track to decode? I suppose that splitting the video tracks to different adaptation sets (creating separate mp4 files with a single video track in each one) could be a solution but I'm not interested in this approach.

Thank you guys.

Answer 1

Okay I found a way how to do this. Using videoTracks attribute we can access the video tracks and change its selected attribute. So it was pretty simple to do.

Here is an example how to toggle the tracks after third segment was downloaded:

if(segmentCnt==3 && sourceBuffer.videoTracks.length == 2)
{
    console.log('tracks cnt: ' + sourceBuffer.videoTracks.length);
    for(var i=0; i<sourceBuffer.videoTracks.length; i=i+1) {
        var trackID = sourceBuffer.videoTracks[i].id;
        var trackSelected = sourceBuffer.videoTracks[i].selected;
        console.log('trackID: ' + trackID + ' selected: ' + trackSelected);
        sourceBuffer.videoTracks[i].selected = !trackSelected;
    }
}