暂停 getUserMedia 返回的流

Question

我已经将 getUserMedia 返回的流引导到 html 页面中的

<video>

元素，现在可以在该元素中看到视频。问题是，如果我通过视频元素的控件暂停视频，然后在 x 秒后恢复，则视频元素中显示的计时器将跳转到 pauseTime + x 秒。我想这是因为当我们暂停视频元素中的播放时，流没有暂停。如果是这样，我们也可以暂停流吗？

Answer 1

看起来 MediaStreamTrack.enabled 可以切换为暂时暂停视频流。

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

Answer 2

// 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)