Правильный способ использования MediaRecorder с аргументом среза времени, указанным с помощью start

После прочтения этой страницы https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.start , я написал свой собственный код:

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var vendorURL = window.URL || window.webkitURL;
    _video = document.querySelector('#recordingCamera');
    _video.src = vendorURL.createObjectURL(stream);
    _video.play();

    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var replay = document.querySelector('#replay');
        replay.src = window.URL.createObjectURL(e.data);
        replay.play();
    }
}, function(error){

});

Я ожидаю, что через 3 секунды после того, как элемент #recordingCamera отобразит содержимое с моей камеры, я увижу повтор содержимого в элементе #replay.
Но элемент #replay воспроизводится только первые 3 секунды. . После этого элемент #recordingCamera по-прежнему отображает содержимое камеры, но больше ничего для элемента #replay.
При проверке консоли я обнаружил следующие сообщения:

Media resource blob:http://localhost:8081/634f6237-17a9-475d-89bb-2c6ca0b48eb6 could not be decoded.
Media resource blob:http://localhost:8081/d0b95463-f9bc-4b0f-bd0d-40ae3152181f could not be decoded.
Media resource blob:http://localhost:8081/535ab990-0ee2-4ec0-adac-2d5d6917f6f3 could not be decoded.

доступные данные по-прежнему срабатывают, но с данными что-то не так.

Мой вопрос:

  • Является ли это ошибкой Firefox?
  • Если нет, то как правильно использовать MediaRecorder с аргументом среза времени, указанным с помощью start?

javascript webrtc mediastream getusermedia web-mediarecorder
person nvcnvn    schedule 05.01.2015    source источник
comment
Отвечает ли это на ваш вопрос? Запись 5-секундных сегментов аудио с помощью MediaRecorder, а затем загрузить на сервер   -  person Kaiido    schedule 11.02.2021

Ответы (2)


arrow_upward
2
arrow_downward

Хорошо, я нашел решение, которое MediaSource API

var mediaSource = new MediaSource();
var replay = document.querySelector('#replay');
replay.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
    console.log('sourceopen')
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
});

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            sourceBuffer.appendBuffer(fileReader.result);
        };
        fileReader.readAsArrayBuffer(e.data);
    }
}, function(error){});

Обратите внимание, что в Firefox вам необходимо установить для флага enable-media-source значение true.

person nvcnvn    schedule 07.01.2015
comment
У вас есть полный рабочий пример? Я изменил пример MediaRecorder WebRTC для использования MediaSource в соответствии с вашим кодом выше, но он не работает. В firefox addSourceBuffer выдает ошибку, операция не поддерживается (поскольку медиа-источники WebM не поддерживаются по умолчанию). В хроме он просто отображает один кадр видео. - person CpnCrunch; 09.03.2016
comment
Это похоже на ошибку в хроме. Работает время от времени и нестабильно. Вот мой вопрос: stackoverflow.com/questions/37667075/ - person Stepan Yakovenko; 09.06.2016

arrow_upward
0
arrow_downward

Похоже, это ошибка в Firefox. Если вы вызовете mediaRecorder.start с меньшим временным интервалом, большой двоичный объект будет нормально воспроизводиться без использования MediaSource. Обратите внимание, что MediaSource был недоступен до Firefox 42, поэтому вы не можете полагаться на его доступность.

mediaRecorder.start(1000);

person d2vid    schedule 20.01.2016