Baseline Widely available
The captureStream() method of the HTMLCanvasElement interface returns a MediaStream which includes a CanvasCaptureMediaStreamTrack containing a real-time video capture of the canvas's contents.
captureStream()
captureStream(frameRate)
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, frames will not be captured automatically; instead, they will only be captured when the returned track's requestFrame() method is called.
A reference to a MediaStream object, which has a single CanvasCaptureMediaStreamTrack in it.
NotSupportedError DOMException
Thrown if the value of frameRate is negative.
SecurityError DOMException
The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.
// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");
// Get the stream
const 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
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4