HTMLCanvasElement.captureStream()

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

语法

MediaStream = canvas.captureStream(frameRate);

参数

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

返回值

对一个 MediaStream 对象的引用.

例子

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

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

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

产品规格

Specification Status Comment
Media Capture from DOM Elements
HTMLCanvasElement.captureStream()
Working Draft Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 51.0 43 (43)[1] 未实现 36.0 ?
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 51.0 51.0 43.0 (43) 未实现 38 ?

[1] 在Firefox 41和42中,此功能默认是禁用的; 将首选项 canvas.capturestream.enabled 设置 true 。

看看其他