HTMLCanvasElement.captureStream

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

Syntax

MediaStream = canvas.captureStream(frameRate);

Parameters

frameRate Optional

A double-precision floating-point value that indicates the rate of capture of each frame. If not set, a new frame will be captured each time the canvas changes; if set to 0, a single frame will be captured.

Return Value

A reference to a MediaStream object.

Example

// Find the canvas element to capture
var canvasElt = document.querySelector('canvas');

// Get the stream
var 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
pc.addStream(stream);

Specifications

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

Browser compatibility

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

See also

• CanvasCaptureMediaStream, the interface it belongs to.
• HTMLMediaElement.captureStream(), which allows capturing a stream from a media element.
• MediaStream
• Media Capture and Streams API