Widely available Supported across all major browsers. Safe to use in production.

captureStream() for <canvas>

The CanvasCaptureMediaStreamTrack interface of the Media Capture and Streams API represents the video track contained in a MediaStream being generated from a <canvas> following a call to HTMLCanvasElement.captureStream().

EventTarget MediaStreamTrack CanvasCaptureMediaStreamTrack

Canvas and Graphics

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CanvasCaptureMediaStreamTrack
51
79
11
51
11
canvas

The canvas read-only property of the CanvasCaptureMediaStreamTrack interface returns the HTMLCanvasElement from which frames are being captured.
51
79
11
51
11
requestFrame

The requestFrame() method of the CanvasCaptureMediaStreamTrack interface requests that a frame be captured from the canvas and sent to the stream.
51
79
11
51
11
captureStream

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.
51
79
43
11
51
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Use cases

  • Using captureStream() for <canvas>

    The CanvasCaptureMediaStreamTrack interface of the Media Capture and Streams API represents the video track contained in a MediaStream being generated from a <canvas> following a call to HTMLCanvasElement.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links