CODEWITHSUNDEEP
javascriptandroidhtmlandroid-webviewmedia-source
Moti
Moti

Reputation: 482

Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

I am trying to stream a video file via socket.io to my client (currently using Chrome as client). I am only getting the first frame of the video and afterwards the Failed to appendBuffer is appears:

Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

Part of JS code:

   if (buffer.updating || queue.length > 0) {
        console.log("buffer.updating = " + buffer.updating  + " queue.length  = "  + (queue.length));
            queue.push(videoData);
        } else {
        console.log("else buffer.updating = " + buffer.updating  + " queue.length = "  + (queue.length));
            buffer.appendBuffer(videoData);
        }

    }
};

var play = function() {

    //var mimeType = `video/mp4;codecs="${$scope.codec}"`;
    var mimeType = 'video/mp4;codecs="' + codec +'"';

    console.log("mimetype = " + mimeType + " is supported = " + MediaSource.isTypeSupported(mimeType));

    buffer = mediaSource.addSourceBuffer(mimeType);

    buffer.addEventListener('update', function () {
        if (queue.length > 0 && !buffer.updating) {
            console.log("buffer.appendBuffer");
            buffer.appendBuffer(queue.shift());
        }
    });



    video.play();
};

Please help me!

Upvotes: 9

Views: 14347

Answers (1)

tyohan
tyohan

Reputation: 155

This is could be happen when source buffer still updating and you call appendBuffer to append another buffer to it. You should wait the updateend event called then you're allowed to append another buffer. You can use Promise to have an await function waiting until it resolve then you append another buffer like this:

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

const loadBuffer = (buffer) => {
  return new Promise((resolve)=>{
    sourceBuffer.addEvenListener('updateend',() resolve);
    sourceBuffer.append(buffer);
  });
};

await loadBuffer(buffer1);
await loadBuffer(buffer2);

Upvotes: 0

Related Questions