2016-06-06 1 views
4

У меня есть этот простой код, чтобы получить куски видеопотока и воспроизводить их в MediaSource. Я вижу видео, но иногда он останавливается. Он может работать в течение нескольких секунд или в течение нескольких минут. Но, наконец, в какой-то момент он останавливается. chrome: // media-internals/не показывает ошибок.Слушать фрагменты MediaRecorder в MediaSource HTML5 - видео заморожено

Что здесь не так?

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 в качестве основной цели.

+0

Ваш пример работает в моем браузере UserAgent: "Mozilla/5.0 (Windows NT 10,0; WOW64) AppleWebKit/537.36 (KHTML, как Gecko) Chrome/50.0.2661.102 Safari/537.36" – Steve

+0

его просто вопрос времени. Если вы подождете достаточно (1-2 минуты, он замерзнет). Мой хром точно такой же. –

+0

Я оставил его на 15+ минут, это было прекрасно, также я заметил, что когда у меня есть ваш запуск, и я запускаю свой код, мой код также работает [ссылка] (http://stackoverflow.com/questions/37665469/ mediasource-randomly-stops-video? noredirect = 1 # comment62899304_37665469), но когда я закрою твою, он замораживает – Steve

ответ

4

Похоже, это ошибка в Chrome ...

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

+0

Кажется, теперь исправлено (я репортер ошибки). – CpnCrunch

+0

ну, мой jsfiddle все еще не работает –

+0

Измените addSourceBuffer на использование «opus, vp9», поскольку это, скорее всего, то, что использует хром (вы можете указать его при настройке MediaRecorder). – CpnCrunch

0

Я пытаюсь сделать это, как хорошо, но я не получаю никакого видео вообще. Ваш jsfiddle не работает для меня на chrome или firefox (проверен на ubuntu 14.04 и Windows 7).

После небольшого исследования (в основном, потокового воспроизведения файла после его записи), я обнаружил, что файл неправильно фрагментирован для воспроизведения MSE. @Steve: Мне было бы интересно узнать, как вы сделали фрагментацию с помощью ffmpeg.

В качестве побочного элемента у меня также есть аналогичный вопрос: Display getUserMediaStream live video with media stream extensions (MSE), с описанием ошибки от chrome: // media-internals.

+0

Vasile, если jsfiddle doen't work, может быть, вам следует сообщить об этом как об ошибке для разработчиков Chrome? –

+0

Ну, тот факт, что он не работает в firefox, заставляет меня думать, что, возможно, это не ошибка. Я рассмотрю спецификацию mse и посмотрю, что я могу придумать. –

+0

@ Vasilie, команда chrome приняла это как ошибку, см. Другой ответ. –