MediaRecorder - Как воспроизвести фрагмент видео во время записи?

В настоящее время у меня есть MediaStream, который записывается с помощью MediaRecorder. В конце записи после recorder.stop() создается большой двоичный объект, и я могу воспроизвести это видео. Моя цель — воспроизвести не все видео в конце, а воспроизвести фрагмент во время записи. На данный момент фрагмент не воспроизводится, пока запись не завершена.

Как я могу сделать это с помощью javascript? Конечная цель — отправить фрагмент по веб-сокету, который можно воспроизвести, даже если запись находится в действии.

Я не могу предложить новые решения. Может ли кто-нибудь помочь или хотя бы объяснить мне вещи?

То, что я пробовал, было

                navigator.mediaDevices.getUserMedia().then(function(media_stream) {
                    var recorder = new MediaRecorder(media_stream);

                    recorder.ondataavailable = event => {
                        //How to play each chunk without waiting for recorder.stop() ???
                        //event.data represent the data of a chunk (i.e. a blob)
                    };

                    recorder.start(1000);
                });

blob video mediastream chunks mediarecorder
person Bernard    schedule 08.10.2017    source источник
comment
Можно отправить эти фрагменты в процесс nodejs с помощью ffmpeg и повторно передать их в браузер. Вам понадобится транскодирование   -  person Keyne Viana    schedule 27.02.2018
comment
Спасибо за этот ответ. К сожалению, я не знаю о ffmpeg. Более того, я хочу остаться только на javascript (у меня нет уровня...). Обидно ждать окончания записи, чтобы иметь возможность воспроизвести что-то уже записанное. Я действительно не знаю, как играть фрагмент во время записи.   -  person Bernard    schedule 06.03.2018
comment
Вы решили свою проблему? У меня есть такой же...   -  person EvgenyNaumov    schedule 30.04.2020

Ответы (2)


arrow_upward
0
arrow_downward

Это самый простой пример, который я смог придумать.

Вам нужен элемент видео для воспроизведения видео во время его потоковой передачи и кнопка записи, чтобы начать запись.

Скрипт делает следующее

  1. Проверки на поддержку
  2. Создает обработчики успеха и ошибок, когда разрешение предоставлено/отказано
  3. Спросите разрешения на запись
  4. Если разрешено, вызывает onSuccess
  5. Создает рекордер
  6. Создает обработчик onclick для кнопки записи
  7. Если запись нажата, вызывается обработчик onclick
  8. MediaRecorder начинает запись
  9. Элемент видео настроен на использование потока
  10. Элемент видео настроен на автоматическое воспроизведение, поэтому поток отображается немедленно.

HTML

<video id="player"></video>
<button class="record">Record</button>

JS

<script>
  const video = document.querySelector('#player');
  const record = document.querySelector('.record');

  (function start() {
    // 1. check for support
    if (! navigator.mediaDevices.getUserMedia) {
      return console.log('getUserMedia not supported on your browser!');
    }

    // 2. create onSuccess handler
    // 4. called if permitted
    const onSuccess = function (stream) {
      // 5. create the recorder
      const mediaRecorder = new MediaRecorder(stream);

      // 6. create onclick handler for record button
      // 7. called if record is clicked
      record.onclick = function() {
        // 8. starts recording
        mediaRecorder.start();
        // 9. sets video element to use the stream
        video.srcObject = stream;
        // 10. sets the video element to autoplay, otherwise user would have to click play
        video.autoplay = true;
      };
    };

    // 2. create onError handler
    const onError = function (error) {
      console.error('The following error occured: ' + error);
    };

    // 3. ask permission to record audio and video
    const constraints = {video: true, audio: true};
    navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
  })();
</script>
person Merlin -they-them-    schedule 02.07.2019

arrow_upward
-3
arrow_downward

вы должны использовать RequestData для доступных данных для запуска

person TripleG    schedule 06.09.2018
comment
в противном случае он срабатывает только в конце или остановке - person TripleG; 06.09.2018
comment
Пожалуйста, объясните, как использовать RequestData в своем ответе. - person Merlin -they-them-; 02.07.2019