javascript - 在 MediaSource HTML5 中播放 MediaRecorder block ——视频卡住

Question

我有这个简单的代码来获取视频流 block 并在 MediaSource 中播放它们。我看到视频，但有时它会停止。它可能会工作几秒钟或几分钟。但最后它在某个时刻停止了。 chrome://media-internals/显示没有错误。

这里有什么问题吗？

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var mediaSource = new MediaSource();
var constraints = {
    "audio": true,
    "video": {
        "mandatory": {
            "minWidth": 320, "maxWidth": 320,
            "minHeight": 240, "maxHeight": 240
        }, "optional": []
    }
};
window.mediaSource = mediaSource;
var sourceBuffer;
var video = document.querySelector('#video');
window.video = video;
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function (e) {
    console.log("sourceopen");
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    window.sourceBuffer = sourceBuffer;
}, false);
mediaSource.addEventListener('error', function (e) {
    console.log("error", e)
}, false);
var stack = [];

video.play();
navigator.getUserMedia(constraints, function (stream) {
    console.log("stream", stream);
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = function (e) {
        var reader = new FileReader();
        reader.addEventListener("loadend", function () {
            var arr = new Uint8Array(reader.result);
            sourceBuffer.appendBuffer(arr);
        });
        reader.readAsArrayBuffer(e.data);
    };
    mediaRecorder.start(100);
}, function (e) {
    console.log(e)
});

这是 JSFIDDLE，它将尝试这样做: https://jsfiddle.net/stivyakovenko/fkt89cLu/6/我使用 Chrome 作为我的主要目标。

Answer 1

看起来这是 Chrome 中的一个错误...

https://bugs.chromium.org/p/chromium/issues/detail?id=606000