Screen Capture API

Konzepte und Nutzung der Screen Capture API

Die Screen Capture API ist relativ einfach zu verwenden. Ihre Hauptmethode ist MediaDevices.getDisplayMedia(), die den Benutzer auffordert, einen Bildschirm oder einen Bildschirmbereich auszuwhlen, um ihn in Form eines MediaStream aufzunehmen.

Um mit der Aufnahme von Videos vom Bildschirm zu beginnen, rufen Sie getDisplayMedia() auf navigator.mediaDevices auf:

captureStream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

Das von getDisplayMedia() zurckgegebene Promise wird mit einem MediaStream aufgelst, der die aufgenommene Bildschirmoberflche streamt.

Sehen Sie sich den Artikel Verwendung der Screen Capture API fr einen detaillierteren Einblick in die Verwendung der API zur Aufnahme von Bildschirm-Inhalten als Stream an.

Screen Capture Erweiterungen

Die Screen Capture API verfgt ber zustzliche Funktionen, die ihre Fhigkeiten erweitern:

Begrenzung des aufgenommenen Bildschirmbereichs im Stream

• Die Element Capture API beschrnkt den aufgenommenen Bereich auf ein bestimmtes gerendertes DOM-Element und dessen Nachkommen.
• Die Region Capture API schneidet den aufgenommenen Bereich auf den Bildschirmbereich zu, in dem ein bestimmtes DOM-Element gerendert wird.

Siehe Verwendung der Element Capture und Region Capture APIs um mehr zu erfahren.

Steuerung des aufgenommenen Bildschirmbereichs

Die Captured Surface Control API ermglicht es der Aufnahmeanwendung, eingeschrnkte Kontrolle ber die aufgenommene Bildschirmoberflche bereitzustellen, zum Beispiel das Zoomen und Scrollen ihrer Inhalte.

Siehe Verwendung der Captured Surface Control API um mehr zu erfahren.

Schnittstellen

BrowserCaptureMediaStreamTrack

Reprsentiert eine einzelne Video-Spur; erweitert die MediaStreamTrack-Klasse mit Methoden zur Begrenzung des Teils eines Selbst-Aufnahmestreams (zum Beispiel des Bildschirms oder Fensters eines Benutzers), der aufgenommen wird.

CaptureController

Bietet Methoden, die verwendet werden knnen, um eine aufgenommene Bildschirmoberflche (aufgenommen ber MediaDevices.getDisplayMedia()) weiter zu manipulieren. Ein CaptureController-Objekt wird durch bergeben an einen getDisplayMedia()-Aufruf als Wert der controller-Eigenschaft des Optionsobjekts mit einer aufgenommenen Bildschirmoberflche verknpft.

CropTarget

Bietet eine statische Methode, fromElement(), die eine CropTarget-Instanz zurckgibt, die verwendet werden kann, um eine aufgenommene Videospur auf den Bereich zuzuschneiden, in dem ein bestimmtes Element gerendert wird.

RestrictionTarget

Bietet eine statische Methode, fromElement(), die eine RestrictionTarget-Instanz zurckgibt, die verwendet werden kann, um eine aufgenommene Videospur auf ein angegebenes DOM-Element zu beschrnken.

Ergnzungen zur MediaDevices-Schnittstelle

MediaDevices.getDisplayMedia()

Die getDisplayMedia()-Methode wird zur MediaDevices-Schnittstelle hinzugefgt. hnlich wie getUserMedia() erstellt diese Methode ein Versprechen, das mit einem MediaStream aufgelst wird, der den vom Benutzer ausgewhlten Bildschirmbereich in einem Format enthlt, das den angegebenen Optionen entspricht.

Ergnzungen zu bestehenden Wrterbchern

Die Screen Capture API fgt den folgenden, von anderen Spezifikationen definierten, Wrterbchern Eigenschaften hinzu.

MediaTrackConstraints

MediaTrackConstraints.displaySurface

Ein ConstrainDOMString, das angibt, welcher Typ von Bildschirmoberflche aufgenommen werden soll. Der Wert ist einer von browser, monitor oder window.

MediaTrackConstraints.logicalSurface

