MediaRecorder-如何在录制时播放视频块/视频? [英] MediaRecorder - How to play chunk/blob of video while recording?

问题描述

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

I currently have a MediaStream which is being recorded using MediaRecorder. At the end of the recording after recorder.stop(), it produce a Blob and I am able to play that video back. My goal is to play not the entire video at the end, but play a chunk while recording. For the moment, a chunk is not playable while recording is not ended.

我该如何使用javascript做到这一点?最终目标是通过websocket发送一个即使在录制过程中仍可播放的块.

How can i do that using javascript? The final objective is to send a chunk by websocket that is playable even if recording is in action.

我无法提出新的解决方案.任何人都可以帮忙或者至少向我解释一下这些事情吗?

I am not able to bring new solutions. Can anyone help or at least explain me the things ?

我尝试过的是

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

推荐答案

这是我能想到的最简单的示例.

This is the simplest example I could come up with.

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

You need a video element for playing the video as you stream it, and a record button to kick off the recording.

脚本执行以下操作

1. 检查支持情况
2. 在授予/拒绝权限时创建成功和错误处理程序
3. 询问录制权限
4. 如果允许，请调用onSuccess
5. 创建记录器
6. 为记录按钮创建一个onclick处理程序
7. 如果单击记录，则将调用onclick处理程序
8. mediaRecorder开始记录
9. 视频元素设置为使用流
10. 视频元素设置为自动播放，因此视频流立即显示

1. Checks for support
2. Creates success and error handlers for when permission is granted / denied
3. Ask permission to record
4. If permitted, calls onSuccess
5. Creates the recorder
6. Creates an onclick handler for the record button
7. If record is clicked, the onclick handler is called
8. The mediaRecorder starts recording
9. The video element is set to use the stream
10. The video element is set to autoplay so the stream shows immediately

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-如何在录制时播放视频块/视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！