1

我的应用程序从 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.appendBuffer(new Uint8Array(e.target.result));.
我真的无法理解这个错误的出现方式。代码真的很像这个例子的代码

4

0 回答 0