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:
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. EinCaptureController
-Objekt wird mit einer Erfassungssitzung verbunden, indem es als Wert dercontroller
-Eigenschaft im Optionsobjekt an einengetDisplayMedia()
-Aufruf übergeben wird. CropTarget
-
Bietet eine statische Methode,
fromElement()
, die eineCropTarget
-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 eineRestrictionTarget
-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 derMediaDevices
-Schnittstelle hinzugefügt. Ähnlich wiegetUserMedia()
erstellt diese Methode ein Promise, das mit einemMediaStream
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 vonbrowser
,monitor
oderwindow
. 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
odernever
. MediaTrackSettings.displaySurface
-
Ein String, der angibt, welcher Typ von Anzeigefläche derzeit erfasst wird. Der Wert ist einer von
browser
,monitor
oderwindow
. 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änkungMediaTrackConstraints.displaySurface
unterstützt. MediaTrackSupportedConstraints.logicalSurface
-
Ein Boolean, der
true
ist, wenn die aktuelle Umgebung die EinschränkungMediaTrackConstraints.logicalSurface
unterstützt. MediaTrackSupportedConstraints.suppressLocalAudioPlayback
-
Ein Boolean, der
true
ist, wenn die aktuelle Umgebung die EinschränkungMediaTrackConstraints.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:
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getDisplayMedia() | ||||||||||||
Audio capture support | ||||||||||||
controller option | ||||||||||||
monitorTypeSurfaces option | ||||||||||||
preferCurrentTab option | ||||||||||||
selfBrowserSurface option | ||||||||||||
surfaceSwitching option | ||||||||||||
systemAudio option |
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CropTarget | ||||||||||||
fromElement() static method |
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
RestrictionTarget | ||||||||||||
fromElement() static method |
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.