Verbessertes Teilen von Tabs mit dem Capture-Ziehpunkt

Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

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.

Darstellung des Effekts „Spiegelsaal“

Ü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() zu MediaStreamTrack-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: Wenn true 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. Wenn permittedOrigins aus dem einzelnen Element "*" besteht, kann CaptureHandle von allen erfassenden Web-Apps beobachtet werden. Andernfalls können nur Web-Apps erfasst werden, deren Ursprung in permittedOrigins 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 mit navigator.mediaDevices.setCaptureHandleConfig() festgelegt wird.
  • origin: Der Ursprung der erfassten Web-App, wenn exposeOrigin auf true 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:

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.

Danksagungen

Vielen Dank an Joe Medley für die Rezension dieses Artikels.