captureStream() for <canvas>Baseline · Widely available
The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.
Browser support
DesktopChrome
1–50Not supported
51+Supportedsince May 25, 2016
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–42Not supported
43+Supportedsince Dec 15, 2015
Current: 157Safari
1–10.1Not supported
11+Supportedsince Sep 19, 2017
Current: 27MobileChrome Android
18–50Not supported
51+Supportedsince Jun 8, 2016
Current: 155Firefox Android
4–42Not supported
43+Supportedsince Dec 15, 2015
Current: 157Safari iOS
1–10.3Not supported
11+Supportedsince Sep 19, 2017
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: CanvasCaptureMediaStreamTrack.
Feature detection
JS · check before using
if ("CanvasCaptureMediaStreamTrack" in globalThis) {
// CanvasCaptureMediaStreamTrack is available
} else {
// load a polyfill or use a fallback
}Documentation (MDN)
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| CanvasCaptureMediaStreamTrack | 51 | 79 | ✕ | 11 | 51 | ✕ | 11 |
| CanvasCaptureMediaStreamTrack.canvas | 51 | 79 | ✕ | 11 | 51 | ✕ | 11 |
| CanvasCaptureMediaStreamTrack.requestFrame | 51 | 79 | ✕ | 11 | 51 | ✕ | 11 |
| HTMLCanvasElement.captureStream | 51 | 79 | 43 | 11 | 51 | 43 | 11 |