Question

我已将getUserMedia返回的流引导到html页面中的<video>元素，现在可以在该元素中看到视频。问题是，如果我从视频元素的控件暂停视频，然后在x秒后恢复，那么视频元素中显示的计时器将跳转到pauseTime + x秒。我想这是因为当我们在视频元素中暂停播放时，流不会暂停。如果是这样，我们也可以暂停流。

Answer 1

这就是Streams的问题，你不能暂停他们......

但是你能做的就是缓冲这个流，并播放你已经缓冲的内容。

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

但请注意，现在，您显然会比直接阅读流时更加延迟。

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>

而且as a fiddle因为StackSnippets不是非常友好的。

Answer 2

可以切换类似MediaStreamTrack.enabled的外观来暂时暂停视频流。

MediaStreamTrack接口上的enabled属性是一个布尔值，如果允许轨道渲染源流，则为true，否则为false。这可用于故意使轨道静音。启用后，曲目的数据将从源输出到目的地；否则，将输出空白帧。

Answer 3

// using `await`, remember to use `async function(){}` as needed, or switch to Promise().then() if desired...
const myStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
const myTracks = myStream.getTracks();
const myAudio = myTracks.filter(track => track.kind === "audio")[0];
const myVideo = myTracks.filter(track => track.kind === "video")[0];

function toggleTrackMute(track) {
  track.enabled = !track.enabled;
  console.log(`${track.enabled ? 'unmuted' : 'muted'} track.kind`);
}

toggleTrackMute(myAudio)

暂停getUserMedia返回的流

3 个答案: