Screen Capture API

Die Nutzung der Screen Capture API ist relativ einfach. Ihre einzige Methode ist MediaDevices.getDisplayMedia(), deren Aufgabe es ist, den Benutzer aufzufordern, einen Bildschirm oder einen Teil eines Bildschirms zur Erfassung in Form eines MediaStream auszuwählen.

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

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

Das von getDisplayMedia() zurückgegebene Promise wird auf einen MediaStream aufgelöst, der die erfassten Medien streamt.

Weitere ausführliche Informationen zur Nutzung der API, um Bildschirminhalte als Stream zu erfassen, finden Sie im Artikel Verwendung der Screen Capture API.

Die Screen Capture API verfügt außerdem über Funktionen, die den aufgenommenen Teil des Bildschirms im Stream einschränken:

• Die Element Capture API beschränkt die erfasste Region auf ein angegebenes gerendertes DOM-Element und dessen Nachkommen.
• Die Region Capture API schneidet die erfasste Region auf den Bereich des Bildschirms zu, in dem ein angegebenes DOM-Element gerendert wird.

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

BrowserCaptureMediaStreamTrack

Repräsentiert eine einzelne Videospur; erweitert die Klasse MediaStreamTrack mit Methoden, um den Teil eines Selbstaufnahme-Streams (zum Beispiel der Bildschirm oder das Fenster eines Benutzers) zu begrenzen.

CaptureController

Bietet Methoden, mit denen eine Aufnahmesitzung weiter manipuliert werden kann, getrennt von ihrer Einleitung über MediaDevices.getDisplayMedia(). Ein CaptureController-Objekt wird mit einer Aufnahmesitzung assoziiert, indem es in einen Aufruf von getDisplayMedia() als Wert der controller-Eigenschaft im Optionsobjekt übergeben wird.

CropTarget

Bietet eine statische Methode, fromElement(), die eine CropTarget-Instanz zurückgibt, 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 zurückgibt, die verwendet werden kann, um eine aufgenommene Videospur auf ein bestimmtes DOM-Element zu beschränken.

MediaDevices.getDisplayMedia()

Die Methode getDisplayMedia() wird zur MediaDevices-Schnittstelle hinzugefügt. Ähnlich wie getUserMedia() erzeugt diese Methode ein Promise, das mit einem MediaStream aufgelöst wird, der den vom Benutzer ausgewählten Anzeigebereich enthält, in einem Format, das den angegebenen Optionen entspricht.

Die Screen Capture API fügt den folgenden Wörterbüchern, die durch andere Spezifikationen definiert sind, Eigenschaften hinzu.

MediaTrackConstraints.displaySurface

Ein ConstrainDOMString, der angibt, welcher Typ von Anzeigefläche erfasst werden soll. Der Wert ist einer von browser, monitor oder window.

MediaTrackConstraints.logicalSurface

Gibt an, ob das Video im Stream eine logische Anzeigefläche darstellt (also eine, die möglicherweise nicht vollständig sichtbar oder komplett vom Bildschirm verschwunden ist). Ein Wert von true gibt an, dass eine logische Anzeigefläche erfasst werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Kontrolliert, ob das Audio, das in einem Tab abgespielt wird, weiterhin aus den lokalen Lautsprechern eines Benutzers wiedergegeben wird, wenn der Tab erfasst wird, oder ob es unterdrückt wird. Ein Wert von true zeigt an, dass es unterdrückt wird.

MediaTrackSettings.cursor

Ein String, der angibt, ob die derzeit erfasste Anzeigefläche den Mauszeiger enthält und ob er sichtbar ist, während 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 Anzeigefläche derzeit erfasst wird. Der Wert ist einer von browser, monitor oder window.

MediaTrackSettings.logicalSurface

Ein boolescher Wert, der true ist, wenn das erfasste Video nicht direkt einer einzigen Anzeigefläche 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.

MediaTrackSupportedConstraints.displaySurface

Ein boolean, der true ist, wenn die aktuelle Umgebung die Einschränkung MediaTrackConstraints.displaySurface unterstützt.

MediaTrackSupportedConstraints.logicalSurface

Ein boolean, der true ist, wenn die aktuelle Umgebung die Einschränkung MediaTrackConstraints.logicalSurface unterstützt.

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

Ein boolean, der true ist, wenn die aktuelle Umgebung die Einschränkung MediaTrackConstraints.suppressLocalAudioPlayback unterstützt.

User Agents, die Permissions Policy unterstützen (entweder durch den HTTP Permissions-Policy-Header oder das <iframe>-Attribut allow), können ein Interesse an der Nutzung der Screen Capture API mit der Direktive display-capture angeben:

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

Die Standard-Zulassungsliste ist self, was bedeutet, dass jeder Inhalt innerhalb desselben Ursprungs die Screen Capture verwenden kann.

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