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 manipuliert 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 eine Website mit Dynamic ContentTM erstellt. Es ist die beste Web-App aller Zeiten. Die Leute können einfach nicht aufhören, sie zu nutzen – oft in Zusammenarbeit. 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.

Nicht so schnell... Du möchtest doch eigentlich nicht die eigenen Videos anderer Nutzer 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? Selbst wenn Sie die neuen Koordinaten an den erfassenden iFrame senden, können Zeitprobleme dennoch zu falsch zugeschnittenen Frames führen.

Verwenden wir nun „Region Capture“. 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. Also leiten Sie ein CropTarget von mainContentArea ab. Sie übergeben diesen CropTarget an die Web-App für Videokonferenzen. Nachdem Sie den Videotrack mit CropTarget zugeschnitten haben, bestehen die Frames in diesem Track jetzt nur aus den Pixeln, die innerhalb des Begrenzungsrahmens von mainContentArea liegen. Wenn mainContentArea seine Größe, Form oder Position ändert, passt sich der Videotrack an, ohne dass in einer der beiden Web-Apps zusätzliche Eingaben erforderlich sind.

Gehen wir diese Schritte noch einmal durch:

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 Web-App für Videokonferenzen bittet den Browser, den Track auf den durch CropTarget definierten Bereich zuzuschneiden. Dazu wird cropTo() im selbst aufgenommenen Videotrack aufgerufen, wobei das Zuschneideziel von der Haupt-Web-App 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 mainContentArea. Wenn Sie daraus eine CropTarget ableiten möchten, rufen Sie CropTarget.fromElement(mainContentArea) auf. Das zurückgegebene Promise wird bei erfolgreicher Ausführung 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. Er kann beispielsweise mit Window.postMessage() an ein anderes Dokument übergeben werden.

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.

Bei Nichtbestehen wird das Promise abgelehnt. Das kann in folgenden Fällen passieren:

• Die CropTarget wurde in einem anderen Tab erstellt. (Vorerst, halten Sie sich auf dem Laufenden.)
• Die CropTarget wurde aus einem Element abgeleitet, das nicht mehr vorhanden ist.
• Der Track hat Klone. (Siehe Problem 1509418.)
• Der aktuelle Track ist kein von Ihnen selbst aufgenommener Videotrack (siehe unten).

Die Methode cropTo() wird in jedem Tab-Videotrack angezeigt, nicht nur für Selbstaufnahmen. Es empfiehlt sich daher, zu prüfen, ob der Nutzer den aktuellen Tab ausgewählt hat, bevor er versucht, den Titel zu zuschneiden. Das ist mit dem Erfassungs-Alias möglich. 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 als eigene zukünftige API dienen wird, ist die Erfassung auf Elementebene. Das heißt, dass nur Pixel erfasst werden, die dem Ziel zugeordnet sind, unabhängig von Verdeckungen. Für eine solche API gelten andere Sicherheits- und Datenschutzanforderungen als für das einfache Zuschneiden.

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.

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 einen blauen Rahmen um die Ränder der erfassten Tabs. Beim Zuschneiden zeichnet Chrome in der Regel einen blauen Rahmen um das zugeschnittene Ziel.

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

Die Funktion „Region Capture“ 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.
• Möglicherweise steht eine Capture API auf Elementebene zur Verfügung.

Feedback

Das Chrome-Team und die Webstandards-Community möchten gerne wissen, welche Erfahrungen Sie mit der Funktion „Region Capture“ 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 schnelle und einfache 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
• Erklärung
• TAG-Überprüfung
• Chromium-Fehler
• Eintrag in ChromeStatus.com

Danksagungen

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