Screen Capture API

Die Screen Capture API ist relativ einfach zu verwenden. Ihre einzige Methode ist MediaDevices.getDisplayMedia(), deren Aufgabe es ist, den Benutzer aufzufordern, einen Bildschirm oder einen Teil eines Bildschirms auszuwählen, um diesen in Form eines MediaStream aufzunehmen.

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

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

Der von getDisplayMedia() zurückgegebene Promise löst sich auf ein MediaStream auf, das die aufgezeichneten Medien streamt.

Lesen Sie den Artikel Verwendung der Screen Capture API für einen tieferen Einblick, wie Sie die API zur Bildschirmaufzeichnung als Stream verwenden können.

Die Screen Capture API verfügt auch über Funktionen, die den Teil des Bildschirms, der im Stream erfasst wird, einschränken:

• Die Element Capture API beschränkt den erfassten Bereich auf ein angegebenes gerendertes DOM-Element und dessen Nachkommen.
• Die Region Capture API schneidet den erfassten Bereich auf die Bildschirmfläche zu, in der ein angegebenes DOM-Element gerendert wird.

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

BrowserCaptureMediaStreamTrack

Repräsentiert einen einzelnen Videospur; erweitert die Klasse MediaStreamTrack mit Methoden, um den Teil eines Selbstaufzeichnungsstreams (z. B. des Bildschirms oder Fensters eines Benutzers) zu begrenzen.

CaptureController

Bietet Methoden, die verwendet werden können, um eine Sitzung der Aufzeichnung unabhängig von deren Start über MediaDevices.getDisplayMedia() weiter zu bearbeiten. Ein CaptureController Objekt wird mit einer Aufnahmesitzung verbunden, indem es in einem Aufruf von getDisplayMedia() als Wert für die controller Eigenschaft des Optionen-Objekts übergeben wird.

CropTarget

Bietet eine statische Methode, fromElement(), die eine CropTarget Instanz zurückgibt, die verwendet werden kann, um eine aufgezeichnete Videospur auf den Bereich zuzuschneiden, in dem ein angegebenes Element gerendert wird.

RestrictionTarget

Bietet eine statische Methode, fromElement(), die eine RestrictionTarget Instanz zurückgibt, die verwendet werden kann, um eine aufgezeichnete Videospur auf ein angegebenes DOM-Element zu beschränken.

MediaDevices.getDisplayMedia()

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

Die Screen Capture API fügt den folgenden von anderen Spezifikationen definierten Wörterbüchern 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 (d.h. eine, die möglicherweise nicht vollständig auf dem Bildschirm sichtbar ist oder vollständig außerhalb des Bildschirms liegt). Ein true-Wert zeigt an, dass eine logische Anzeigefläche erfasst werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Steuert, ob das Audio in einem Tab weiter über die lokalen Lautsprecher des Benutzers abgespielt wird, wenn der Tab erfasst wird, oder ob es unterdrückt wird. Ein true-Wert zeigt an, dass es unterdrückt wird.

MediaTrackSettings.cursor

Ein String, der angibt, ob die aktuell erfasste Anzeigefläche den Mauszeiger enthält und ob dieser, wenn ja, nur 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 momentan 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 einzelnen 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 abgespielt wird.

MediaTrackSettings.screenPixelRatio

Eine Zahl, die das Verhältnis der physischen Größe eines Pixels auf der erfassten Anzeigefläche (angezeigt in seiner physischen Auflösung) zur logischen Größe eines CSS-Pixels auf dem aufzeichnenden Bildschirm (angezeigt in seiner logischen Auflösung) darstellt. Es kann nicht als Einschränkung oder Fähigkeit verwendet werden.

MediaTrackSupportedConstraints.displaySurface

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

MediaTrackSupportedConstraints.logicalSurface

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

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

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

Benutzeragenten, die die Berechtigungsrichtlinie unterstützen (entweder durch den HTTP Permissions-Policy Header oder das <iframe> Attribut allow), können den Wunsch angeben, die Screen Capture API zu verwenden, indem sie die Direktive display-capture verwenden:

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

Die Standard-Zugriffsliste ist self, wodurch jedes Inhalt innerhalb desselben Ursprungs die Screen Capture verwenden kann.

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