HTMLCanvasElement: captureStream() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die captureStream() Methode des HTMLCanvasElement Interfaces gibt einen MediaStream zurück, der einen CanvasCaptureMediaStreamTrack enthält, der eine Echtzeit-Videoaufnahme des Inhalts der Canvas bereitstellt.

Syntax

js
captureStream()
captureStream(frameRate)

Parameter

frameRate Optional

Ein Gleitkommawert mit doppelter Genauigkeit, der die Frequenz der Aufnahme jedes Frames angibt. Wenn nicht gesetzt, wird jedes Mal ein neues Frame erfasst, wenn die Canvas geändert wird; wenn auf 0 gesetzt, werden Frames nicht automatisch erfasst, sondern nur erfasst, wenn die requestFrame()-Methode des zurückgegebenen Tracks aufgerufen wird.

Rückgabewert

Ein Verweis auf ein MediaStream Objekt, das einen einzelnen CanvasCaptureMediaStreamTrack enthält.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn der Wert von frameRate negativ ist.

SecurityError DOMException

Das Bitmap der Canvas ist nicht ursprungssicher; mindestens einige seiner Inhalte wurden oder könnten von einer anderen Site geladen worden sein als der, von der das Dokument selbst geladen wurde.

Beispiel

js
// 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));

Spezifikationen

Specification
Media Capture from DOM Elements
# dom-htmlcanvaselement-capturestream

Browser-Kompatibilität

Siehe auch