HTMLCanvasElement.captureStream()

The HTMLCanvasElement captureStream() method returns a MediaStream which includes a CanvasCaptureMediaStreamTrack containing a real-time video capture of the canvas's contents.

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, frames will not be captured automatically; instead, they will only be captured when the returned track's requestFrame() method is called.

Return value

A reference to a MediaStream object, which has a single CanvasCaptureMediaStreamTrack in it.

Exceptions

NotSupportedError
The value of frameRate is negative.

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.
Working Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also