Verbesserte Tab-Freigabe mit Region Capture

Die Webplattform ermöglicht einer Webanwendung bereits die Aufzeichnung eines Videotracks des aktuellen Tabs. Sie wird jetzt mit Region Capture geliefert, einer Funktion zum Zuschneiden dieser Videotracks. Die Web-App legt einen Teil des aktuellen Tabs als relevanten Bereich fest und der Browser schneidet alle Pixel außerhalb dieses Bereichs zu.

Bisher konnten Videotracks in Web-Apps „manuell“ zugeschnitten werden. Das heißt, sie konnten jeden einzelnen Frame direkt bearbeiten. Das war weder robust noch leistungsstark. Mit Region Capture werden diese Schwachstellen beseitigt. Die Webanwendung kann den Browser jetzt anweisen, die Arbeit für sie zu erledigen.

Regionserfassung

Sie haben eine Website mit Dynamic ContentTM erstellt. Es ist die bisher beste Web-App und die Leute können einfach nicht aufhören, sie zu nutzen, und zwar oft gemeinsam. Ein möglicher nächster Schritt besteht darin, Funktionen für virtuelle Konferenzen einzubetten. Sie entscheiden sich dafür. Sie arbeiten mit einem bestehenden Videokonferenzdienstanbieter zusammen und binden dessen Webanwendung als ursprungsübergreifenden iFrame ein. Die Web-App für Videokonferenzen erfasst den aktuellen Tab als Videotrack und überträgt ihn an andere Teilnehmer.

Nicht so schnell... Du möchtest ja nicht wirklich die eigenen Videos von Leuten zurück an sie übertragen, oder? Schneiden Sie diesen Teil am besten weg. Wie kann das gehen? Der eingebettete iFrame weiß nicht, welche Inhalte wo verfügbar sind, sodass er nicht ohne Hilfe zugeschnitten werden kann. Theoretisch können Sie auch die gewünschten Koordinaten übergeben. Aber was passiert, wenn Nutzende die Größe des Fensters ändern? Im Darstellungsbereich scrollen? Heran- oder herauszoomen? Interagiert so mit der Seite, dass das Layout geändert wird? Auch wenn Sie die neuen Koordinaten an den Erfassungs-iFrame senden, können Timing-Probleme zu falsch zugeschnittenen Frames führen.

Dann verwenden wir die Regionserfassung. Auf deiner 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, der durch den Begrenzungsrahmen dieses Elements definiert wird, per Fernzugriff erfasst und freigibt. Sie leiten also ein CropTarget von mainContentArea ab. Sie übergeben diese CropTarget an die Web-App für Videokonferenzen. Nachdem Sie den Videotrack mit diesem CropTarget zugeschnitten haben, bestehen die Frames in diesem Track jetzt nur aus den Pixeln, die in den Markierungsrahmen von mainContentArea fallen. Wenn sich die Größe, Form oder Position von mainContentArea ändert, folgt der Videotrack, ohne dass zusätzliche Eingaben über die Webanwendung erforderlich sind.

Lassen Sie uns diese Schritte noch einmal durchgehen:

Sie definieren ein 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 übergeben den CropTarget an die Web-App für Videokonferenzen.

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

Die Videokonferenz-Webanwendung fordert den Browser auf, den Track auf den durch CropTarget definierten Bereich zuzuschneiden. Dazu wird cropTo() für den Videotrack mit Selbstaufnahme mit dem Zuschneideziel, das von der Haupt-Web-App empfangen wird, aufgerufen.

// 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.

Und voilà! Fertig.

Im Detail

Funktionserkennung

Mit dem folgenden Befehl kannst du prüfen, ob CropTarget.fromElement() unterstützt wird:

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

Zuschneideziel ableiten

Konzentrieren wir uns auf das Element mainContentArea. Rufen Sie CropTarget.fromElement(mainContentArea) auf, um CropTarget daraus abzuleiten. Das zurückgegebene Promise wird bei Erfolg mit einem neuen CropTarget-Objekt aufgelöst. Andernfalls wird sie abgelehnt, wenn Sie eine unangemessene Anzahl von CropTarget-Objekten erstellt haben.

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

Im Gegensatz zu Element ist ein CropTarget-Objekt serialisierbar. Sie kann beispielsweise mithilfe von Window.postMessage() an ein anderes Dokument übergeben werden.

Zuschneiden

