在MediaSource HTML5中播放MediaRecorder块 - 冻结视频 [英] Play MediaRecorder chunks in MediaSource HTML5 -- video frozen

问题描述

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

I have this simple code to get chunks of video stream and play them in MediaSource. I see video, but sometimes it stops. It may work for few seconds or for few minutes. But finally it stops at some moment. chrome://media-internals/ shows no errors.

这里有什么问题？

    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作为主要功能目标。

Here is JSFIDDLE which is going to try to do it: https://jsfiddle.net/stivyakovenko/fkt89cLu/6/ I am using Chrome as my main target.

推荐答案

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

Looks like this is a bug in Chrome...

https://bugs.chromium.org/p/chromium/问题/细节？id = 606000

这篇关于在MediaSource HTML5中播放MediaRecorder块 - 冻结视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！