Widely available Useful when a canvas is part of a media pipeline. Prefer it over manual frame copying when you need live capture behavior.

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

CanvasMediaStreamCapture

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)

Syntax

JAVASCRIPT 
<canvas id="c" width="320" height="240"></canvas>
<script>
const canvas = document.getElementById('c');
const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream);
recorder.start();
</script>

Live demo

Canvas to video stream

Capture a live canvas animation and preview it in a video element.

PreviewFullscreen

Dual stream viewers

Point two video elements at the same captured stream to mirror one canvas source.

PreviewFullscreen

Stream status board

Combine the captured stream with a status panel that explains the pipeline.

PreviewFullscreen

Use cases

  • Canvas recording

    Record whiteboards, visualizers, or game scenes without converting each frame into image blobs yourself.

  • Live streaming output

    Forward canvas output into a peer connection or media workflow when the drawing surface is the source of truth.

Cautions

  • Captured streams still depend on the canvas render loop, so dropped frames or expensive drawing work show up in the output.
  • Coordinate capture timing with animation updates if you need stable frame pacing.

Accessibility

  • Provide an accessible alternative when captured canvas content conveys essential meaning that is not available as text elsewhere.
  • If recording controls exist, make their state and purpose clear to keyboard and screen reader users.

Related links