10

我目前有一个MediaStream正在使用MediaRecorder录制。在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);
                });
4

2 回答 2

0

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

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

该脚本执行以下操作

  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>
于 2019-07-02T15:30:28.210 回答
-3

你必须使用 RequestData 来触发 ondata

于 2018-09-06T17:25:54.533 回答