We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE


This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HTMLCanvasElement.captureStream() method returns a CanvasCaptureMediaStream that is a real-time video capture of the surface of the canvas.


MediaStream = canvas.captureStream(frameRate);


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, a single frame will be captured.

Return Value

A reference to a MediaStream object.


// Find the canvas element to capture
var canvasElt = document.querySelector('canvas');

// Get the stream
var 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


Specification Status Comment
Media Capture from DOM Elements
The definition of 'HTMLCanvasElement.captureStream()' in that specification.
Working Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support51 ?43 No36 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support51 Yes ?4338 ? ?

See also

Document Tags and Contributors

 Contributors to this page: fscholz, nmve, Sheppy, miguelao, jpmedley, samdutton, Sebastianz, teoli, tstrokes, gmarty
 Last updated by: fscholz,