Блог

Главная - Вопросы по программированию - MediaRecorder: как остановить запись видео и воспроизведение в том же видеоэлементе?

MediaRecorder: как остановить запись видео и воспроизведение в том же видеоэлементе?

#mediarecorder

#mediarecorder

Вопрос:

Я использую с MediaRecorder

         function getUserMediaSuccess(stream) {
            $videoElement[0].srcObject = stream;
            $videoElement[0].autoplay = true;
            $videoElement[0].muted = true;
            $videoElement[0].controls = false;
            mediaRecorder = new MediaRecorder(stream, settings.recorderOptions);
        }

Как только запись будет завершена, я хочу воспроизвести записанные фрагменты.

Я попытался с:

         const blob = new Blob(chunks, { 'type' : settings.recorderOptions.mimeType});
        $videoElement[0].src = window.URL.createObjectURL(blob);

а также с

 $videoElement[0].pause();
$videoElement[0].removeAttribute('src');
$videoElement[0].load();
$videoElement[0].src = settings.filename;
$videoElement[0].controls = true;

Я не могу остановить видеоэлемент показа веб-камеры в реальном времени.

Я могу воспроизвести записанное видео в ДРУГОМ видеоэлементе. Но я хочу использовать ТО ЖЕ САМОЕ, что используется для отображения веб-камеры.

Я также пробовал:

             localStream.getTracks().forEach(function(track) {
                track.stop();
            });

Что дает черный экран, но затем я не могу снова воспроизвести записанное видео.

Комментарии:

1. пожалуйста, попробуйте привести пример в виде jsfiddle или здесь в качестве встроенного примера — так проще воспроизвести ваше поведение. вы пробовали с примером на developer.mozilla.org/en-US/docs/Web/API/MediaRecorder#example

2. Установите значение srcObject null после остановки записи: $videoElement[0].srcObject = null;

Ответ №1:

я думаю, что вы сделали большинство вещей правильно.

основываясь на примере Mozilla MediaRecorder и некоторых других исследованиях, я думаю, что волшебство заключается в переключении между использованием srcObject и src :

  • srcObject для MediaStream (getUserMedia live preview)
  • src с window.URL.createObjectURL

этот фрагмент работает (при запуске на локальном хосте или по протоколу https — (возможно, встраивание не полностью заполняет все параметры безопасности, чтобы разрешить доступ к getUserMedia ..)

 const videoEl = document.getElementById('theVideoElement');
let mediaRecorder = null;
let mediaChunks = [];

function recordStart() {
    console.log('recordStart..');
    if (navigator.mediaDevices amp;amp; navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia (
            {
                audio: true,
                video: true,
            }
        )
        .then( stream => {
            videoEl.srcObject = stream;
            mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.addEventListener('dataavailable', event => {
                mediaChunks.push(event.data);
            });

            mediaRecorder.addEventListener('stop', event => {
                console.log("recorder stopped");
                const blob = new Blob(mediaChunks, { 'type' : 'video/webm' });
                mediaBlobURL = window.URL.createObjectURL(blob);
                mediaChunks = [];
                videoEl.src = mediaBlobURL;
            });

            mediaRecorder.start();
            console.log("recorder started", mediaRecorder.state);

            window.setTimeout(event => {
                console.log("time is over.");
                mediaRecorder.stop();
                console.log(mediaRecorder.state);
                console.log("recorder stopped");
                // stop getUserMedia stream - this way the cam and mic gets released.
                for (const track of stream.getTracks()) {
                    track.stop();
                }
                videoEl.srcObject = null;
                console.log("stream stopped.");
            }, 3000);
        })
        .catch( err => {
            console.error(`The following getUserMedia error occurred:n ${err}`);
        });
    } else {
        console.error('getUserMedia not supported on your browser!');
    }
}


console.info('******************************************');
window.addEventListener('load', (event) => {
    console.info('All resources finished loading.');
    const buttonEl = document.getElementById('button_start');
     buttonEl.addEventListener('click', (event) => {
        console.info('click!');
        recordStart();
    });
}); 
 button {
  display: block;
}

video {
  display: block;
  border: solid 1px black;
} 
 <button id="button_start"> 
  start 
</button>

<video
    id="theVideoElement"
    autoplay
    controls
>
</video>