Javascript 未能执行'；追加缓冲区'；在'；SourceBuffer'；：此SourceBuffer已从父媒体源中删除

我的目标是在视频元素中连续渲染视频blob

e.data

，例如连续播放

下面的代码抛出：

DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

此代码中可能有什么错误

    var options = {mimeType: 'video/webm'};
    var mediaRecorder = new MediaRecorder(stream, options);
    var player = document.querySelector("#player");

    var mediaSource = new MediaSource();
    player.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen, {once: true})

    function sourceOpen() {
        //URL.revokeObjectURL(player.src);
        var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
        mediaRecorder.ondataavailable = function(e) {
            console.log("Data available")
            if (e.data.size > 0) {
                var bufferPromise = e.data.arrayBuffer();
                bufferPromise.then(function(array){
                    sourceBuffer.appendBuffer(array);
                })
            }
        }
    }

更新：这通过

sourceBuffer.appendBuffer（新的Uint8Array（array））解决

但是Chrome仍然无法使用该代码，它只适用于Firefox