Verbesserte Tab-Freigabe mit Region Capture

François Beaufort
François Beaufort
GitHub
Elad Alon

Die Webplattform ermöglicht es einer Web-App bereits, einen Videotrack des aktuellen Tabs zu erfassen. Im Lieferumfang enthalten ist jetzt Region Capture, ein Mechanismus zum Zuschneiden dieser Videotracks. Die Webanwendung 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, Web-Apps könnten jeden einzelnen Frame direkt manipulieren. Das war weder zuverlässig noch leistungsstark. Region Capture behebt diese Mängel. Die Webanwendung kann den Browser nun anweisen, die Arbeit für ihn auszuführen.

Regionserfassung

Sie haben also eine Website mit Dynamic ContentTM erstellt. Es ist die beste Web-App aller Zeiten und die Leute können einfach nicht aufhören, sie zu verwenden – oft in Zusammenarbeit. 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 die Teilnehmer an anderen Standorten.

<ph type="x-smartling-placeholder">
</ph> Screenshot eines Browserfensters mit einer Webanwendung, in der der Hauptinhaltsbereich und der ursprungsübergreifende iFrame hervorgehoben werden <ph type="x-smartling-placeholder">
</ph> Der Hauptinhaltsbereich ist blau und der ursprungsübergreifende iFrame rot.

Nicht so schnell... Du möchtest doch eigentlich nicht die eigenen Videos anderer Nutzer zurücksenden, oder? Schneide diesen Teil besser weg. Wie kann das gehen? Der eingebettete iFrame weiß nicht, welche Inhalte wo preisgegeben werden. Daher kann er ohne Hilfe nicht zugeschnitten werden. Sie könnten theoretisch die vorgesehenen Koordinaten übergeben. Aber was passiert, wenn der Nutzer die Größe des Fensters ändert? Durch den Darstellungsbereich scrollen? Heran- oder herauszoomen? Interagiert so mit der Seite, dass eine Layoutänderung erzeugt wird? 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, vielleicht eine <div>, die den Hauptinhalt enthält. Nennen wir sie mainContentArea. Sie möchten, dass die Web-App für Videokonferenzen den Bereich, der durch den Begrenzungsrahmen dieses Elements definiert wird, remote erfasst und freigegeben. Also leiten Sie ein CropTarget von mainContentArea ab. Sie übergeben diesen CropTarget an die Webanwendung für Videokonferenzen. Nachdem der Videotrack mit CropTarget zugeschnitten wurde, bestehen die Frames auf diesem Track jetzt nur aus den Pixeln innerhalb des Markierungsrahmens von mainContentArea. Wenn sich mainContentArea an Größe, Form oder Position ändert, folgt der Videotrack mit, ohne dass zusätzliche Eingaben über eine der Web-Apps erforderlich sind.

Gehen wir diese Schritte noch einmal durch:

Um eine CropTarget in Ihrer Webanwendung zu definieren, rufen Sie CropTarget.fromElement() mit einem Element Ihrer Wahl als Eingabe auf.

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

Sie übergeben die CropTarget an die Webanwendung für Videokonferenzen.

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

Und 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.
}

Ableiten eines Ernteziels

Konzentrieren wir uns auf das Element mainContentArea. Um ein CropTarget daraus abzuleiten, rufen Sie CropTarget.fromElement(mainContentArea) auf. Das zurückgegebene Promise wird bei erfolgreicher Ausführung 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. Er kann beispielsweise mit Window.postMessage() an ein anderes Dokument übergeben werden.

Zuschneiden

Beim Erstellen von Tabs wird der Videotrack als BrowserCaptureMediaStreamTrack instanziiert. Dies ist eine abgeleitete Klasse von MediaStreamTrack. Diese abgeleitete Klasse macht cropTo() verfügbar. Rufen Sie track.cropTo(cropTarget) auf, um mit dem Zuschneiden auf die Konturen von mainContentArea zu beginnen (dem Element, von dem cropTarget abgeleitet wurde).

Bei Erfolg wird das Promise aufgelöst, wenn sichergestellt ist, dass alle nachfolgenden Videoframes aus den Pixeln im Begrenzungsrahmen des mainContentArea-Elements bestehen.

