6

I use following sample program to append media files, but get "Uncaught InvalidStateError : An attempt was made to use an object that is not, or is no longer, usable" error at the first instant it hits code "mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);". I am using Chrome 31.0.1650.57. Can anyone advice me to resolve this?

https://github.com/jbochi/media-source-playground/blob/master/test.html

I have done following modification to append files.

var buffer_len = 0;

function HaveMoreMediaSegments(){
    //return false; //return buffers.length > 0;
    return buffers.length > buffer_len;
}

// var GetNextMediaSegment = GetInitializationSegment;

function GetNextMediaSegment(){
    var buffer = buffers[buffer_len];
    buffers = buffers.slice(1);
    buffer_len = buffer_len + 1;
    return buffer;
}

And changed

mediaSource.sourceBuffers[0].append(mediaSegment);

to

mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);

And

sourceBuffer.append(initSegment);

to

sourceBuffer.appendBuffer(initSegment);

As append method is not working in my environment.

And I use sourceopen instead of webkitsourceopen inside window.setTimeout() event.

mediaSource.addEventListener('sourceopen', onSourceOpen.bind(this, video));
Kenrick
  • 492
  • 8
  • 17
User5791
  • 61
  • 1
  • 6

2 Answers2

14

The problem is that after you append data, the SourceBuffer instance becomes temporarily unusable while it's working. During this time, the SourceBuffer's updating property will be set to true, so it's easy to check for.

But probably the simplest way to deal with this is to listen to the updateend event, and just queue up all your buffers and only append them when the SourceBuffer tells you it's ready for a new one. Like this:

// store the buffers until you're ready for them
var queue = [];

// whatever normally would have called appendBuffer(buffer) can 
// now just call queue.push(buffer) instead

sourceBuffer.addEventListener('updateend', function() {
  if ( queue.length ) {
    sourceBuffer.appendBuffer(queue.shift());
  }
}, false);

Keep in mind that in order for the first event to fire, you need to append the first buffer manually, rather than pushing to queue. After that, just dump everything into the array.

Kevin Ennis
  • 14,226
  • 2
  • 43
  • 44
  • if updateend fires and there is nothing in the queue and then you add something to the queue then it'll never be added to the sourcebuffer. – Sean Nov 23 '16 at 10:08
  • 2
    Sure. So, `queue.push = function( buffer ) { if ( !sourceBuffer.updating ) { sourceBuffer.appendBuffer( buffer ) } else { Array.prototype.push.call( this, buffer ) } }` – Kevin Ennis Nov 28 '16 at 15:20
-1

Have you found the answer? Same problem here :(

I have a temporary solution which is setting setTimeout for each buffer append since you have to wait for previous buffer to finish updating (sourceBuffer.updating == false). The code may look like this:

var i = 0;
stream.on('data', function (buffer) {
    setTimeout(function(){
        sourceBuffer.appendBuffer(buffer);
    }, (i++) * 200);
});
BnoL
  • 497
  • 5
  • 3