mediaSource.endOfStream() Throws error

[jpmedley]

Line 51 of main.js throws this error on Chrome 55:

Uncaught DOMException: Failed to execute 'endOfStream' on 'MediaSource': The 'updating' attribute is true on one or more of this MediaSource's SourceBuffers. at FileReader.reader.onload (https://simpl.info/mse/js/main.js:51:23)

[samdutton]

Yeah... need to fix :).

[wnda]

I've seen this error in several examples of chunked video players. It did not seem to cause a significant playback issue.

» Reference

I think wrapping mediaSource.endOfStream() at L51 in the following way should suffice to prevent it from throwing:

sourceBuffer.addEventListener('updateend', function() {
  if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
    mediaSource.endOfStream();
  }
});

» Example (might need a hard refresh)

[samdutton]

Nice one @wnda! I've incorporated your fix and it seems to work :).

@joeyparrish — any thoughts on this?

[joeyparrish]

I haven't looked at the code in question, but operations on MediaSource and SourceBuffer must be serialized. Operations on SourceBuffer cannot be started until previous operations on the same buffer are complete (updating==false). Operations on MediaSource, such as endOfStream or setting duration, must wait until all SourceBuffers are idle.

This is how we ended up with MediaSourceEngine in Shaka Player, which wraps all the operations in Promises and manages queues of operations. It makes it much easier to isolate all the events and synchronization between buffers so you can just say "do this" and not worry about MediaSource state in your application.