Bei Nichtbestehen wird das Promise abgelehnt. Dies geschieht in folgenden Fällen:

  • CropTarget wurde in einem anderen Tab erstellt. (Vorerst, halten Sie sich auf dem Laufenden.)
  • CropTarget wurde von einem Element abgeleitet, das nicht mehr vorhanden ist.
  • Der Titel enthält Klone. (Weitere Informationen finden Sie unter Problem 1509418.)
  • Der aktuelle Track ist kein von Ihnen aufgenommener Videotrack. siehe unten.

Die Methode cropTo() wird in jedem Track, auf dem ein Tab aufgezeichnet wird, angezeigt und nicht nur zum Aufnehmen von Videos selbst. Sie sollten daher überprüfen, ob der Nutzer den aktuellen Tab ausgewählt hat, bevor Sie den Track zuschneiden. Das ist mit dem Erfassungs-Alias möglich. Sie können den Browser auch bitten, den Nutzer mit preferCurrentTab zur Selbstaufnahme anzuregen.

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

Wenn Sie den nicht zugeschnittenen Zustand wiederherstellen möchten, rufen Sie cropTo() mit null auf.

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

Verdeckte und verdeckte Inhalte

Bei Region Capture gelten nur die Position und Größe des Ziels, nicht der z-index. Pixel, die das Ziel verdecken, werden erfasst. Verdeckte Teile des Ziels werden nicht erfasst.

Dies ist eine Folge davon, dass Region Capture im Grunde genommen wird. Eine Alternative, die eine eigene zukünftige API sein wird, ist die Erfassung auf Elementebene. also nur Pixel erfassen, 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.

<ph type="x-smartling-placeholder">
</ph> Bild der verschiedenen Ergebnisse für Region Capture und Capture API auf Elementebene. <ph type="x-smartling-placeholder">
</ph> Region Capture-Verhalten bei verdecktem Inhalt

Sicherheit und Datenschutz

Mit Region Capture kann eine Web-App, die bereits alle Pixel auf dem Tab erfasst, freiwillig einige dieser Pixel entfernen. Sie ist absolut sicher, da keine neuen Informationen gewonnen werden können.

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

<ph type="x-smartling-placeholder">
</ph> Screenshot eines Browserfensters mit Folien und Vortragsnotizen <ph type="x-smartling-placeholder">
</ph> Eine Web-App mit Folien und Vortragsnotizen.
Es wird dringend gewünscht, Notizen aus der Ferne zu teilen. Cue-Regionserfassung.

Beachten Sie, dass Region Capture lokal keine Sicherheitsgarantien bietet. Wenn Sie einen Track an ein anderes Dokument übergeben, kann das Dokument trotzdem den Zuschnitt rückgängig machen und Zugriff auf alle Pixel des erfassten Tabs erhalten.

Chrome zeichnet an den Rändern der aufgenommenen Tabs einen blauen Rahmen. Beim Zuschneiden zeichnet Chrome in der Regel einen blauen Rahmen um das zugeschnittene Ziel.

Demo

Du kannst Region Capture testen, indem du die Demo auf Glitch ausführst. Seien sollten Sie sich den Quellcode ansehen.

Unterstützte Browser

Unterstützte Browser

  • Chrome: 104 <ph type="x-smartling-placeholder">
  • Edge: 104. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: nicht unterstützt. <ph type="x-smartling-placeholder">

Regionserfassung ist nur in Chrome 104 auf Computern verfügbar.

Nächste Schritte

Hier ist ein kleiner Vorgeschmack darauf, was Sie in naher Zukunft erwartet, um die Bildschirmfreigabe im Web zu verbessern:

  • Die Regionserfassung unterstützt die Aufnahme anderer Tabs.
  • Mit dem bedingten Fokus kann die Web-App für die Aufnahme den Browser anweisen, den Fokus entweder auf die erfasste Anzeigeoberfläche zu verschieben 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 mehr über Ihre Erfahrungen mit Region Capture erfahren.

Erzähl uns etwas über das Design

Gibt es etwas an der Regionserfassung, 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?

  • Reichen Sie ein Spezifikationsproblem im GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab?

  • Melden Sie den Fehler unter https://new.crbug.com. Gib so viele Details wie möglich und einfache Anweisungen zum Reproduzieren an. Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.

Support anzeigen

Möchtest du Region Capture verwenden? Ihr öffentlicher Support hilft dem Chrome-Team dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig ein Support für sie ist.

Schicken Sie uns einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie Gemini verwenden.

Danksagungen

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