MediaRecorder - 如何在录制过程中播放视频的块/ blob？

Question

我目前有一个使用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);
                });

- Bernard

---

可以使用FFmpeg将这些块发送到Node.js进程，并将其重新流式传输到浏览器。您需要进行一些转码。 - Keyne Viana

谢谢你的回答。不幸的是，我不了解ffmpeg。此外，我想只使用JavaScript（我没有那个水平...）。必须等到录制结束才能播放已经录制的内容，这真是太遗憾了。我真的不知道如何在录制时播放一个块。 - Bernard

你解决了你的问题吗？我也有同样的问题... - Evgeny Naumov

Answer 1

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

您需要一个视频元素来播放流式传输的视频，以及一个记录按钮来启动录制。

脚本执行以下操作

1. 检查支持情况
2. 创建成功和错误处理程序，用于授予权限/拒绝
3. 请求录制权限
4. 如果允许，则调用onSuccess
5. 创建记录器
6. 为记录按钮创建onclick处理程序
7. 如果单击记录，则调用onclick处理程序
8. 媒体记录器开始录制
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>

- Merlin -they-them-

Answer 2

你必须使用RequestData来触发ondataavailable事件

- TripleG

---

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

请在您的回答中解释如何使用RequestData。 - Merlin -they-them-