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, der in Form eines MediaStream aufgenommen werden soll.

Um mit der Aufnahme von 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 aufgenommenen Medien streamt.

Für einen tiefergehenden Blick darauf, wie die API verwendet wird, um Bildschirm-Inhalte als Stream aufzunehmen, lesen Sie den Artikel Verwendung der Screen Capture API.

CaptureController

Bietet Methoden, die verwendet werden können, um eine Aufnahmesitzung weiter zu manipulieren, getrennt von ihrer Einleitung über MediaDevices.getDisplayMedia(). Ein CaptureController-Objekt wird mit einer Aufnahmesitzung verknüpft, indem es in einem Aufruf von getDisplayMedia() als Wert der controller-Eigenschaft des options-Objekts übergeben wird.

MediaDevices.getDisplayMedia()

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

Die Screen Capture API fügt den folgenden Wörterbüchern, die von anderen Spezifikationen definiert werden, Eigenschaften hinzu.

MediaTrackConstraints.displaySurface

Ein ConstrainDOMString, das 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 sichtbar ist oder vollständig außerhalb des Bildschirms liegt). Ein Wert von true zeigt an, dass eine logische Anzeigefläche erfasst werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Steuert, ob der Ton, der in einem Tab abgespielt wird, weiterhin auf den lokalen Lautsprechern eines Benutzers wiedergegeben wird, wenn der Tab erfasst wird, oder ob er unterdrückt wird. Ein Wert von true zeigt an, dass er unterdrückt wird.

MediaTrackSettings.cursor

Ein String, der angibt, ob die aktuell erfasste Anzeigefläche den Mauszeiger einschließt und ob dieser nur sichtbar ist, wenn 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 aktuell erfasst wird. Der Wert ist einer von browser, monitor oder window.

MediaTrackSettings.logicalSurface

Ein boolescher Wert, der true ist, wenn das aufgenommene Video nicht direkt mit einem einzigen sichtbaren Anzeigebereich übereinstimmt.

MediaTrackSettings.suppressLocalAudioPlayback

Ein boolescher Wert, der true ist, wenn das aufgenommene 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 Berechtigungsrichtlinie unterstützen (entweder mit dem HTTP Permissions-Policy Header oder dem <iframe> Attribut allow), können den Wunsch spezifizieren, die Screen Capture API mit der Direktive display-capture zu verwenden:

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

Die standardmäßige Zulassungsliste ist self, was es jedem Inhalt innerhalb desselben Ursprungs erlaubt, die Screen Capture zu nutzen.

• Verwendung der Screen Capture API
• MediaDevices.getDisplayMedia()