Verbessertes Teilen von Tabs mit dem Capture-Ziehpunkt

François Beaufort
François Beaufort
GitHub
Elad Alon

Unterstützte Browser

  • Chrome: 102. <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: nicht unterstützt. <ph type="x-smartling-placeholder">

Die Webplattform wird jetzt mit Capture Handle ausgeliefert, einem Mechanismus, der die Zusammenarbeit zwischen Erfassung und Erfassung von Web-Apps unterstützt. Mit dem Capture Handle kann eine Aufnahme-Web-App die erfasste Web-App ergonomisch und sicher identifizieren. (Wenn die aufgezeichnete Webanwendung aktiviert wurde.)

Einige Beispiele veranschaulichen die Vorteile.

Beispiel 1:Wenn eine Web-App für Videokonferenzen eine Web-App für Präsentationen erfasst, kann diese Web-App Nutzern Steuerelemente zum Wechseln zwischen Folien zur Verfügung stellen. Da die Steuerelemente direkt in die Web-App für Videokonferenzen eingebettet sind, müssen Nutzer nicht wiederholt zwischen dem Tab für Videokonferenzen und dem angezeigten Tab wechseln. Dank dieser Belastung kann sich der Nutzer nun mehr auf die Präsentation konzentrieren.

Beispiel 2:Der Spiegelsaal Effekt tritt auf, wenn eine erfasste Oberfläche wieder zu dem aufgenommenen Ort zurückgerendert wird. Wenn sich der Nutzer für die Aufnahme des Tabs entscheidet, auf dem eine Videokonferenz stattfindet, und die Web-App für Videokonferenzen eine lokale Vorschau rendert, zeigt sich dieser gefürchtete Effekt. Mit dem Capture Handle kann die Selbstaufnahme erkannt und gemindert werden. z. B. weil die Webanwendung die lokale Vorschau unterdrückt.

Illustration des Hall of Spiegel-Effekts

Informationen zum Erfassungs-Alias

Der Aufnahmegriff besteht aus zwei sich ergänzenden Teilen:

  • Erfasste Web-Apps können mit navigator.mediaDevices.setCaptureHandleConfig() festlegen, dass bestimmte Informationen bestimmten Ursprüngen zur Verfügung gestellt werden.
  • Wenn Sie Web-Apps erfassen, können diese Informationen dann mit getCaptureHandle() für MediaStreamTrack-Objekte gelesen werden.

Aufgenommene Seite

Web-Apps können Informationen für die Erfassung von Web-Apps offenlegen. 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, ist der Ursprung der erfassten Web-App möglicherweise für die Erfassung von Web-Apps sichtbar.
  • permittedOrigins: Gültige Werte sind (i) ein leeres Array, (ii) ein Array mit dem einzelnen Element "*" oder (iii) ein Array mit Ursprüngen. Wenn „permittedOrigins“ aus dem einzelnen Element „"*"“ besteht, kann „CaptureHandle“ von allen erfassenden Web-Apps erfasst werden. Andernfalls können nur Web-Apps erfasst werden, deren Ursprung in permittedOrigins ist.

Das folgende Beispiel zeigt, wie eine zufällig generierte UUID als Handle und Ursprung für jede Erfassungs-Web-App freigegeben wird.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Beachten Sie, dass die erfasste Web-App nicht weiß, ob sie aufgenommen wurde. Sofern dies nicht der Fall ist, verwendet die erfassende Webanwendung CaptureHandle-Informationen, um die Kommunikation mit der erfassten Webanwendung herzustellen (z. B. per Messaging über einen Worker oder eine gemeinsam genutzte Cloud-Infrastruktur).

Aufnahmeseite

Die Web-App für die Aufnahme enthält ein Video-MediaStreamTrack und kann die Informationen zum Aufnahme-Handle lesen, indem sie getCaptureHandle() auf diesem MediaStreamTrack aufruft. Dieser Aufruf gibt null zurück, wenn kein Erfassungs-Handle verfügbar ist oder die erfassende Web-App ihn nicht lesen darf. Wenn ein Aufnahmegriff verfügbar ist und permittedOrigins die Erfassungs-Web-App hinzugefügt wird, wird bei diesem Aufruf ein Objekt mit den folgenden Elementen zurückgegeben:

  • handle: Der Stringwert, der von der erfassten Webanwendung mit navigator.mediaDevices.setCaptureHandleConfig() festgelegt wird.
  • origin: Der Ursprung der erfassten Webanwendung, wenn exposeOrigin auf true festgelegt wurde. Andernfalls ist er nicht definiert.

Das folgende Beispiel zeigt, wie die Handle-Informationen eines Videotracks gelesen werden können.

// 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...
}

Überwachen Sie CaptureHandle-Änderungen, indem Sie "capturehandlechange"-Ereignisse 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

Die Zusammenarbeit zwischen der Erfassung und Erfassung von Web-Apps ist heute theoretisch möglich, indem „magische Pixel“ eingebettet sind. entweder in der aufgezeichneten Web-App oder betten Sie QR-Codes in den Videostream ein. Der Erfassungs-Alias bietet einen einfacheren, zuverlässigeren und sichereren Mechanismus. Außerdem kann die erfasste Web-App die Zielgruppe auswählen – entweder die Herkunft oder das gesamte Web.

Beachten Sie, dass navigator.mediaDevices.setCaptureHandleConfig() nur für Hauptframes der obersten Ebene im sicheren Surfkontext (nur HTTPS) verfügbar ist.

Beispiel

Du kannst mit dem Capture Handle spielen, indem du das Beispiel in Glitch ausführst. Seien sollten Sie sich den Quellcode ansehen.

Demos

Einige Demos sind verfügbar unter:

Funktionserkennung

So prüfen Sie, ob getCaptureHandle() unterstützt wird:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

So prüfen Sie, ob navigator.mediaDevices.setCaptureHandleConfig() unterstützt wird:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Nächste Schritte

Hier ist ein kleiner Vorgeschmack darauf, was Sie in naher Zukunft erwartet, um die Bildschirmfreigabe im Web zu verbessern:

  • Region Capture ermöglicht das Zuschneiden eines Videotracks, das aus der Displayaufnahme des aktuellen Tabs abgeleitet wurde.
  • Bedingter Fokus ermöglicht der erfassenden Web-App, den Browser anzuweisen, entweder den Fokus auf die erfasste Anzeigeoberfläche zu verschieben oder eine solche Fokusänderung zu vermeiden.

Feedback

Das Chrome-Team und die Webstandards-Community möchten mehr über Ihre Erfahrungen mit Capture Handle erfahren.

Erzähl uns etwas über das Design

Gibt es etwas am Capture Handle, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

  • Reichen Sie ein Spezifikationsproblem im GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie den Fehler unter https://new.crbug.com. Gib so viele Details wie möglich und einfache Anweisungen zum Reproduzieren an. Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.

Support anzeigen

Möchtest du den Alias verwenden? Ihr öffentlicher Support hilft dem Chrome-Team dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig ein Support für sie ist.

Schicken Sie uns einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie Gemini verwenden.

Danksagungen

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