暂停getUserMedia返回的流 [英] Pause the stream returned by getUserMedia

问题描述

我已经将getUserMedia返回的流引导到html页面中的<video>元素，现在可以在该元素中看到视频了.问题是，如果我从video元素的控件中暂停视频，然后在x秒后恢复播放，则显示在video元素中的计时器将跳到pauseTime + x seconds.我猜这是因为当我们暂停视频元素中的播放时，流没有被暂停.如果是这样，我们也可以暂停视频流.

I have channelled the stream returned by getUserMedia to <video> element in html page, video now can be seen in that element. The problem is that if I pause the video from the controls of video element, and then resume after x seconds, then the timer being shown in video element will jump to pauseTime + x seconds. I guess this is because the stream is not getting paused as we pause the playback in video element. If so can we pause the stream too.

推荐答案

Streams就是这样，您不能暂停它们...

That is the very thing of Streams, you can't pause them...

但是，您可以做的是缓冲此流，然后播放您缓冲过的内容.

But what you can do however, is to buffer this stream, and play what you've bufferred.

要通过MediaStream实现此目的，您可以使用 MediaRecorder API，以及 MediaSource API .

To achieve this with a MediaStream, you can make use of the MediaRecorder API, along with the MediaSource API.

但是请注意，与直接阅读流相比，现在显然会得到更多的延迟.

But note that now, you'll obviously get more delay than when you were reading the stream directly.

navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(stream => {
    const mediaSource = new MediaSource();
    let data, sourceBuffer;
    vid.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);

    const recorder = new MediaRecorder(stream, {
      mimeType: 'video/webm; codecs="vp8"'
    });
    const chunks = [];
    recorder.ondataavailable = e => push(e.data);

    function push(data) {
      if (mediaSource.readyState !== "open") return;
      let fr = new FileReader();
      fr.onload = e => sourceBuffer.appendBuffer(fr.result);
      fr.readAsArrayBuffer(new Blob([data]));
    }

    function sourceOpen(_) {
      recorder.start(50);
      sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
      vid.play();
    }

  });

<video id="vid" controls></video>

作为小提琴，因为StackSnippets对口香糖的友好程度不是很高.

And as a fiddle since StackSnippets are not very gUM friendly.

这篇关于暂停getUserMedia返回的流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！