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
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'srequestFrame()
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
// 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
BCD tables only load in the browser
See also
-
HTMLMediaElement.captureStream()
, which allows capturing a stream from a media element. MediaStream
- Media Capture and Streams API