Verbessertes Teilen von Tabs mit dem Capture-Ziehpunkt

François Beaufort

Elad Alon

Die Webplattform wird jetzt mit Capture Handle ausgeliefert, einem Mechanismus, der die Zusammenarbeit zwischen erfassenden und erfassten Web-Apps erleichtert. Mit Capture Handle kann eine Web-App, die Inhalte aufzeichnet, die aufgezeichnete Web-App ergonomisch und zuverlässig identifizieren, sofern die aufgezeichnete Web-App dies zulässt.

Einige Beispiele veranschaulichen die Vorteile.

Beispiel 1:Wenn eine Web-App für Videokonferenzen eine Web-App für Präsentationen aufzeichnet, kann die Web-App für Videokonferenzen dem Nutzer Steuerelemente zum Navigieren 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 Videokonferenztab und dem präsentierten Tab wechseln. Da diese Belastung wegfällt, kann sich der Nutzer nun voll und ganz auf die Präsentation konzentrieren.

Beispiel 2:Der „Spiegelkabinett“-Effekt tritt auf, wenn eine erfasste Oberfläche an dem Ort gerendert wird, an dem sie erfasst wurde. Wenn der Nutzer den Tab aufzeichnet, auf dem ein Videokonferenzanruf stattfindet, und die Videokonferenz-Web-App eine lokale Vorschau rendert, ist dieser Effekt zu beobachten. Mit Capture Handle kann die Selbsterfassung erkannt und verhindert werden, z. B. indem die Web-App die lokale Vorschau unterdrückt.

Aufnahmegriff

Der Capture-Handle besteht aus zwei sich ergänzenden Teilen:

• Erfasste Web-Apps können bestimmte Informationen für einige Ursprünge mit navigator.mediaDevices.setCaptureHandleConfig() freigeben.
• Erfasste Web-Apps können diese Informationen dann mit getCaptureHandle() für MediaStreamTrack-Objekte lesen.

Aufgenommene Seite

Web-Apps können Informationen für andere Web-Apps bereitstellen. Dazu wird navigator.mediaDevices.setCaptureHandleConfig() mit einem optionalen Objekt aufgerufen, das die folgenden Elemente enthält:

• handle: Kann ein beliebiger String mit bis zu 1.024 Zeichen sein.
• exposeOrigin: Wenn true, kann der Ursprung der erfassten Web-App für erfassende Web-Apps sichtbar sein.
• 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 nur das Element "*" enthält, ist CaptureHandle für alle Web-Apps, die Daten erfassen, sichtbar. Andernfalls ist sie nur für Web-Apps sichtbar, die Daten erfassen und deren Ursprung in permittedOrigins liegt.

Im folgenden Beispiel wird gezeigt, wie eine zufällig generierte UUID als Handle und der Ursprung für jede erfassende Webanwendung verfügbar gemacht wird.

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

Die aufgenommene Web-App weiß nicht, dass sie aufgenommen wird. Es sei denn, die erfassende Web-App verwendet CaptureHandle-Informationen, um die Kommunikation mit der erfassten Web-App herzustellen (z. B. über Messaging über einen Worker oder eine gemeinsame Cloud-Infrastruktur).

Aufnahmeseite

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

• handle: Der Stringwert, der von der erfassten Web-App mit navigator.mediaDevices.setCaptureHandleConfig() festgelegt wurde.
• origin: Der Ursprung der erfassten Web-App, wenn exposeOrigin auf true festgelegt wurde. Andernfalls ist sie 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...
}

Sie können CaptureHandle-Änderungen überwachen, indem Sie auf einem MediaStreamTrack-Objekt auf "capturehandlechange"-Ereignisse warten. Änderungen erfolgen, wenn:

• Die erfassten Web-App-Aufrufe navigator.mediaDevices.setCaptureHandleConfig().
• In der erfassten Web-App findet eine dokumentübergreifende Navigation statt.

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

Sicherheit und Datenschutz

Die Zusammenarbeit zwischen der erfassenden und der erfassten Web-App ist theoretisch bereits heute möglich, indem beispielsweise „Magic Pixels“ in die erfasste Web-App eingebettet oder QR-Codes in den Videostream eingebettet werden. Capture Handle bietet einen einfacheren, zuverlässigeren und sichereren Mechanismus. Außerdem kann die Zielgruppe für die erfasste Web-App ausgewählt werden – entweder Ursprünge oder das gesamte Web.

navigator.mediaDevices.setCaptureHandleConfig() ist nur für Hauptframes der obersten Ebene in sicheren Browserkontexten (nur HTTPS) verfügbar.

Beispiel

Sie können die Funktion „Capture Handle“ ausprobieren, indem Sie das Beispiel ausführen.

Demos

Einige Demos sind unter folgenden Links verfügbar:

• Fernbedienung
• Erkennung von selbst aufgenommenen Inhalten

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 auf die Verbesserungen, die in naher Zukunft beim Bildschirmfreigeben im Web zu erwarten sind:

• Mit Region Capture kann ein Videotrack zugeschnitten werden, der aus der Bildschirmaufnahme des aktuellen Tabs stammt.
• Mit Conditional Focus kann die erfassende Web-App den Browser anweisen, den Fokus entweder auf die erfasste Displayoberfläche zu richten 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.

Informationen zum Design

Gibt es etwas, das bei Capture Handle nicht wie erwartet funktioniert? Oder fehlen Methoden oder Properties, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

• Melden Sie ein Spezifikationsproblem im GitHub-Repository oder fügen Sie einem vorhandenen Problem Ihre Gedanken hinzu.

Probleme bei der Implementierung?

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

• Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie so viele Details wie möglich an und fügen Sie eine einfache Anleitung zur Reproduktion hinzu.

Unterstützung zeigen

Planen Sie, die Funktion „Handle aufnehmen“ zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

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

Danksagungen

Vielen Dank an Joe Medley für die Überprüfung dieses Artikels.