javascript - 第一次后附加到 SourceBuffer 的 MediaSource 不起作用

Question

我目前正在尝试通过 socket.io 将 .webm 视频文件流式传输到我的客户端(当前使用 Chrome 作为客户端)。

将第一个 Uint8Array 附加到 SourceBuffer 可以正常工作，但附加更多的则不起作用并引发以下错误: 未捕获的 DOMException:无法在“SourceBuffer”上执行“appendBuffer”:HTMLMediaElement.error 属性不为空。

我当前的代码:

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

服务器端代码(片段)

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

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

我还删除了 webkit 检查，因为它只会在 Chromium 浏览器上运行。

Answer 1

我认为你必须释放缓冲区，请参阅 remove() 函数 http://w3c.github.io/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end

如果有帮助，请告诉我。