Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Smooth representation change using Media Source API

I am currently working on DASH player using JavaScript and MediaSource API

Streaming is working fine but I am stuck with changing representation. Probably the most bruteforced way to change representation during playback is about replacing <video> element in HTML document.

Hovewer, I was wondering if there is a simple way to implement adaptation (changing representation) with Media Source API. I've read that single Media Source object can handle many source buffers, but after adding second video buffer an exception is raised.

I am using Chrome 43.0.2357.65m

var mediaSource = MediaSource();
var url = URL.createObjectURL(mediaSource);

videoElement.src = url;

mediaSource.addEventListener('sourceopen', function () {
    var buffer1 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
    var buffer2 = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4d4015"');
}

Exception:

Uncaught QuotaExceededError: Failed to execute 'addSourceBuffer' on    'MediaSource': This MediaSource has reached the limit of SourceBuffer objects it can handle. No additional SourceBuffer objects may be added.
like image 987
skwarek Avatar asked May 25 '15 10:05

skwarek


Video Answer


1 Answers

Unfortunately the MSE spec doesn't say much about smoothly changing representations. The way to learn how to do it is to read the code of an existing dash player and see how it does it. In order to save you a bunch of time, here is how to do it:

  1. First of all you only need one source buffer. It doesn't matter that the codecs of the different representations are different. You create one source buffer and use it for the entire life span of the player. It doesn't matter how many times you switch representations.

  2. The way to switch representation is actually very easy. You just have to append the initialization header of the target representation to the source buffer. And that's it. After that the decoder has been reinitialized and you can start appending segments that belong to the new representation.

  3. Append segments of the target representation and enjoy the smooth transition.

Thant's it. It's not hard once you figure out what you have to do.

like image 135
Svetlin Mladenov Avatar answered Nov 03 '22 00:11

Svetlin Mladenov