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

The CanvasCaptureMediaStream.requestFrame() method forces a frame to be captured and sent to the stream. This allows to capture partially rendered frames.




// Find the canvas element to capture
var canvasElt = document.getElementsByTagName("canvas")[0];

// Get the stream
var stream = canvasElt.captureStream(25); // 25 FPS

// Send the current state of the canvas as a frame to the stream


Specification Status Comment
Media Capture from DOM Elements
The definition of 'CanvasCaptureMediaStream.requestFrame()' in that specification.
Editor's Draft Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ?411 No ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

1. From version 41: this feature is behind the canvas.capturestream.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

 Contributors to this page: fscholz, Sebastianz, tstrokes, teoli
 Last updated by: fscholz,