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