Die Screen Capture API führt Ergänzungen zur bestehenden Media Capture and Streams API ein, um den Benutzer auszuwählen, einen Bildschirm oder einen Teil eines Bildschirms (wie ein Fenster) als Medien-Stream aufzunehmen. Dieser Stream kann dann aufgenommen oder mit anderen über das Netzwerk geteilt werden.
Konzepte und Nutzung der Screen Capture APIDie Screen Capture API ist relativ einfach zu verwenden. Ihre Hauptmethode ist MediaDevices.getDisplayMedia(), deren Aufgabe es ist, den Benutzer zu bitten, 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() in navigator.mediaDevices auf:
captureStream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
Das von getDisplayMedia() zurückgegebene Promise wird mit einem MediaStream aufgelöst, der die aufgenommene Anzeigefläche streamt.
Lesen Sie den Artikel Verwendung der Screen Capture API für einen detaillierteren Blick darauf, wie Sie die API nutzen, um Bildschirm-Inhalte als Stream aufzunehmen.
Erweiterungen der Screen Capture APIDie Screen Capture API verfügt über zusätzliche Funktionen, die ihre Möglichkeiten erweitern:
Begrenzung der im Stream aufgenommenen BildschirmflächeLesen Sie Verwendung der Element Capture und Region Capture APIs, um mehr zu erfahren.
Steuerung der aufgenommenen BildschirmflächeDie Captured Surface Control API ermöglicht es der erfassenden Anwendung, begrenzte Kontrolle über die erfasste Anzeigefläche zu bieten, beispielsweise durch Zoomen und Scrollen ihrer Inhalte.
Lesen Sie Verwendung der Captured Surface Control API, um mehr zu erfahren.
SchnittstellenBrowserCaptureMediaStreamTrack
Repräsentiert eine einzelne Videospur; erweitert die MediaStreamTrack-Klasse mit Methoden, um den Teil eines Self-Capture-Streams (zum Beispiel der Bildschirm oder ein Fenster eines Benutzers) zu begrenzen, der aufgenommen wird.
CaptureController
Bietet Methoden, die verwendet werden können, um eine erfasste Anzeigefläche weiter zu manipulieren (erfasst über MediaDevices.getDisplayMedia()). Ein CaptureController-Objekt wird einer erfassten Anzeigefläche zugeordnet, indem es in einen getDisplayMedia()-Aufruf als Wert der controller-Eigenschaft des Optionsobjekts übergeben wird.
CropTarget
Stellt eine statische Methode zur Verfügung, 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
Stellt eine statische Methode zur Verfügung, fromElement(), die eine RestrictionTarget-Instanz zurückgibt, die verwendet werden kann, um eine aufgenommene Videospur auf ein bestimmtes DOM-Element zu beschränken.
MediaDevices.getDisplayMedia()
Die getDisplayMedia()-Methode wird der MediaDevices-Schnittstelle hinzugefügt. Ãhnlich wie getUserMedia() erstellt diese Methode ein Versprechen, das mit einem MediaStream aufgelöst wird, welches den vom Benutzer ausgewählten Anzeigebereich im spezifizierten Format enthält.
Die Screen Capture API fügt den folgenden Wörterbüchern, die durch andere Spezifikationen definiert sind, Eigenschaften hinzu.
MediaTrackConstraintsMediaTrackConstraints.displaySurface
Ein ConstrainDOMString, das angibt, welche Art von Anzeigefläche aufgenommen 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, die möglicherweise nicht vollständig sichtbar auf dem Bildschirm ist oder vollständig auÃerhalb des Bildschirms liegt). Ein Wert von true zeigt an, dass eine logische Anzeigefläche aufgenommen werden soll.
MediaTrackConstraints.suppressLocalAudioPlayback
Steuert, ob das Audio, das in einem Tab abgespielt wird, weiterhin über die lokalen Lautsprecher eines Benutzers wiedergegeben wird, wenn der Tab aufgenommen wird, oder ob es unterdrückt wird. Ein Wert von true zeigt an, dass es unterdrückt wird.
MediaTrackSettings.cursor
Ein String, der angibt, ob die derzeit aufgenommene Anzeigefläche den Mauszeiger enthält und, falls ja, ob dieser 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, welche Art von Anzeigeflä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 Bildschirm-Anzeigefläche entspricht.
MediaTrackSettings.suppressLocalAudioPlayback
Ein boolescher Wert, der true ist, wenn das aufgenommene Audio nicht über die lokalen Lautsprecher des Benutzers abgespielt wird.
MediaTrackSettings.screenPixelRatio
Eine Nummer, die das Verhältnis der physischen GröÃe eines Pixels auf der erfassten Anzeigefläche (angezeigt in ihrer physischen Auflösung) zur logischen GröÃe eines CSS-Pixels auf dem aufnehmenden Bildschirm (angezeigt in ihrer logischen Auflösung) repräsentiert. Es kann nicht als Einschränkung oder Fähigkeit verwendet werden.
Websites, die die Permissions Policy unterstützen (entweder mithilfe des HTTP-Permissions-Policy Headers oder des <iframe>-Attributs 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>
Eine Website kann auch den Wunsch spezifizieren, die Captured Surface Control API über die Direktive captured-surface-control zu verwenden. Speziell die Methoden forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() und resetZoomLevel() werden von dieser Direktive gesteuert.
Die Standard-Zulassungsliste für beide Direktiven ist self, was jeglichen Inhalt innerhalb desselben Ursprungs die Nutzung der Screen Capture erlaubt.
Diese Methoden werden als mächtige Funktionen angesehen, was bedeutet, dass selbst wenn die Erlaubnis über eine Permissions-Policy erlaubt ist, der Benutzer dennoch um Erlaubnis zur Nutzung gebeten wird. Die Permissions API kann verwendet werden, um die aggregierte Erlaubnis (sowohl von der Website als auch vom Benutzer) zur Nutzung der aufgelisteten Funktionen abzufragen.
Darüber hinaus erfordert die Spezifikation, dass ein Benutzer kürzlich mit der Seite interagiert hat, um diese Funktionen nutzen zu können â das bedeutet, dass transiente Aktivierung erforderlich ist. Weitere Details finden Sie auf den einzelnen Methodenseiten.
Spezifikationen Browser-Kompatibilität api.MediaDevices.getDisplayMedia api.CropTarget api.RestrictionTarget Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4