Diese Seite wurde von der Cloud Translation API übersetzt.

Verbessertes Teilen von Tabs mit dem Capture-Ziehpunkt

François Beaufort

Elad Alon

Unterstützte Browser

Die Webplattform ist jetzt mit Capture Handle ausgestattet, einem Mechanismus, der die Zusammenarbeit zwischen erfassten und erfassenden Webanwendungen unterstützt. Mit dem Capture-Handle kann eine Web-App, die erfasst wird, ergonomisch und zuverlässig identifiziert werden (sofern die erfasste Web-App die Funktion aktiviert hat).

Einige Beispiele veranschaulichen die Vorteile.

Beispiel 1:Wenn eine Web-App für Videokonferenzen eine Präsentations-Web-App erfasst, kann die Web-App für Videokonferenzen Steuerelemente für die Navigation zwischen den Folien anzeigen. Da die Steuerelemente direkt in die Web-Anwendung für Videokonferenzen eingebettet sind, muss der Nutzer nicht wiederholt zwischen dem Tab für Videokonferenzen und dem Tab für die Präsentation wechseln. So kann er sich jetzt ganz auf die Präsentation konzentrieren.

Beispiel 2:Der Spiegelsaaleffekt tritt auf, wenn eine erfasste Oberfläche an den Ort zurückgerendert wird, an dem sie erfasst wurde. Insbesondere wenn der Nutzer den Tab aufnimmt, auf dem eine Videokonferenz stattfindet, und die Web-App für Videokonferenzen eine lokale Vorschau rendert, tritt dieser gefürchtete Effekt auf. Mit dem Capture-Handle kann die Aufnahme von selbst aufgenommenen Inhalten erkannt und verhindert werden, z. B. indem die lokale Vorschau in der Webanwendung unterdrückt wird.

Abbildung des Kaleidoskopeffekts

Alias für Aufnahmen

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

Bei erfassten Webanwendungen kann mit navigator.mediaDevices.setCaptureHandleConfig() festgelegt werden, dass bestimmte Informationen für einige Ursprünge freigegeben werden.
Web-Apps, die Daten erfassen, können diese Informationen dann mit getCaptureHandle() auf MediaStreamTrack-Objekten lesen.

Erfasste Seite

Webanwendungen können Informationen für andere Webanwendungen freigeben, die Daten abfangen möchten. Dazu wird navigator.mediaDevices.setCaptureHandleConfig() mit einem optionalen Objekt aufgerufen, das aus den folgenden Mitgliedern besteht:

handle: Kann beliebiger String mit bis zu 1.024 Zeichen sein.
exposeOrigin: Wenn true, ist der Ursprung der erfassten Webanwendung möglicherweise anfällig für das Erfassen von Webanwendungen.
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 Web-Apps erfasst werden, die Daten erfassen. Andernfalls ist es nur für die Erfassung von Webanwendungen sichtbar, deren Ursprung in permittedOrigins liegt.

Im folgenden Beispiel wird gezeigt, wie eine zufällig generierte UUID als Handle und Ursprung für eine beliebige Webanwendung zur Erfassung freigegeben wird.

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

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

Seite der Aufnahme

Die Webanwendung für die Aufnahme enthält ein Video MediaStreamTrack und kann die Informationen zum Aufnahme-Handle lesen, indem getCaptureHandle() auf diese MediaStreamTrack aufgerufen wird. Dieser Aufruf gibt null zurück, wenn kein Aufnahme-Handle verfügbar ist oder die Web-App, die die Aufnahme ausführt, nicht berechtigt ist, ihn zu lesen. Wenn ein Aufnahme-Handle verfügbar ist und die aufnehmende Webanwendung permittedOrigins hinzugefügt wurde, gibt dieser Aufruf ein Objekt mit den folgenden Mitgliedern zurück:

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

Im folgenden Beispiel wird gezeigt, wie die Informationen zum Aufnahme-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 überwachen, 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 aufgezeichneten Webanwendung 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 App, die erfasst wird, und der App, die die Erfassung ausführt, ist heute theoretisch möglich. Dazu können beispielsweise „magische Pixel“ in die erfasste Webanwendung oder QR-Codes in den Videostream eingebettet werden. Der Capture-Handle bietet einen einfacheren, zuverlässigeren und sichereren Mechanismus. Außerdem kann die erfasste Webanwendung die Zielgruppe auswählen – entweder ausgewählte Ursprünge oder das gesamte Web.

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

Beispiel

Du kannst mit dem Capture-Handle experimentieren, indem du das Beispiel auf Glitch ausführst. Sehen Sie sich den Quellcode an.

Demos

Einige Demos sind unter folgenden Links verfügbar:

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 schon mal ein kleiner Vorgeschmack auf die Verbesserungen, die wir in naher Zukunft für die Bildschirmfreigabe im Web planen:

Mit der Region Capture-Funktion können Sie einen Videotrack zuschneiden, der aus der Bildschirmaufnahme des aktuellen Tabs abgeleitet wurde.
Mit dem Bedingten Fokus kann die App, die die Aufnahme ausführt, den Browser anweisen, den Fokus entweder auf die erfasste Displayfläche zu legen oder eine solche Fokusänderung zu vermeiden.

Feedback

Das Chrome-Team und die Webstandards-Community möchten von Ihnen wissen, welche Erfahrungen Sie mit Capture Handle gemacht haben.

Designbeschreibung

Funktioniert der Capture-Griff nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell?

Melden Sie ein Problem mit der Spezifikation im GitHub-Repository oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem bei der Implementierung?

Haben Sie einen Fehler in der Chrome-Implementierung 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 an und machen Sie eine einfache Anleitung zur Reproduktion. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung zeigen

Möchtest du Capture Handle 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 uns einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie es verwenden.

Nützliche Links

Danksagungen

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