HTMLCanvasElement.captureStream()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

该 HTMLCanvasElement.captureStream() 方法返回的 CanvasCaptureMediaStream 是一个实时视频捕获的画布。

语法

MediaStream = canvas.captureStream(frameRate);

参数

frameRate 可选

设置双精准度浮点值为每个帧的捕获速率。如果未设置，则每次画布更改时都会捕获一个新帧。如果设置为0，则会捕获单个帧。

返回值

对一个 MediaStream 对象的引用。

例子

js
//获取所需要截取媒体流的 canvas element
var canvasElt = document.querySelector("canvas");

//截取到媒体流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用 RTCPeerConnection 来传输给其他的电脑
// 下面的 pc 是其他地方创建的一个 RTCPeerConnection
pc.addStream(stream);

规范

Specification
Media Capture from DOM Elements
# dom-htmlcanvaselement-capturestream

浏览器兼容性

看看其他