Verbesserte Tab-Freigabe mit Region Capture

François Beaufort

Elad Alon

Die Webplattform ermöglicht es einer Webanwendung bereits, einen Videotrack des aktuellen Tabs aufzunehmen. Es ist jetzt mit der Funktion „Region Capture“ ausgestattet, mit der sich diese Videotracks zuschneiden lassen. Die Webanwendung weist einen Teil des aktuellen Tabs als Bereich von Interesse aus und der Browser schneidet alle Pixel außerhalb dieses Bereichs zu.

Bisher konnten Videotracks in Webanwendungen „manuell“ zugeschnitten werden. Das bedeutet, dass jeder einzelne Frame direkt bearbeitet werden konnte. Das war weder robust noch leistungsfähig. Mit der Funktion „Region Capture“ können Sie diese Mängel beheben. Die Webanwendung kann den Browser jetzt anweisen, die Arbeit in ihrem Namen auszuführen.

Region Capture

Sie haben also eine Website mit Dynamic Content™ erstellt. Es ist die beste Webanwendung aller Zeiten und die Nutzer können nicht genug davon bekommen – oft auch im Team. Ein möglicher nächster Schritt ist das Einbetten von Funktionen für virtuelle Konferenzen. Sie entscheiden sich dafür. Sie arbeiten mit einem bestehenden Anbieter von Videokonferenzdiensten zusammen und betten seine Webanwendung als plattformübergreifenden Iframe ein. Die Web-App für Videokonferenzen erfasst den aktuellen Tab als Videotrack und überträgt ihn an die Remote-Teilnehmer.

Der Hauptinhaltsbereich ist blau und der Cross-Origin-iFrame ist rot.

Nicht so schnell… Sie möchten doch nicht die eigenen Videos der Nutzer an sie zurücksenden, oder? Besser diesen Teil zuschneiden. Wie kann das gehen? Der eingebettete Iframe weiß nicht, welche Inhalte du wo zeigst, und kann daher nicht ohne Hilfe zugeschnitten werden. Theoretisch könnten Sie die gewünschten Koordinaten übergeben. Was passiert aber, wenn der Nutzer die Größe des Fensters ändert? Scrollt der Darstellungsbereich? Heran- oder herauszoomen? Interagieren sie mit der Seite, sodass sich das Layout ändert? Auch wenn Sie die neuen Koordinaten an den Aufnahme-Frame senden, können Timingprobleme zu unscharfen Frames führen.

Verwenden wir also die Funktion „Bereich erfassen“. Auf Ihrer Seite befindet sich ein Element, möglicherweise ein <div>, das den Hauptinhalt enthält. Nennen wir sie mainContentArea. Sie möchten, dass die Webanwendung für Videokonferenzen den Bereich erfasst und aus der Ferne teilt, der durch den Begrenzungsrahmen dieses Elements definiert ist. Sie leiten also CropTarget von mainContentArea ab. Sie übergeben diesen CropTarget an die Web-App für Videokonferenzen. Nachdem der Videotrack mit diesem CropTarget zugeschnitten wurde, bestehen die Frames in diesem Track nur noch aus den Pixeln, die sich innerhalb des Begrenzungsrahmens von mainContentArea befinden. Wenn sich mainContentArea ändert, also Größe, Form oder Position, passt sich der Videotrack an, ohne dass zusätzliche Eingaben in einer der beiden Web-Apps erforderlich sind.

Sehen wir uns diese Schritte noch einmal an:

Sie definieren eine CropTarget in Ihrer Webanwendung, indem Sie CropTarget.fromElement() mit dem Element Ihrer Wahl als Eingabe aufrufen.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Sie geben die CropTarget an die Webanwendung für Videokonferenzen weiter.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

Die Webanwendung für Videokonferenzen bittet den Browser, den Track auf den von CropTarget definierten Bereich zuzuschneiden. Dazu wird cropTo() auf dem Videotrack für die Selbstaufnahme mit dem Zuschneideziel aufgerufen, das von der Hauptwebanwendung empfangen wurde.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà! Fertig.

Im Detail

Funktionserkennung

So prüfen Sie, ob CropTarget.fromElement() unterstützt wird:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

CropTarget ableiten

Konzentrieren wir uns auf das Element namens mainContentArea. Wenn Sie daraus eine CropTarget ableiten möchten, rufen Sie CropTarget.fromElement(mainContentArea) auf. Das zurückgegebene Promise wird bei Erfolg mit einem neuen CropTarget-Objekt aufgelöst. Andernfalls wird es abgelehnt, wenn Sie eine unangemessen hohe Anzahl von CropTarget-Objekten erstellt haben.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Im Gegensatz zu einem Element ist ein CropTarget-Objekt serialisierbar. Sie können sie beispielsweise mit Window.postMessage() an ein anderes Dokument übergeben.

Hinweis:Vor Chrome 106 wurde CropTarget.fromElement(mainContentArea) abgelehnt, wenn der Typ für mainContentArea nicht <div> oder iframe war.

