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

captureStream() for <canvas>

captureStream() lets a canvas element expose its rendered frames as a MediaStream. It is useful when canvas output needs to be recorded, previewed, or forwarded to another API such as WebRTC.

CanvasMediaStreamCapture

Overview

captureStream() lets a canvas element expose its rendered frames as a MediaStream. It is useful when canvas output needs to be recorded, previewed, or forwarded to another API such as WebRTC.

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

Powered by web-features