Screen Capture API

Die Screen Capture API erweitert die bestehende Media Capture and Streams API. Sie ermöglicht es Benutzern, einen Bildschirm oder einen Teil davon (etwa ein Fenster) auszuwählen und als Medienstream zu erfassen. Dieser Stream kann anschließend aufgezeichnet oder über das Netzwerk mit anderen geteilt werden.

Konzepte und Verwendung der Screen Capture API

Die Screen Capture API ist relativ einfach zu verwenden. Ihre wichtigste Methode ist MediaDevices.getDisplayMedia(). Sie fordert den Benutzer auf, einen Bildschirm oder einen Teil davon auszuwählen, der als MediaStream erfasst werden soll.

Um die Videoerfassung des Bildschirms zu starten, rufen Sie getDisplayMedia() auf navigator.mediaDevices auf:

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

Das von getDisplayMedia() zurückgegebene Promise wird mit einem MediaStream erfüllt, der die erfasste Anzeigefläche streamt.

Eine ausführlichere Beschreibung, wie Sie mit der API Bildschirminhalte als Stream erfassen, finden Sie im Artikel Die Screen Capture API verwenden.

Erweiterungen für die Bildschirmerfassung

Die Screen Capture API bietet zusätzliche Funktionen, die ihre Möglichkeiten erweitern:

Den im Stream erfassten Bildschirmbereich begrenzen

Die Element Capture API beschränkt den erfassten Bereich auf ein bestimmtes gerendertes DOM-Element und dessen Nachfahren.
Die Region Capture API schneidet den erfassten Bereich auf den Bildschirmbereich zu, in dem ein bestimmtes DOM-Element gerendert wird.

Weitere Informationen finden Sie unter Die Element Capture API und die Region Capture API verwenden.

Den erfassten Bildschirmbereich steuern

Die Captured Surface Control API ermöglicht es der erfassenden Anwendung, die erfasste Anzeigefläche in begrenztem Umfang zu steuern, beispielsweise deren Inhalt zu zoomen und zu scrollen.

Weitere Informationen finden Sie unter Die Captured Surface Control API verwenden.

Schnittstellen

BrowserCaptureMediaStreamTrack: Repräsentiert eine einzelne Videospur; erweitert die Klasse MediaStreamTrack um Methoden, mit denen sich der erfasste Teil eines Streams zur Selbsterfassung (beispielsweise des Bildschirms oder Fensters eines Benutzers) begrenzen lässt.
CaptureController: Stellt Methoden bereit, mit denen sich eine erfasste Anzeigefläche (erfasst über MediaDevices.getDisplayMedia()) weiter beeinflussen lässt. Ein CaptureController-Objekt wird einer erfassten Anzeigefläche zugeordnet, indem es bei einem Aufruf von getDisplayMedia() als Wert der Eigenschaft controller des Optionsobjekts übergeben wird.
CropTarget: Stellt die statische Methode fromElement() bereit. Sie gibt eine CropTarget-Instanz zurück, mit der eine erfasste Videospur auf den Bereich zugeschnitten werden kann, in dem ein bestimmtes Element gerendert wird.
RestrictionTarget: Stellt die statische Methode fromElement() bereit. Sie gibt eine RestrictionTarget-Instanz zurück, mit der eine erfasste Videospur auf ein bestimmtes DOM-Element beschränkt werden kann.

Ergänzungen zur MediaDevices-Schnittstelle

MediaDevices.getDisplayMedia(): Die Methode getDisplayMedia() wird der Schnittstelle MediaDevices hinzugefügt. Ähnlich wie getUserMedia() erstellt diese Methode ein Promise, das mit einem MediaStream erfüllt wird. Dieser enthält den vom Benutzer ausgewählten Anzeigebereich in einem Format, das den angegebenen Optionen entspricht.

Ergänzungen zu bestehenden Dictionaries

Die Screen Capture API ergänzt die folgenden, in anderen Spezifikationen definierten Dictionaries um Eigenschaften.

MediaTrackConstraints

