Friday 21 April 2017

mediasource buffer fails after two chuncks

Usecase: I'm trying to play a video on my html5 client. The video is located on my nodeJS server. I'm retrieving the stream with socket.io

The problem: After receiving exactly 2 chunks I get the following error "Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer is still processing an 'appendBuffer' or 'remove' operation."

Server:

var readStream = fs.createReadStream("video/testclip.mp4");
socket.on('videoStreamRequest', function(req)
{
  console.log('requesting video...');

  readStream.addListener('data', function(data)
  {
    socket.emit('videoStreamData', data);
  });
});

client:

var mediaSource = new MediaSource();
var videoElement = document.getElementById('videoPlayer');

videoElement.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', onMediaSourceOpen);

function onMediaSourceOpen()
{
    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    var socket = io.connect(config.SIGNALING_SERVER_URL);

    socket.emit('videoStreamRequest', 'request');

    socket.on('videoStreamData', function(data)
    {
        console.log("receiving video data...");
        console.log(data);
        sourceBuffer.appendBuffer(data);
    });
}

I'm still pretty new at this, so odds are I'm missing something obvious, but I'm at wits end so any and all help is greatly appreciated :)



via Berry

No comments:

Post a Comment