This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The HTMLCanvasElement
.captureStream()
method returns a CanvasCaptureMediaStream
that is a real-time video capture of the surface of the canvas.
Syntax
MediaStream = canvas.captureStream(framerate);
Parameters
- framerate Optional
- A
double
that indicates the rate of capture of each frame. If not set, a new frame will be captured each time the canvas change; if set to0
, one single frame will be captured.
Return Value
A reference to a MediaStream
object.
Example
// 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 pc.addStream(stream);
Specifications
Specification | Status | Comment |
---|---|---|
Media Capture from DOM Elements The definition of 'HTMLCanvasElement.captureStream()' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | 43 (43) [1] | No support | ? | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? [1] | 43.0 (43) | No support | ? | ? |
[1] In Firefox 41 and 42, this feature was disabled by default; set the preference canvas.capturestream.enabled
to true
to activate.
See also
CanvasCaptureMediaStream
, the interface it belongs to.