MediaTrackConstraints.displaySurface: Ein ConstrainDOMString, der angibt, welcher Typ von Anzeigefläche erfasst werden soll. Der Wert ist entweder browser, monitor oder window.
MediaTrackConstraints.logicalSurface: Gibt an, ob das Video im Stream eine logische Anzeigefläche darstellt (also eine Anzeigefläche, die möglicherweise nicht vollständig auf dem Bildschirm sichtbar ist oder sich vollständig außerhalb des sichtbaren Bildschirmbereichs befindet). Der Wert true gibt an, dass eine logische Anzeigefläche erfasst werden soll.
MediaTrackConstraints.suppressLocalAudioPlayback: Steuert, ob die Audiowiedergabe eines Tabs bei dessen Erfassung weiterhin über die lokalen Lautsprecher des Benutzers erfolgt oder unterdrückt wird. Der Wert true gibt an, dass sie unterdrückt wird.

MediaTrackSettings

MediaTrackSettings.cursor: Eine Zeichenfolge, die angibt, ob die derzeit erfasste Anzeigefläche den Mauszeiger enthält und, falls ja, ob dieser nur bei Bewegung der Maus oder immer sichtbar ist. Der Wert ist entweder always, motion oder never.
MediaTrackSettings.displaySurface: Eine Zeichenfolge, die angibt, welcher Typ von Anzeigefläche derzeit erfasst wird. Der Wert ist entweder browser, monitor oder window.
MediaTrackSettings.logicalSurface: Ein boolescher Wert, der true ist, wenn das erfasste Video nicht unmittelbar einem einzelnen sichtbaren Anzeigebereich auf dem Bildschirm entspricht.
MediaTrackSettings.suppressLocalAudioPlayback: Ein boolescher Wert, der true ist, wenn das erfasste Audio nicht über die lokalen Lautsprecher des Benutzers wiedergegeben wird.
MediaTrackSettings.screenPixelRatio: Eine Zahl, die das Verhältnis zwischen der physischen Größe eines Pixels auf der erfassten Anzeigefläche (bei ihrer physischen Auflösung) und der logischen Größe eines CSS-Pixels auf dem erfassenden Bildschirm (bei seiner logischen Auflösung) darstellt. Sie kann weder als Constraint noch als Capability verwendet werden.

MediaDevices.getSupportedConstraints()

Das von MediaDevices.getSupportedConstraints() zurückgegebene Objekt enthält drei zusätzliche Eigenschaften.

displaySurface: Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung den Constraint MediaTrackConstraints.displaySurface unterstützt.
logicalSurface: Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung den Constraint MediaTrackConstraints.logicalSurface unterstützt.
suppressLocalAudioPlayback: Ein boolescher Wert, der true ist, wenn die aktuelle Umgebung den Constraint MediaTrackConstraints.suppressLocalAudioPlayback unterstützt.

Sicherheitsaspekte

Websites, die Permissions Policy unterstützen (entweder über den HTTP-Header Permissions-Policy oder über das Attribut allow des Elements <iframe>), können mit der Direktive display-capture angeben, dass sie die Screen Capture API verwenden möchten:

html

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

Eine Website kann über die Direktive captured-surface-control auch angeben, dass sie die Captured Surface Control API verwenden möchte. Insbesondere werden die Methoden forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() und resetZoomLevel() durch diese Direktive gesteuert.

Die Standard-Zulassungsliste für beide Direktiven ist self. Damit darf jeder Inhalt desselben Ursprungs die Screen Capture API verwenden.

Diese Methoden gelten als leistungsfähige Funktionen. Das bedeutet, dass der Benutzer auch dann um Erlaubnis für ihre Verwendung gebeten wird, wenn sie über eine Permissions-Policy zugelassen sind. Mit der Permissions API lässt sich die zusammengefasste Berechtigung (von der Website und vom Benutzer) zur Verwendung der genannten Funktionen abfragen.

Darüber hinaus verlangt die Spezifikation, dass der Benutzer kürzlich mit der Seite interagiert hat, um diese Funktionen zu verwenden – es ist also eine vorübergehende Aktivierung erforderlich. Weitere Einzelheiten finden Sie auf den Seiten der jeweiligen Methoden.

Spezifikationen

Spezifikation
Screen Capture
Element Capture
Region Capture
Captured Surface Control

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden