MediaRecorder - 如何在录制时播放视频块/块？

Posted 2023-02-16

【中文标题】MediaRecorder - 如何在录制时播放视频块/块？

【英文标题】：MediaRecorder - How to play chunk/blob of video while recording?

【发布时间】：2018-03-19 12:52:44

【问题描述】：

我目前有一个使用 MediaRecorder 录制的 MediaStream。在录制结束时在 recorder.stop() 之后，它会产生一个 Blob，我可以播放该视频。我的目标不是在最后播放整个视频，而是在录制时播放一段。目前，在录制未结束时无法播放块。

我怎样才能使用 javascript 做到这一点？最终目标是通过 websocket 发送一个可播放的块，即使正在录制。

我无法带来新的解决方案。任何人都可以帮助或至少解释一下吗？

我试过的是

                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);
                );

【问题讨论】：

可以使用 ffmpeg 将这些块发送到 nodejs 进程并将其重新流式传输到浏览器。你需要一些转码

感谢您的回答。不幸的是，我不知道 ffmpeg。此外，我只想留在 javascript 上（我没有级别......）。不得不等到录制结束才能播放已经录制的内容，这是一种耻辱。我真的不知道如何在录制时播放块。

您的问题解决了吗？我有同样的...

【参考方案1】：

这是我能想到的最简单的例子。

您需要一个用于在流式传输视频时播放视频的视频元素，以及一个用于开始录制的录制按钮。

脚本执行以下操作

检查支持 在授予/拒绝权限时创建成功和错误处理程序 请求录音权限 如果允许，调用 onSuccess 创建记录器 为录制按钮创建一个 onclick 处理程序 如果单击记录，则调用 onclick 处理程序 mediaRecorder 开始录制 视频元素设置为使用流 视频元素设置为自动播放，因此流会立即显示

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>

【参考方案2】：

您必须使用 RequestData 才能触发 ondata

【讨论】：

否则它只会在结束或停止时触发

请说明如何在您的回答中使用 RequestData