javascript – MediaSource附加到SourceBuffer在第一次不工作

我目前正在尝试通过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浏览器上运行.

解决方法

我想你必须释放缓冲区,看到remove()函数
http://w3c.github.io/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end

让我知道是否有帮助.

原文地址：https://www.jb51.cc/js/151680.html