HTMLMediaElement：captureStream() 方法

captureStream() 是 HTMLMediaElement 接口的一个方法，它返回一个 MediaStream 对象，该对象正在流式传输媒体元素中呈现的内容的实时捕获。

例如，这可以用作 WebRTC RTCPeerConnection 的源。

语法

js
captureStream()

参数

无。

返回值

一个 MediaStream 对象，可被其他媒体处理代码用作音频和/或视频数据的源，或用作 WebRTC 的源。

示例

在此示例中，建立了一个事件处理程序，以便单击按钮开始将 ID 为 "playback" 的媒体元素的内容捕获到 MediaStream 中。然后，该流可用于其他目的，例如 WebRTC 流媒体的源，以允许在视频通话期间与另一个人共享预先录制的视频。

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

有关更长且更复杂的示例和解释，请参阅 录制媒体元素。

规范

规范
来自 DOM 元素的媒体捕获
# dom-htmlmediaelement-capturestream

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

Firefox 特定说明

在 Firefox 51 之前，您无法在源本身为 MediaStream 的媒体元素（例如呈现通过 RTCPeerConnection 接收的流的 <video> 元素）上使用 captureStream()。从 Firefox 51 开始，这可以工作。这意味着您可以从视频元素捕获流并使用 MediaRecorder 来录制它。有关详细信息，请参阅 Firefox 错误 1259788。

但是，captureStream() 在 Firefox 中仍然带有 mozCaptureStream() 前缀，这是有充分理由的：当前实现中有一些值得注意的怪癖。

  • Firefox 实现目前仅在媒体元素的源本身为 MediaStream 时才能按规范描述的方式工作。
  • 如果媒体元素的源不是 MediaStream，则此方法的输出与规范不兼容，并且如果您在开始捕获后更改源，则输出捕获流将无法接受新的源数据，因为存在此不兼容性，因此不会将来自新源 MediaStream 的任何 MediaStreamTrack 添加到捕获的流中，导致输出无法捕获更新的源。
  • 将源切换回 MediaStream 会将轨道重新添加到流中，并且它将再次按预期工作。
  • 在具有 MediaStream 源的元素上调用 mozCaptureMediaStream() 会返回一个流，该流仅在元素播放 MediaStream 时包含轨道。
  • 如果在没有源媒体的媒体元素上调用 mozCaptureMediaStream()，则其兼容模式将基于添加的第一个源；例如，如果它是一个 MediaStream，则捕获流将从此之后仅适用于 MediaStream 源。
  • 一旦非 MediaStream 源支持达到规范并且方法取消前缀，此特殊行为将被移除。有关详细信息，请参阅 Firefox 错误 1259788。

另请参阅