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!

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!

• javascript
• android
• html
• android-webview
• media-source

• 1 Someone , Please help me? – Moti Commented Jul 10, 2017 at 12:59
• 1 Hey Moti, did you figure this out? – Tyler Biscoe Commented Jul 30, 2017 at 22:52
• Unfortunately I have no solution for the moment,if you have any idea i will be happy to listen... – Moti Commented Jul 31, 2017 at 6:09
• 2 Also in case of Chrome you can check logs of an actual player behind Video element in chrome://media-internals/ – Andrey Commented Aug 10, 2017 at 11:34
• 3 I think your problem is related with the video tag maybe you are missing src or something like that you can try to find out if it is related with video tag error by document.getElementById('videoElementId').addEventListener('error',function(e){ console.error(e); }); – mentes Commented Aug 28, 2017 at 22:55

1 Answer 1

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);