MediaSource appending to SourceBuffer does not work after the first time

Question

I am currently trying to stream a .webm video file via socket.io to my client (currently using Chrome as client).

Appending the first Uint8Array to the SourceBuffer works fine but appending further ones does not work and throws the following error: Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.

My current code:

'use strict';

let socket = io.connect('http://localhost:1337');

let mediaSource = new MediaSource();
let video = document.getElementById("player");
let queue = [];
let sourceBuffer;

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

mediaSource.addEventListener('sourceopen', function() {
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

    socket.on("video", function(data) {
        let uIntArray = new Uint8Array(data);

        if (!sourceBuffer.updating) {
            sourceBuffer.appendBuffer(uIntArray);
        } else {
            queue.push(data);
        }
    });
});

Server side code (snippet)

io.on('connection', function(socket) {
            console.log("Client connected");

            let readStream = fs.createReadStream("bunny.webm");
            readStream.addListener('data', function(data) {
                socket.emit('video', data);
            });
        });

I also removed the webkit checks since this will only run on Chromium browsers.

Answer 1

I think you have to free the buffer, see the remove() function http://w3c.github.io/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end

Let me know if it helped.