HTMLCanvasElement.captureStream()

by 3 contributors:

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

The HTMLCanvasElement.captureStream() method returns a CanvasCaptureMediaStream that is a real-time video capture of the surface of the canvas.

Syntax

stream = canvas.captureStream(framerate);

Arguments

framerate Optional is a double that indicates the rate of capture of each frame. If not set, a new frame will be captured each time the canvas change; if set to 0, one single frame will be captured.

Example

// Find the canvas element to capture
var canvasElt = document.getElementsByTagName("canvas")[0];

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

// Do things to the stream
// E.g. Sent it to another computer using a RTCPeerConnection
//      pc is a RTCPeerConnection created elsewhere
pc.addStream(stream);

Specifications

Specification	Status	Comment
Media Capture from DOM Elements The definition of 'HTMLCanvasElement.captureStream()' in that specification.	Editor's Draft	Initial specification.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	43 (43) [1]	Not supported	?	?

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	? [1]	43.0 (43)	Not supported	?	?

[1] In Firefox 41 and 42, this feature was disabled by default; set the preference canvas.capturestream.enabled to true to activate.

HTMLCanvasElement.captureStream()

Syntax

Arguments

Example

Specifications

Browser compatibility

See also

Document Tags and Contributors