Zuschneiden

Bei der Tab-Aufzeichnung wird der Videotrack als BrowserCaptureMediaStreamTrack instanziiert, eine Unterklasse von MediaStreamTrack. Diese untergeordnete Klasse stellt cropTo() bereit. Rufen Sie track.cropTo(cropTarget) auf, um das Bild anhand der Konturen von mainContentArea (dem Element, aus dem „cropTarget“ abgeleitet wurde) zuzuschneiden.

Bei Erfolg wird die Zusicherung aufgelöst, wenn sichergestellt werden kann, dass alle nachfolgenden Videoframes aus den Pixeln bestehen, die sich innerhalb des Begrenzungsrahmens der mainContentArea befinden.

Andernfalls wird die Zusicherung abgelehnt. Das kann in folgenden Fällen passieren:

• Die CropTarget wurde in einem anderen Tab erstellt. (Mehr dazu demnächst.)
• Die CropTarget wurde aus einem Element abgeleitet, das nicht mehr vorhanden ist.
• Der Track hat Klone. (Siehe Problem 1509418.)
• Der aktuelle Track ist kein Videotrack mit selbst aufgenommenen Inhalten. Weitere Informationen finden Sie unten.

Die cropTo()-Methode ist für jeden Videotrack verfügbar, der mit der Tab-Aufnahme erstellt wurde, nicht nur für die Selbstaufzeichnung. Daher ist es ratsam, zu prüfen, ob der Nutzer den aktuellen Tab ausgewählt hat, bevor er versucht, den Titel zu zuschneiden. Dazu können Sie den Capture-Griff verwenden. Es ist auch möglich, den Browser zu bitten, den Nutzer mit preferCurrentTab zur Selbstaufnahme anzuregen.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Wenn Sie zum nicht zugeschnittenen Zustand zurückkehren möchten, rufen Sie cropTo() mit null auf.

// Stop cropping.
await track.cropTo(null);

Inhalte, die verdeckt sind, und verdeckte Inhalte

Bei der Regionserfassung sind nur die Position und Größe des Ziels wichtig, nicht der Z-Index. Pixel, die das Ziel verdecken, werden erfasst. Verdeckte Teile des Ziels werden nicht erfasst.

Das liegt daran, dass die Funktion „Region Capture“ im Grunde ein Zuschneiden ist. Eine Alternative, die in Zukunft eine eigene API sein wird, ist die Aufnahme auf Elementebene. Dabei werden nur Pixel erfasst, die mit dem Ziel verknüpft sind, unabhängig von Verdeckungen. Für eine solche API gelten andere Sicherheits- und Datenschutzanforderungen als für das einfache Zuschneiden.

Verhalten der Regionsaufnahme bei verdeckten Inhalten.

Sicherheit und Datenschutz

Mit der Regionserfassung kann eine Webanwendung, die bereits alle Pixel auf dem Tab beobachtet, einige dieser Pixel freiwillig entfernen. Sie ist offensichtlich sicher, da keine neuen Informationen gewonnen werden können.

Mit der Funktion „Region Capture“ können Sie einschränken, welche Informationen an Remote-Teilnehmer gesendet werden. Vielleicht möchten Sie beispielsweise einige Folien, aber nicht Ihre Sprechernotizen teilen.

Eine Webanwendung mit Folien und Sprechernotizen.
Die Notizen per Fernzugriff freizugeben, ist äußerst unerwünscht. Cue Region Capture

Lokal bietet die Region Capture-Funktion keine Sicherheitsgarantien. Wenn Sie einen Track an ein anderes Dokument übergeben, kann das empfangende Dokument den Track wieder zuschneiden und auf alle Pixel des aufgenommenen Tabs zugreifen.

Chrome zeichnet um die Ränder der erfassten Tabs einen blauen Rahmen. Beim Zuschneiden wird in Chrome in der Regel ein blauer Rahmen um das zugeschnittene Ziel gezogen.

Demo

Sie können die Funktion „Region Capture“ ausprobieren, indem Sie die Demo auf Glitch ausführen. Sehen Sie sich den Quellcode an.

Unterstützte Browser

Unterstützte Browser

• 104
• 104
• x
• x

Die Regionsaufnahme ist ab Chrome 104 nur auf dem Computer verfügbar.

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:

• Die Funktion „Region Capture“ unterstützt auch die Erfassung anderer Tabs.
• Mit der Funktion Bedingter Fokus kann die Web-App, die die Aufnahme ausführt, den Browser anweisen, den Fokus entweder auf die erfasste Displayoberfläche zu legen oder eine solche Fokusänderung zu vermeiden.
• Es kann eine Capture API auf Elementebene bereitgestellt werden.

Feedback

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

Designbeschreibung

Funktioniert die Funktion „Region Capture“ 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öchten Sie die Funktion „Region Capture“ 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

• Spezifikation
• Erläuterung
• TAG-Überprüfung
• Chromium-Fehler
• Eintrag in ChromeStatus.com

Danksagungen

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