HTMLCanvasElement: captureStream() 方法

captureStream() 方法是 HTMLCanvasElement 接口的方法，它返回一个 MediaStream，其中包含一个 CanvasCaptureMediaStreamTrack，该 track 包含画布内容的实时视频捕获。

语法

js
captureStream()
captureStream(frameRate)

参数

frameRate 可选

一个双精度浮点数，表示每帧的捕获率。如果未设置，则每次画布发生变化时都会捕获新帧；如果设置为 0，则不会自动捕获帧；相反，只有在返回 track 的 requestFrame() 方法被调用时才会捕获帧。

返回值

一个 MediaStream 对象的引用，其中包含一个 CanvasCaptureMediaStreamTrack。

异常

NotSupportedError DOMException

如果 frameRate 的值为负数，则抛出此异常。

SecurityError DOMException

画布的位图不是源代码干净的；至少部分内容已从与加载文档本身的站点不同的站点加载，或可能已从该站点加载。

示例

js
// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");

// Get the stream
const stream = canvasElt.captureStream(25); // 25 FPS

// Do things to the stream
// E.g. Send it to another computer using an RTCPeerConnection
//      pc is an RTCPeerConnection created elsewhere
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

规范

规范
从 DOM 元素捕获媒体
# dom-htmlcanvaselement-capturestream

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