HTMLMediaElement: captureStream() 方法

語法

captureStream()

引數

無。

返回值

一個 MediaStream 物件，可以被其他媒體處理程式碼用作音訊和/或影片資料的源，或者用作 WebRTC 的源。

示例

在此示例中，設定了一個事件處理程式，以便單擊按鈕時，可以捕獲 ID 為 "playback" 的媒體元素的內容並將其放入 MediaStream。然後，該流可用於其他目的——例如，作為 WebRTC 流的源，以允許在視訊通話期間與他人共享預錄製的影片。

document.querySelector(".playAndRecord").addEventListener("click", () => {
  const playbackElement = document.getElementById("playback");
  const captureStream = playbackElement.captureStream();
  playbackElement.play();
});

有關更長、更復雜的示例和說明，請參閱 Recording a media element。

規範

瀏覽器相容性

Firefox 特有說明

在 Firefox 51 之前，您無法在源本身就是 MediaStream 的媒體元素上使用 captureStream()（例如，呈現透過 RTCPeerConnection 接收的流的 <video> 元素）。從 Firefox 51 開始，這已經可以正常工作。這意味著您可以從影片元素捕獲流並使用 MediaRecorder 進行錄製。有關詳細資訊，請參閱 Firefox bug 1259788。

但是，出於某種原因，captureStream() 在 Firefox 中仍然是帶有字首的 mozCaptureStream()：當前實現的某些怪癖值得注意。

• Firefox 實現當前僅在媒體元素的源本身是 MediaStream 時，才能按規範所述工作。
• 如果媒體元素的源不是 MediaStream，則此方法的輸出與規範不相容。如果您在開始捕獲後更改源，由於不相容，輸出捕獲流無法接受新的源資料。因此，來自新源 MediaStream 的 MediaStreamTrack 不會新增到捕獲的流中，導致輸出無法捕獲更新後的源。
• 將源切換回 MediaStream 會將軌道重新添加回流中，並且可以再次按預期工作。
• 在具有 MediaStream 源的元素上呼叫 mozCaptureMediaStream() 會返回一個流，該流僅在元素播放 MediaStream 時包含軌道。
• 如果您在沒有源媒體的媒體元素上呼叫 mozCaptureMediaStream()，其相容模式將基於新增的第一個源；例如，如果它是 MediaStream，則從那時起，捕獲流將僅與 MediaStream 源一起工作。
• 一旦非 MediaStream 源支援符合規範且方法取消了字首，這種特殊行為將被移除。有關詳細資訊，請參閱 Firefox bug 1259788。

另見

• Recording a media element
• MediaStream Recording API
• HTMLCanvasElement.captureStream()
• MediaStream
• WebRTC API