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 (beispielsweise ein Fenster) auszuwählen und als Medienstrom aufzunehmen. Dieser Strom 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 aufgenommen werden soll.

Um die Videoaufnahme 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 aufgenommene Anzeigefläche überträgt.

Eine ausführlichere Beschreibung, wie Sie mit der API Bildschirminhalte als Strom aufnehmen, finden Sie im Artikel Verwendung der Screen Capture API.

Erweiterungen für die Bildschirmaufnahme

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

Begrenzung des aufgenommenen Bildschirmbereichs im Strom

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

Weitere Informationen finden Sie unter Verwendung der Element Capture API und der Region Capture API.

Steuerung des aufgenommenen Bildschirmbereichs

Die Captured Surface Control API ermöglicht der aufnehmenden Anwendung eine begrenzte Steuerung der aufgenommenen Anzeigefläche, beispielsweise das Zoomen und Scrollen ihrer Inhalte.

Weitere Informationen finden Sie unter Verwendung der Captured Surface Control API.

Schnittstellen

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

Ergänzungen der MediaDevices-Schnittstelle

MediaDevices.getDisplayMedia(): Die Methode getDisplayMedia() wird der MediaDevices-Schnittstelle 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 bestehender Dictionaries

Die Screen Capture API ergänzt Eigenschaften in den folgenden Dictionaries, die durch andere Spezifikationen definiert sind.

MediaTrackConstraints

MediaTrackConstraints.displaySurface: Ein ConstrainDOMString, der angibt, welcher Typ von Anzeigefläche aufgenommen werden soll. Der Wert ist browser, monitor oder window.
MediaTrackConstraints.logicalSurface: Gibt an, ob das Video im Strom eine logische Anzeigefläche darstellt (also eine Anzeigefläche, die möglicherweise nicht vollständig auf dem Bildschirm sichtbar ist oder sich ganz außerhalb des sichtbaren Bildschirmbereichs befindet). Der Wert true gibt an, dass eine logische Anzeigefläche aufgenommen werden soll.
MediaTrackConstraints.suppressLocalAudioPlayback: Steuert, ob der in einem Tab wiedergegebene Ton während der Aufnahme des Tabs weiterhin über die lokalen Lautsprecher des Benutzers ausgegeben oder unterdrückt wird. Der Wert true gibt an, dass die Wiedergabe unterdrückt wird.

MediaStreamTrack.getSettings()

Das von MediaStreamTrack.getSettings() zurückgegebene Objekt enthält zusätzliche Eigenschaften.

cursor: Eine Zeichenfolge, die angibt, ob die aktuell aufgenommene Anzeigefläche den Mauszeiger enthält und, falls ja, ob er nur sichtbar ist, während die Maus bewegt wird, oder ob er immer sichtbar ist. Der Wert ist always, motion oder never.
displaySurface: Eine Zeichenfolge, die angibt, welcher Typ von Anzeigefläche aktuell aufgenommen wird. Der Wert ist browser, monitor oder window.
logicalSurface: Ein boolescher Wert, der true ist, wenn das aufgenommene Video nicht direkt einem einzelnen sichtbaren Anzeigebereich entspricht.
suppressLocalAudioPlayback: Ein boolescher Wert, der true ist, wenn der aufgenommene Ton nicht über die lokalen Lautsprecher des Benutzers ausgegeben wird.
screenPixelRatio: Eine Zahl, die das Verhältnis der physischen Größe eines Pixels auf der aufgenommenen Anzeigefläche (bei ihrer physischen Auflösung) zur logischen Größe eines CSS-Pixels auf dem aufnehmenden Bildschirm (bei seiner logischen Auflösung) angibt. 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 das Attribut allow von <iframe>), können mit der Direktive display-capture festlegen, dass sie die Screen Capture API verwenden möchten:

html

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

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

Die standardmäßige Zulassungsliste für beide Direktiven ist self. Damit darf jeder Inhalt desselben Ursprungs die Bildschirmaufnahme verwenden.

Diese Methoden gelten als leistungsfähige Funktionen. Das bedeutet, dass der Benutzer auch dann um Erlaubnis für ihre Verwendung gebeten wird, wenn eine Permissions-Policy die Berechtigung erteilt. Mit der Permissions API lässt sich die sich aus den Berechtigungen der Website und des Benutzers ergebende Gesamtberechtigung für die aufgeführten Funktionen abfragen.

Darüber hinaus verlangt die Spezifikation, dass der Benutzer vor Kurzem mit der Seite interagiert hat, um diese Funktionen zu verwenden. Es ist also eine vorübergehende Aktivierung erforderlich. Weitere Informationen finden Sie auf den Seiten der einzelnen 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