Unterstützte Browser
- 102
- 102
- x
- x
Die Webplattform wird jetzt mit Capture Handle ausgeliefert, einem Mechanismus, der die Zusammenarbeit zwischen Web-Apps und Apps erleichtert. Mit dem Aufnahmegriff kann eine Web-App beim Aufzeichnen ergonomisch und sicher die Web-App identifizieren (sofern die Web-App für Aufnahmen entsprechend aktiviert wurde).
Die Vorteile werden anhand einiger Beispiele verdeutlicht.
Beispiel 1:Wenn eine Web-App für Videokonferenzen eine Präsentations-Web-App aufzeichnet, können darin Steuerelemente für den Nutzer zur Navigation zwischen den Folien eingeblendet werden. Da die Steuerelemente direkt in die Web-App für Videokonferenzen eingebettet sind, muss der Nutzer nicht immer wieder zwischen dem Tab „Videokonferenzen“ und dem angezeigten Tab wechseln. Da diese Last entlastet wurde, können sich die Nutzenden jetzt ganz auf ihre Präsentation konzentrieren.
Beispiel 2:Der Effekt „Spiegelsaal“ tritt auf, wenn eine aufgenommene Oberfläche wieder an den aufgenommenen Ort übertragen wird. Wenn der Nutzer beispielsweise den Tab erfasst, auf dem eine Videokonferenz stattfindet, und die Videokonferenz-Web-App eine lokale Vorschau rendert, zeigt sich dieser gefürchtete Effekt. Mithilfe des Capture-Handles kann eine Selbstaufnahme erkannt und abgemildert werden, z. B. dadurch, dass die Webanwendung die lokale Vorschau unterdrückt.
Über den Aufnahmegriff
Der Erfassungsgriff besteht aus zwei komplementären Teilen:
- Für erfasste Web-Apps können optional bestimmte Informationen mit
navigator.mediaDevices.setCaptureHandleConfig()
für einige Ursprünge preisgegeben werden. - Wenn Web-Apps erfasst werden, können diese Informationen dann mit
getCaptureHandle()
zuMediaStreamTrack
-Objekten gelesen werden.
Seite mit aufgenommen
Web-Apps können Daten für diejenigen Web-Apps freigeben, die aufgenommen werden sollen. Dazu wird navigator.mediaDevices.setCaptureHandleConfig()
mit einem optionalen Objekt aufgerufen, das aus diesen Mitgliedern besteht:
handle
: Kann ein beliebiger String mit bis zu 1.024 Zeichen sein.exposeOrigin
: Wenntrue
festgelegt ist, kann der Ursprung der erfassten Web-App unter Umständen der Erfassung von Web-Apps ausgesetzt sein.permittedOrigins
: Gültige Werte sind (i) ein leeres Array, (ii) ein Array mit dem einzelnen Element"*"
oder (iii) ein Array von Ursprüngen. WennpermittedOrigins
aus dem einzelnen Element"*"
besteht, kannCaptureHandle
von allen erfassenden Web-Apps beobachtet werden. Andernfalls können nur Web-Apps erfasst werden, deren Ursprung inpermittedOrigins
liegt.
Das folgende Beispiel zeigt, wie eine zufällig generierte UUID als Handle und der Ursprung für eine beliebige erfassende Web-App verfügbar gemacht wird.
const config = {
handle: crypto.randomUUID(),
exposeOrigin: true,
permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);
Beachten Sie, dass die Web-App nicht weiß, ob sie aufgenommen wird. Sofern dies nicht der Fall ist, verwendet die erfassende Webanwendung CaptureHandle
-Informationen, um die Kommunikation mit der erfassten Webanwendung herzustellen (z. B. über Messaging über einen Worker oder eine gemeinsam genutzte Cloud-Infrastruktur).
Aufnahmeseite
Die Aufnahme-Web-App enthält ein Video-MediaStreamTrack
und kann die Informationen zum Aufnahme-Handle lesen, indem getCaptureHandle()
auf diesem MediaStreamTrack
aufgerufen wird. Dieser Aufruf gibt null
zurück, wenn kein Erfassungs-Handle verfügbar ist oder wenn die Web-App für die Datenerfassung den Datenabruf nicht lesen darf. Wenn ein Erfassungs-Handle verfügbar ist und die Erfassungs-Web-App zu permittedOrigins
hinzugefügt wird, gibt dieser Aufruf ein Objekt mit den folgenden Mitgliedern zurück:
handle
: Der Stringwert, der von der erfassten Web-App mitnavigator.mediaDevices.setCaptureHandleConfig()
festgelegt wird.origin
: Der Ursprung der erfassten Web-App, wennexposeOrigin
auftrue
festgelegt wurde. Andernfalls ist er nicht definiert.
Das folgende Beispiel zeigt, wie die Informationen zum Erfassungs-Handle aus einem Videotrack gelesen werden.
// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();
// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
// Use captureHandle.origin and captureHandle.handle...
}
CaptureHandle
-Änderungen durch Überwachung von "capturehandlechange"
-Ereignissen für ein MediaStreamTrack
-Objekt überwachen Änderungen treten in folgenden Fällen auf:
- Die erfasste Web-App ruft
navigator.mediaDevices.setCaptureHandleConfig()
auf. - In der erfassten Web-App erfolgt eine dokumentübergreifende Navigation.
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
Sicherheit und Datenschutz
Eine Zusammenarbeit zwischen der Erfassung und der Aufnahme von Webanwendungen ist heute theoretisch möglich, indem beispielsweise "magische Pixel" in die aufgenommene Web-App oder QR-Codes in den Videostream eingebettet werden. Capture Handle bietet einen einfacheren, zuverlässigeren und sichereren Mechanismus. Außerdem kann die erfasste Web-App die Zielgruppe auswählen, also entweder die Ursprünge oder das gesamte Web auswählen.
Beachte, dass navigator.mediaDevices.setCaptureHandleConfig()
nur für Hauptframes der obersten Ebene im sicheren Browserkontext (nur HTTPS) verfügbar ist.
Beispiel
Du kannst mit Capture Handle spielen, indem du das Beispiel auf Glitch ausführst. Sehen Sie sich unbedingt den Quellcode an.
Demos
Einige Demos finden Sie unter:
Funktionserkennung
Mit dem folgenden Befehl kannst du prüfen, ob getCaptureHandle()
unterstützt wird:
if ('getCaptureHandle' in MediaStreamTrack.prototype) {
// getCaptureHandle() is supported.
}
Mit dem folgenden Befehl kannst du prüfen, ob navigator.mediaDevices.setCaptureHandleConfig()
unterstützt wird:
if ('setCaptureHandleConfig' in navigator.mediaDevices) {
// navigator.mediaDevices.setCaptureHandleConfig() is supported.
}
Nächste Schritte
Hier ist eine Vorschau darauf, was Sie in naher Zukunft erwarten können, um die Bildschirmfreigabe im Web zu verbessern:
- Mit Region Capture kann ein Videotrack aus der Displayaufnahme des aktuellen Tabs zugeschnitten werden.
- Bedingter Fokus ermöglicht der Erfassungs-Web-App, den Browser anzuweisen, den Fokus entweder auf die erfasste Anzeigeoberfläche zu lenken oder eine solche Fokusänderung zu vermeiden.
Feedback
Das Chrome-Team und die Web-Standards-Community würden gerne mehr über deine Erfahrungen mit Capture Handle erfahren.
Erzählen Sie uns mehr über das Design
Gibt es irgendetwas an der Aufnahme des Alias, das nicht so funktioniert, wie du es erwartet hast? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?
- Sie können ein Spezifikationsproblem im GitHub-Repository melden oder Ihre Meinung zu einem bereits bestehenden Problem hinzufügen.
Probleme bei der Implementierung?
Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?
- Melden Sie den Fehler unter https://new.crbug.com. Geben Sie dabei so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Mit Glitch lassen sich schnell und einfach Reproduktionen durchführen.
Unterstützung zeigen
Möchtest du den Alias verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team bei der Priorisierung von Funktionen und zeigt anderen Browseranbietern, wie wichtig es ist, diese Funktionen zu unterstützen.
Senden Sie einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie sie verwenden.
Nützliche Links
Danksagungen
Vielen Dank an Joe Medley für die Rezension dieses Artikels.