HTMLCanvasElement: captureStream() method

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.

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

Syntax

js
captureStream()
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 DOMException

Thrown if the value of frameRate is negative.

SecurityError DOMException

The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.

Example

js
// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");
// Get the stream
const 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
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

Specifications

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

Browser compatibility

See also