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⁩.

ThecaptureStream() method of theHTMLCanvasElement interface returns aMediaStreamwhich includes aCanvasCaptureMediaStreamTrack containing a real-time video capture of the canvas's contents.

Syntax

captureStream()captureStream(frameRate)

Parameters

frameRateOptional: A double-precision floating-point value that indicates the rate of capture of eachframe. If not set, a new frame will be captured each time the canvas changes; if setto0, frames will not be captured automatically; instead, they will onlybe captured when the returned track'srequestFrame() method iscalled.

Return value

A reference to aMediaStream object, which has a singleCanvasCaptureMediaStreamTrack in it.

Exceptions

NotSupportedErrorDOMException: Thrown if the value offrameRate is negative.
SecurityErrorDOMException: 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

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