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

Question

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

我如何使用 javascript 做到这一点？最终目标是通过 websocket 发送一个即使正在录制也可以播放的 block 。

我无法带来新的解决方案。任何人都可以帮助我或至少向我解释这些事情吗？

我试过的是

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

Answer 1

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

您需要一个视频元素来在流式传输视频时播放视频，还需要一个录制按钮来开始录制。

脚本执行以下操作

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>