Web/API/CanvasCaptureMediaStreamTrack/requestFrame

The CanvasCaptureMediaStreamTrack method requestFrame() requests that a frame be captured from the canvas and sent to the stream. Applications that need to carefully control the timing of rendering and frame capture can use requestFrame() to directly specify when it's time to capture a frame.

To prevent automatic capture of frames, so that frames are only captured when requestFrame() is called, specify a value of 0 for the captureStream() method when creating the stream.

Syntax

stream.requestFrame();

Return value

undefined

Usage notes

There is currently an issue flagged in the specification pointing out that at this time, no exceptions are being thrown if the canvas isn't origin-clean. This may change in the future, so it would be wise to plan ahead and watch for exceptions such as SecurityError (although the specific error that might be thrown is not mentioned in the spec, this is a likely candidate).

Example

// 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
stream.getVideoTracks()[0].requestFrame();

Specifications

Specification	Status	Comment
Media Capture from DOM ElementsThe definition of 'CanvasCaptureMediaStream.requestFrame()' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`requestFrame` Experimental'	Chrome Full support 51	Edge Full support ≤79	Firefox Full support 41 Disabled' Full support 41 Disabled' Disabled' 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.	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 5.0

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.': User must explicitly enable this feature.