CanvasCaptureMediaStreamTrack: requestFrame() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The requestFrame() method of the CanvasCaptureMediaStreamTrack interface 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
requestFrame()
Parameters
None.
Return value
None (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
const canvasElt = document.querySelector("canvas");
// Get the stream
const 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 |
|---|
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-requestframe |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
requestFrame
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
See also
CanvasCaptureMediaStreamTrack, the interface it belongs to.<canvas>