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 aufnimmt, kann die Web-App für Videokonferenzen Steuerelemente für die Navigation zwischen den Folien anzeigen. Da die Steuerelemente direkt in die Web-App für Videokonferenzen eingebettet sind, müssen Nutzer nicht wiederholt zwischen dem Tab „Videokonferenzen“ und dem angezeigten Tab 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 Aufnahme-Handle besteht aus zwei ergänzenden Teilen:

Erfasste Web-Apps können mit navigator.mediaDevices.setCaptureHandleConfig() festlegen, dass bestimmte Informationen bestimmten Ursprüngen zur Verfügung gestellt 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 die Erfassung 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 er 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...
}

Sie können CaptureHandle-Änderungen überwachen, indem Sie "capturehandlechange"-Ereignisse auf einem MediaStreamTrack-Objekt erfassen. Ä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 Web-App die Zielgruppe auswählen – entweder die Herkunft 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 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.
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 von Ihnen wissen, welche Erfahrungen Sie mit Capture Handle gemacht haben.

Erzähl uns etwas über das Design

Funktioniert der Capture-Griff nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst? 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.

Probleme 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 den Capture-Handle verwenden? Ihr öffentlicher Support hilft dem Chrome-Team dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig ein Support für sie ist.

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.