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
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 dierequestFrame()
-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
// 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
HTMLMediaElement.captureStream()
, das es ermöglicht, einen Stream von einem Media-Element aufzunehmen.MediaStream
- Media Capture and Streams API