Screen Capture API

Die Screen Capture API erweitert die bestehende Media Capture and Streams API, um dem Benutzer zu ermöglichen, einen Bildschirm oder einen Teil eines Bildschirms (z. B. ein Fenster) auszuwählen, der als Mediastream erfasst werden soll. Dieser Stream kann dann aufgenommen oder über das Netzwerk mit anderen geteilt werden.

Konzepte und Nutzung der Screen Capture API

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

Um mit der Erfassung von Videos vom Bildschirm zu beginnen, ruft man getDisplayMedia() auf navigator.mediaDevices auf:

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

Das von getDisplayMedia() zurückgegebene Promise wird mit einem MediaStream aufgelöst, der den erfassten Inhalt streamt.

Lesen Sie den Artikel Using the Screen Capture API, um einen tiefergehenden Einblick zu erhalten, wie die API verwendet wird, um Bildschirm-Inhalte als Stream zu erfassen.

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

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

Lesen Sie Using the Element Capture and Region Capture APIs, um mehr darüber zu erfahren.

Schnittstellen

BrowserCaptureMediaStreamTrack

Stellt eine einzelne Videospur dar; erweitert die Klasse MediaStreamTrack mit Methoden, um den Teil eines Selbstaufnahme-Streams (zum Beispiel den Bildschirm oder ein Fenster eines Benutzers) einzuschränken, der erfasst wird.

CaptureController

Bietet Methoden, die verwendet werden können, um eine Erfassungssitzung separat von ihrer Initiierung über MediaDevices.getDisplayMedia() weiter zu manipulieren. Ein CaptureController-Objekt wird mit einer Erfassungssitzung verbunden, indem es als Wert der controller-Eigenschaft im Optionsobjekt an einen getDisplayMedia()-Aufruf übergeben wird.

CropTarget

Bietet eine statische Methode, fromElement(), die eine CropTarget-Instanz zurückgibt, mit der eine erfasste Videospur auf den Bereich zugeschnitten werden kann, in dem ein bestimmtes Element gerendert wird.

RestrictionTarget

Bietet eine statische Methode, fromElement(), die eine RestrictionTarget-Instanz zurückgibt, mit der eine erfasste Videospur auf ein bestimmtes DOM-Element beschränkt werden kann.

Ergänzungen zur MediaDevices-Schnittstelle

MediaDevices.getDisplayMedia()

Die Methode getDisplayMedia() wird der 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 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, durch andere Spezifikationen definierten Wörterbüchern Eigenschaften hinzu.

MediaTrackConstraints

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 (das heißt, eine Fläche, die möglicherweise nicht vollständig auf dem Bildschirm sichtbar ist oder vollständig außerhalb des Bildschirms liegt). Ein Wert von true bedeutet, dass eine logische Anzeigefläche erfasst werden soll.

MediaTrackConstraints.suppressLocalAudioPlayback

Steuert, ob die in einem Tab abgespielte Audioausgabe weiterhin über die lokalen Lautsprecher eines Benutzers abgespielt wird, wenn der Tab erfasst wird, oder ob diese unterdrückt wird. Ein Wert von true bedeutet, dass sie unterdrückt wird.

MediaTrackSettings

MediaTrackSettings.cursor

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

MediaTrackSettings.logicalSurface

Ein Boolean, der true ist, wenn das aufgezeichnete Video nicht direkt einer einzigen Anzeigefläche auf dem Bildschirm entspricht.

MediaTrackSettings.suppressLocalAudioPlayback

Ein Boolean, der true ist, wenn die aufgezeichnete Audioausgabe nicht über die lokalen Lautsprecher eines Benutzers abgespielt wird.

MediaTrackSupportedConstraints

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.

Prüfung durch Permissions Policy

User Agents, die die Permissions Policy unterstützen (entweder durch den HTTP-Header Permissions-Policy oder das Attribut allow von <iframe>), können den Wunsch äußern, die Screen Capture API durch die Direktive display-capture zu verwenden:

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

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

Spezifikationen

Specification
Screen Capture
Element Capture
Region Capture

Browser-Kompatibilität

api.MediaDevices.getDisplayMedia

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

api.CropTarget

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CropTarget
Experimental
fromElement() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.RestrictionTarget

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
RestrictionTarget
Experimental
fromElement() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch