Javascript 使用MediaStream API的QuoteExceedeError

我的应用程序从ServerSentEvent SSE接收一些视频块，并使用MediaStream API将它们附加到缓冲区中，并将它们可视化到HTML5视频标记中。 问题是MediaSource API，当程序试图将块附加到mediaStream缓冲区时，它会停止工作

当程序尝试附加第一个块时，会出现错误

这是客户端代码：

window.MediaSource = window.MediaSource || window.WebKitMediaSource;
window.URL = window.URL || window.webkitURL;
if (!!!window.MediaSource) {alert('MediaSource API is not available');}

var video = document.getElementById("video");
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function(e) {
    var source = new EventSource('http://localhost:5000/video');
    // this is the line that catch the error
    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

    source.addEventListener('chunkStreamed', function(e){
        var chunk = new Blob(JSON.parse(e.data));
        console.log("chunk: ", chunk);
        var reader = new FileReader();
        reader.onload = function(e) {
            // error is caused by this line
            sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
        };
        reader.readAsArrayBuffer(chunk);
    });

    source.addEventListener('endStreaming', function(e){
        console.log(e.data);
        // mediaSource.endOfStream();
        // endOfStream() not here, sourceBuffer.appendBuffer will done after this command and will cause InvalidStateError 
    });

    source.onopen = function(e) {
        console.log("EventSource open");
    };

    source.onerror = function(e) {
        console.log("error", e);
        source.close();
    };

}, false);

这是完整的错误日志：

Uncaught QuotaExceededError: An attempt was made to add something to storage that exceeded the quota.

当应用程序尝试执行sourceBuffer.appendBuffernew Uint8Arraye.target.result；时，问题就出现了；。 我真的不明白这个错误是怎么出现的。代码确实是

---

就像

的代码一样，MediaSource目前处于一个奇怪的位置。这很微妙，但是你链接到的示例在当前版本的chrome和firefox中似乎被破坏了，应该是6秒长。我一直在尝试跟踪mediasource的实现，但我不知道有任何一个例子可以100%的工作到这篇文章。哦，我的上帝！！！我没看到那个视频有6秒长无论如何，它可以附加视频，但我不…我需要一个原型程序的这个功能，如果它不完美，也可以；有什么想法可以解释为什么会出现“超出范围的错误”吗。我不知道是什么原因造成的。我喜欢使用EventSource的想法，但它不适合承载二进制负载。最好使用响应类型为'arraybuffer'的WebSocket或XMLHttpRequest