Question

我目前正在使用 MediaRecorder 录制 MediaStream 。在录制结束后在recorder.stop（）之后，它会产生 Blob ，然后我可以播放该视频。我的目标是尽量不播放整个视频，但在录制时播放一大块。目前，在录制结束时无法播放块。

我怎么能用javascript做到这一点？最终目标是通过websocket发送一个块，即使录制正在进行中也可以播放。

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

我尝试过的是

Yes

Answer 1

您必须使用RequestData来触发数据

Answer 2

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

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

脚本执行以下操作

检查支持情况
在授予/拒绝权限时创建成功和错误处理程序
询问录制权限
如果允许，请调用成功
创建记录器
为记录按钮创建一个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>

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

2 个答案: