Verbessertes Teilen von Tabs mit dem Capture-Ziehpunkt

Die Webplattform wird jetzt mit Capture Handle ausgeliefert, einem Mechanismus, der die Zusammenarbeit zwischen Erfassung und Erfassung von Web-Apps unterstützt. Mit einem Alias kann eine Aufnahme-Web-App die erfasste Web-App ergonomisch und sicher identifizieren, sofern sie für die aufgezeichnete Web-App 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, muss der 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 Fläche zurück an den Aufnahmeort gerendert 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. indem die Web-App die lokale Vorschau unterdrückt.

Informationen zum Erfassungs-Alias

Der Aufnahmegriff besteht aus zwei sich ergänzenden Teilen:

• Mit navigator.mediaDevices.setCaptureHandleConfig() können erfasste Web-Apps 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:

• Die erfasste Webanwendung ruft navigator.mediaDevices.setCaptureHandleConfig() auf.
• In der erfassten Webanwendung erfolgt eine dokumentübergreifende Navigation.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Sicherheit und Datenschutz

Die Zusammenarbeit zwischen der Erfassung und der Aufnahme von Web-Apps ist heute theoretisch möglich, indem beispielsweise „magische Pixel“ in die erfasste Web-App oder beispielsweise QR-Codes in den Videostream eingebettet werden. 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. Sehen Sie sich unbedingt den Quellcode an.

Demos

Einige Demos sind verfügbar unter:

• Fernbedienung
• Selbstaufnahmeerkennung

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?

• Melde den Fehler unter https://new.crbug.com. Gib dabei so viele Details wie möglich und eine einfache Anleitung für die Reproduktion 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.

Nützliche Links

• Spezifikation
• Erklärung
• TAG-Überprüfung
• Chromium-Fehler
• ChromeStatus.com-Eintrag

Danksagungen

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