Bei der Tab-Erfassung wird der Videotrack als BrowserCaptureMediaStreamTrack instanziiert, das eine Unterklasse von MediaStreamTrack ist. Diese Unterklasse stellt cropTo() zur Verfügung. Rufen Sie track.cropTo(cropTarget) auf, um mit dem Zuschneiden auf die Konturen von mainContentArea zu beginnen (dem Element, von dem das Element cropTarget abgeleitet wurde).

Bei Erfolg wird das Versprechen aufgelöst, wenn garantiert werden kann, dass alle nachfolgenden Videoframes aus den Pixeln bestehen, die in den Markierungsrahmen von mainContentArea fallen.

Andernfalls wird das Versprechen abgelehnt. Dies geschieht in folgenden Fällen:

• Das CropTarget wurde auf einem anderen Tab erstellt. (Bis dahin – bleiben Sie dran.)
• CropTarget wurde von einem Element abgeleitet, das nicht mehr existiert.
• Der Titel enthält Klone. (Siehe Problem 1509418.)
• Der aktuelle Track ist kein Videotrack (siehe unten).

Die Methode cropTo() wird bei jedem Videotrack mit Tabs verwendet, nicht nur bei der Selbstaufnahme. Daher empfiehlt es sich zu prüfen, ob der Nutzer den aktuellen Tab ausgewählt hat, bevor du versuchst, den Track zuzuschneiden. Dazu kannst du den Alias aufnehmen. Sie können den Browser auch mit preferCurrentTab auffordern, den Nutzer zu einer Selbstaufnahme zu bewegen.

// 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);

Verdeckter und verdeckter Inhalt

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

Dies ist eine Folge von Region Capture, bei der es im Wesentlichen um das Zuschneiden geht. Eine Alternative, die eine eigene zukünftige API sein wird, ist die Erfassung auf Elementebene. Das bedeutet, dass unabhängig von Verdeckungen nur Pixel erfasst werden, die dem Ziel zugeordnet sind. Für eine solche API gelten andere Sicherheits- und Datenschutzanforderungen als das einfache Zuschneiden.

Sicherheit und Datenschutz

Mit Region Capture können Web-Apps, die bereits alle Pixel im Tab erfassen, freiwillig einige dieser Pixel entfernen. Es ist eindeutig sicher, da keine neuen Informationen gewonnen werden können.

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

Beachten Sie, dass bei der Regionserfassung keine Sicherheitsgarantien gelten. Wenn Sie einen Track an ein anderes Dokument übergeben, kann das empfangende Dokument dennoch den Zuschnitt rückgängig machen und Zugriff auf alle Pixel des erfassten Tabs erhalten.

Chrome zeichnet einen blauen Rahmen um die Ränder erfasster Tabs. Beim Zuschneiden zieht Chrome in der Regel den blauen Rahmen um das zugeschnittene Ziel.

Demo

Du kannst mit der Regionserfassung experimentieren, indem du die Demo auf Glitch ausführst. Sehen Sie sich unbedingt den Quellcode an.

Unterstützte Browser

Die Regionserfassung ist ab Chrome 104 nur auf Desktop-Computern verfügbar.

Nächste Schritte

Hier ist eine Vorschau darauf, was Sie in naher Zukunft erwarten können, um die Bildschirmfreigabe im Web zu verbessern:

• Region Capture unterstützt Aufnahmen anderer Tabs.
• Bedingter Fokus ermöglicht der Erfassungs-Web-App, den Browser anzuweisen, den Fokus entweder auf die erfasste Anzeigeoberfläche zu lenken oder eine solche Fokusänderung zu vermeiden.
• Möglicherweise wird eine Capture API auf Elementebene bereitgestellt.

Feedback

Das Chrome-Team und die Webstandards-Community möchten mehr über Ihre Erfahrungen mit Region Capture erfahren.

Erzählen Sie uns mehr über das Design

Gibt es bei Region Capture etwas, das nicht wie erwartet funktioniert? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

• Sie können ein Spezifikationsproblem im GitHub-Repository melden oder Ihre Meinung zu einem bereits bestehenden Problem hinzufügen.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler 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 und eine einfache Anleitung zum Reproduzieren an. Mit Glitch lassen sich schnell und einfach Reproduktionen durchführen.

Unterstützung zeigen

Möchten Sie Region Capture verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team bei der Priorisierung von Funktionen und zeigt anderen Browseranbietern, wie wichtig es ist, diese Funktionen zu unterstützen.

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

Nützliche Links

• Spezifikation
• Erklärung
• TAG-Überprüfung
• Chromium-Programmfehler
• ChromeStatus.com-Eintrag

Danksagungen

Vielen Dank an Joe Medley für die Rezension dieses Artikels.