暫停 getUserMedia 返回的流

Question

我已將 getUserMedia 返回的流引導到 html 頁面中的<video>元素，現在可以在該元素中看到視頻。 問題是，如果我從視頻元素的控件中暫停視頻，然后在 x 秒后恢復，那么視頻元素中顯示的計時器將跳轉到 pauseTime + x 秒。 我想這是因為當我們在視頻元素中暫停播放時，流沒有暫停。 如果是這樣，我們也可以暫停流。

Answer 1

看起來MediaStreamTrack.enabled可以切換來暫時暫停視頻流。

MediaStreamTrack 接口上的 enabled 屬性是一個布爾值，如果允許軌道呈現源流，則為 true，否則為 false。 這可用於有意將軌道靜音。 啟用時，曲目的數據從源輸出到目的地； 否則，輸出空幀。

Answer 2

免責聲明

這個答案回答了另一個問題......當時我誤解了 OP 的問題，並假設他們想要“暫停”流，以便稍后能夠在同一時間點恢復它。
那里所有出現的“暫停”都假設了這個定義，並且與 OP 願意停止流提供 MediaElement 的 currentTime 沒有太大關系。 對於這種情況，請參閱其他答案。 （我不能自己刪除這個，因為它目前已被接受）

---

這就是 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>

作為一個小提琴，因為 StackSnippets 不是很友好。

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)