Javascript MediaSource SourceBuffer在2次appendBuffer调用后关闭

我正在尝试将webm视频文件流式传输到客户端

第一个块（大约4466字节长）“工作”（使用appendBuffer），我可以看到

调整到视频的分辨率

下面是我在第三次追加后得到的错误：

Uncaught InvalidStateError：试图使用不可用或不再可用的对象。

SourceBuffer

的

buffered

属性有以下错误：

[异常：DomeException]

以下是客户端代码：

var client = new BinaryClient('ws://127.0.0.1:3080/binary-endpoint');
var ms = new MediaSource();
var sourceBuffer;
var video = document.querySelector('video');
var needUpdate = true;
var paused = true;
var busy = false;
var initial = true;

ms.addEventListener('sourceopen', function(e) {

    console.log('The MediaSource has been opened: ', e)

    sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    ms.duration = 1000;

    sourceBuffer.addEventListener('updatestart', function(e) {
        busy = true;
    });

    sourceBuffer.addEventListener('updateend', function(e) {
        console.log(e);
        busy = false;
    });

    sourceBuffer.addEventListener('update', function(e) {
        console.log('Update succeeded', e)
    });

    console.log('The SourceBuffer has been created', sourceBuffer);
}, false);

client.on('stream', function(stream, meta){

    stream.on('data', function(data) {

        var DATA = new Uint8Array(data);

        if (needUpdate && !busy) {
            sourceBuffer.appendBuffer(DATA);
        }

        if (!initial && paused) {
            video.play();
            paused = false;
        }

        initial = false;
    });
});

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

---

当我的视频数据混淆时，我遇到了这个问题。如果未按顺序添加webm数据，则源缓冲区将关闭，并且在下次将更多数据发送到appendbuffer时出现此错误。