Screen Capture API

Die Screen Capture API fügt der bestehenden Media Capture and Streams API Funktionen hinzu, um dem Benutzer die Auswahl eines Bildschirms oder eines Teils eines Bildschirms (wie z. B. ein Fenster) zu ermöglichen, um diesen als Medienstream aufzunehmen. Dieser Stream kann dann aufgezeichnet oder mit anderen über das Netzwerk geteilt werden.

Konzepte und Nutzung der Screen Capture API

Die Screen Capture API ist relativ einfach zu verwenden. Ihre Hauptmethode ist MediaDevices.getDisplayMedia(), die den Benutzer auffordert, einen Bildschirm oder einen Bildschirmbereich auszuwählen, um ihn in Form eines MediaStream aufzunehmen.

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 mit einem MediaStream aufgelöst, der die aufgenommene Bildschirmoberfläche streamt.

Sehen Sie sich den Artikel Verwendung der Screen Capture API für einen detaillierteren Einblick in die Verwendung der API zur Aufnahme von Bildschirm-Inhalten als Stream an.

Screen Capture Erweiterungen

Die Screen Capture API verfügt über zusätzliche Funktionen, die ihre Fähigkeiten erweitern:

Begrenzung des aufgenommenen Bildschirmbereichs im Stream

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

Siehe Verwendung der Element Capture und Region Capture APIs um mehr zu erfahren.

Steuerung des aufgenommenen Bildschirmbereichs

Die Captured Surface Control API ermöglicht es der Aufnahmeanwendung, eingeschränkte Kontrolle über die aufgenommene Bildschirmoberfläche bereitzustellen, zum Beispiel das Zoomen und Scrollen ihrer Inhalte.

Siehe Verwendung der Captured Surface Control API um mehr zu erfahren.

Schnittstellen

BrowserCaptureMediaStreamTrack: Repräsentiert eine einzelne Video-Spur; erweitert die MediaStreamTrack-Klasse mit Methoden zur Begrenzung des Teils eines Selbst-Aufnahmestreams (zum Beispiel des Bildschirms oder Fensters eines Benutzers), der aufgenommen wird.
CaptureController: Bietet Methoden, die verwendet werden können, um eine aufgenommene Bildschirmoberfläche (aufgenommen über MediaDevices.getDisplayMedia()) weiter zu manipulieren. Ein CaptureController-Objekt wird durch Übergeben an einen getDisplayMedia()-Aufruf als Wert der controller-Eigenschaft des Optionsobjekts mit einer aufgenommenen Bildschirmoberfläche verknüpft.
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 angegebenes DOM-Element zu beschränken.

Ergänzungen zur MediaDevices-Schnittstelle

MediaDevices.getDisplayMedia(): Die getDisplayMedia()-Methode wird zur 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 Bildschirmbereich in einem Format enthält, das den angegebenen Optionen entspricht.

Ergänzungen zu bestehenden Wörterbüchern

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

MediaTrackConstraints

MediaTrackConstraints.displaySurface: Ein ConstrainDOMString, das angibt, welcher Typ von Bildschirmoberfläche aufgenommen werden soll. Der Wert ist einer von browser, monitor oder window.
MediaTrackConstraints.logicalSurface: Gibt an, ob das Video im Stream eine logische Bildschirmoberfläche darstellt (das heißt, eine, die möglicherweise nicht vollständig sichtbar ist oder sich vollständig außerhalb des Bildschirms befindet). Ein Wert von true bedeutet, dass eine logische Bildschirmoberfläche aufgenommen werden soll.
MediaTrackConstraints.suppressLocalAudioPlayback: Steuert, ob der Ton in einem Tabulator weiterhin über die lokalen Lautsprecher eines Benutzers abgespielt wird, wenn der Tabulator aufgenommen wird, oder ob er unterdrückt wird. Ein Wert von true bedeutet, dass er unterdrückt wird.

MediaTrackSettings

MediaTrackSettings.cursor: Ein String, der angibt, ob die gerade aufgenommene Bildschirmoberfläche den Mauszeiger einschließt und, falls ja, ob er 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 Bildschirmoberfläche derzeit aufgenommen wird. Der Wert ist einer von browser, monitor oder window.
MediaTrackSettings.logicalSurface: Ein boolescher Wert, der true ist, wenn das aufgenommene Video nicht direkt einer einzigen Bildschirmfläche entspricht.
MediaTrackSettings.suppressLocalAudioPlayback: Ein boolescher Wert, der true ist, wenn die aufgenommene Audioausgabe 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 aufgenommenen Bildschirmoberfläche (angezeigt in ihrer physischen Auflösung) zur logischen Größe eines CSS-Pixels auf dem aufzeichnenden Bildschirm (angezeigt in ihrer logischen Auflösung) darstellt. Sie kann nicht als Einschränkung oder Fähigkeit verwendet werden.

MediaTrackSupportedConstraints

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.

Sicherheitsüberlegungen

Websites, die Permissions Policy (entweder mit dem HTTP Permissions-Policy Header oder dem <iframe> Attribut allow) unterstützen, können den Wunsch angeben, die Screen Capture API mit der Direktive display-capture zu verwenden:

html

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

Eine Seite kann auch den Wunsch angeben, die Captured Surface Control API über die Direktive captured-surface-control zu verwenden. Insbesondere werden die Methoden forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() und resetZoomLevel() von dieser Direktive kontrolliert.

Die Standardeinstellungen für beide Direktiven ist self, was bedeutet, dass alle Inhalte innerhalb desselben Ursprungs die Screen Capture verwenden können.

Diese Methoden werden als leistungsstarke Funktionen betrachtet, was bedeutet, dass selbst wenn die Berechtigung über eine Permissions-Policy zugelassen wird, der Benutzer immer noch um Erlaubnis gebeten wird, sie zu verwenden. Die Permissions API kann verwendet werden, um die aggregierte Berechtigung (sowohl von der Website als auch vom Benutzer) zur Nutzung der aufgelisteten Funktionen abzufragen.

Darüber hinaus erfordert die Spezifikation, dass der Benutzer kürzlich mit der Seite interagiert hat, um diese Funktionen zu nutzen — dies bedeutet, dass eine transiente Aktivierung erforderlich ist. Weitere Details finden Sie auf den einzelnen Methoden-Seiten.

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