Question

我的应用程序从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));时出现问题我真的无法理解这个错误出现的方式。代码真的比如this example

的代码

使用MediaStream API的QuotaExceededError

0 个答案: