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 ihn in Form eines MediaStream aufzunehmen.

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

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

Das von getDisplayMedia() zurückgegebene Promise löst sich in einen MediaStream auf, der die aufgenommene Medien streamt.

Lesen Sie den Artikel Verwendung der Screen Capture API für einen tieferen Einblick, wie Sie die API verwenden, um Bildschirm-Inhalte als Stream aufzunehmen.

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

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

Lesen Sie Verwendung der Element Capture und Region Capture APIs, um mehr zu erfahren.

BrowserCaptureMediaStreamTrack

Repräsentiert eine einzelne Videospur; erweitert die MediaStreamTrack Klasse mit Methoden zur Begrenzung des Teils eines Selbstaufnahme-Streams (zum Beispiel eines Benutzerbildschirms oder -fensters), der erfasst wird.

CaptureController

Bietet Methoden, mit denen eine Aufnahmesitzung weiter manipuliert werden kann, getrennt von ihrer Initiierung über MediaDevices.getDisplayMedia(). Ein CaptureController-Objekt wird mit einer Aufnahmesitzung verbunden, indem es in einem getDisplayMedia() Aufruf als Wert der controller Eigenschaft des Optionsobjekts ü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 zu beschränken, 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 aufgenommene Videospur auf ein angegebenes DOM-Element zu beschränken.

MediaDevices.getDisplayMedia()

Die Methode getDisplayMedia() wird zur MediaDevices Schnittstelle hinzugefügt. Ähnlich wie getUserMedia(), erstellt 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 die folgenden Eigenschaften zu Dictionaries hinzu, die von anderen Spezifikationen definiert werden.

MediaTrackConstraints.displaySurface

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

MediaTrackConstraints.logicalSurface

Gibt an, ob das Video im Stream eine logische Anzeigeoberfläche repräsentiert (das heißt, eine, die möglicherweise nicht vollständig sichtbar auf dem Bildschirm ist oder komplett außerhalb des Bildschirms ist). Ein Wert von true gibt an, dass eine logische Anzeigeoberfläche erfasst werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Steuert, ob das in einem Tab abgespielte Audio weiterhin über die lokalen Lautsprecher eines Benutzers abgespielt wird, wenn der Tab erfasst wird, oder ob es unterdrückt wird. Ein Wert von true gibt an, dass es unterdrückt wird.

MediaTrackSettings.cursor

Ein String, der angibt, ob die aktuell erfasste Anzeigeoberfläche den Mauszeiger enthält und wenn ja, ob er nur sichtbar ist, während sich die Maus bewegt, oder ob er immer sichtbar ist. Der Wert ist einer von always, motion oder never.

MediaTrackSettings.displaySurface

Ein String, der angibt, welcher Typ von Anzeigeoberfläche aktuell erfasst wird. Der Wert ist einer von browser, monitor oder window.

MediaTrackSettings.logicalSurface

Ein boolescher Wert, der true ist, wenn das Video, das erfasst wird, nicht direkt einer einzigen Bildschirm-Anzeigefläche entspricht

MediaTrackSettings.suppressLocalAudioPlayback

Ein boolescher Wert, der true ist, wenn das erfasste Audio nicht über die lokalen Lautsprecher des Benutzers abgespielt wird.

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 Permissions Policy unterstützen (entweder mit dem HTTP Permissions-Policy Header oder dem <iframe> Attribut allow), können den Wunsch äußern, die Screen Capture API zu verwenden, indem sie die Direktive display-capture verwenden:

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

Die Standard-Zulassungsliste ist self, was es jedem Inhalt innerhalb desselben Ursprungs erlaubt, Screen Capture zu verwenden.

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