HTML5 sourcebuffer stalls in firefox

19 Views Asked by At

I'm learning the use of the hml5 <video> tag. I'm making a simple video server with node.js, socket.io, HTML5 and some signaling. This is the essential chunk on the server:

        ffmpeg()
            .input('video.mp4')
            ...
            .pipe()
            .on('data', function(data) {
                socket.emit('data', data );
            });

In the client, I have:

    const mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);
    socket.on('connect', () => {socket.emit('offer', 'start');});
    mediaSource.addEventListener("sourceopen", (event) => {
        const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=vp8');
        socket.on('data', (data) => {
            sourceBuffer.appendBuffer(data); // <----- HERE!!!
        });
    });

In Chromium, this works fine. But in Firefox, it seems like the appendBuffer() is not sending the data to the mediaSource (debugging, I find the sourceBuffer tends to grow, just add a console.log(sourceBuffer.buffered);: it tends to grow).

Why is the sourceBuffer in Firefox not transferring the data to the mediaSource?

If you want to test it, find the full application here. Yes, I'm sure that Firefox can reproduce the video. Yes, I have an updated Firefox.

0

There are 0 best solutions below