Play MediaRecorder-Blöcke in MediaSource HTML5 - Video eingefroren
Ich habe diesen einfachen Code, um Videostreams zu erhalten und sie in MediaSource abzuspielen. Ich sehe ein Video, aber manchmal hört es auf. Es kann einige Sekunden oder einige Minuten dauern. Aber irgendwann hört es endlich auf. chrome: // media-internals / zeigt keine fehler.
Was ist hier falsch
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)
});
Hier ist JSFIDDLE, das versuchen wird, es zu tun:https: //jsfiddle.net/stivyakovenko/fkt89cLu/6 Ich verwende Chrome als Hauptziel.