Gibt an, ob das Video im Stream eine logische Bildschirmoberflche darstellt (das heit, eine, die mglicherweise nicht vollstndig sichtbar ist oder sich vollstndig auerhalb des Bildschirms befindet). Ein Wert von true bedeutet, dass eine logische Bildschirmoberflche aufgenommen werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Steuert, ob der Ton in einem Tabulator weiterhin ber die lokalen Lautsprecher eines Benutzers abgespielt wird, wenn der Tabulator aufgenommen wird, oder ob er unterdrckt wird. Ein Wert von true bedeutet, dass er unterdrckt wird.

MediaTrackSettings

MediaTrackSettings.cursor

Ein String, der angibt, ob die gerade aufgenommene Bildschirmoberflche den Mauszeiger einschliet und, falls ja, ob er nur sichtbar ist, whrend die Maus in Bewegung ist, oder ob er immer sichtbar ist. Der Wert ist einer von always, motion oder never.

MediaTrackSettings.displaySurface

Ein String, der angibt, welcher Typ von Bildschirmoberflche derzeit aufgenommen wird. Der Wert ist einer von browser, monitor oder window.

MediaTrackSettings.logicalSurface

Ein boolescher Wert, der true ist, wenn das aufgenommene Video nicht direkt einer einzigen Bildschirmflche entspricht.

MediaTrackSettings.suppressLocalAudioPlayback

Ein boolescher Wert, der true ist, wenn die aufgenommene Audioausgabe nicht ber die lokalen Lautsprecher des Benutzers abgespielt wird.

MediaTrackSettings.screenPixelRatio

Eine Zahl, die das Verhltnis der physischen Gre eines Pixels auf der aufgenommenen Bildschirmoberflche (angezeigt in ihrer physischen Auflsung) zur logischen Gre eines CSS-Pixels auf dem aufzeichnenden Bildschirm (angezeigt in ihrer logischen Auflsung) darstellt. Sie kann nicht als Einschrnkung oder Fhigkeit verwendet werden.

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.displaySurface

Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung die Einschrnkung MediaTrackConstraints.displaySurface untersttzt.

MediaTrackSupportedConstraints.logicalSurface

Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung die Einschrnkung MediaTrackConstraints.logicalSurface untersttzt.

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung die Einschrnkung MediaTrackConstraints.suppressLocalAudioPlayback untersttzt.

Sicherheitsberlegungen

Websites, die Permissions Policy (entweder mit dem HTTP Permissions-Policy Header oder dem <iframe> Attribut allow) untersttzen, knnen den Wunsch angeben, die Screen Capture API mit der Direktive display-capture zu verwenden:

<iframe allow="display-capture" src="/some-other-document.html"></iframe>

Eine Seite kann auch den Wunsch angeben, die Captured Surface Control API ber die Direktive captured-surface-control zu verwenden. Insbesondere werden die Methoden forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() und resetZoomLevel() von dieser Direktive kontrolliert.

Die Standardeinstellungen fr beide Direktiven ist self, was bedeutet, dass alle Inhalte innerhalb desselben Ursprungs die Screen Capture verwenden knnen.

Diese Methoden werden als leistungsstarke Funktionen betrachtet, was bedeutet, dass selbst wenn die Berechtigung ber eine Permissions-Policy zugelassen wird, der Benutzer immer noch um Erlaubnis gebeten wird, sie zu verwenden. Die Permissions API kann verwendet werden, um die aggregierte Berechtigung (sowohl von der Website als auch vom Benutzer) zur Nutzung der aufgelisteten Funktionen abzufragen.

Darber hinaus erfordert die Spezifikation, dass der Benutzer krzlich mit der Seite interagiert hat, um diese Funktionen zu nutzen dies bedeutet, dass eine transiente Aktivierung erforderlich ist. Weitere Details finden Sie auf den einzelnen Methoden-Seiten.

Spezifikationen

Browser-Kompatibilitt

api.MediaDevices.getDisplayMedia

api.CropTarget

api.RestrictionTarget

Siehe auch

• Verwendung der Screen Capture API
• Verwendung der Element Capture und Region Capture APIs
• Verwendung der Captured Surface Control API
• MediaDevices.getDisplayMedia()