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.
Syntax
MediaStream = canvas.captureStream(frameRate);
Parameters
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.
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 | 51.0 | 43 (43)[1] | No support | 36.0 | ? |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | No support | 51.0 | 51.0 | 43.0 (43) | No support | 38 | ? |
[1] In Firefox 41 and 42, this feature was disabled by default; set the preference canvas.capturestream.enabled
to true
to enable it.
See also
CanvasCaptureMediaStream
, the interface it belongs to.HTMLMediaElement.captureStream()
, which allows capturing a stream from a media element.MediaStream
Media Capture and Streams API