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. Dieser umfasst eine Echtzeit-Videoaufnahme des Inhalts des Canvas.

Syntax

js
captureStream()
captureStream(frameRate)

Parameter

frameRate Optional

Ein doppelt präziser Gleitkommawert, der die Aufnahmerate jedes Frames angibt. Wenn dieser nicht festgelegt ist, wird ein neues Bild jedes Mal aufgenommen, wenn sich das Canvas ändert; wenn er auf 0 gesetzt ist, werden keine Bilder automatisch aufgenommen; stattdessen werden sie nur aufgenommen, wenn die requestFrame()-Methode des zurückgegebenen Tracks aufgerufen wird.

Rückgabewert

Eine Referenz 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 des Canvas ist nicht ursprungsrein; mindestens ein Teil seines Inhalts wurde oder könnte von einer anderen Seite 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

BCD tables only load in the browser

Siehe auch