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
Unterstützte Browser
- 104
- 104
- x
- x
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
Danksagungen
Vielen Dank an Joe Medley für die Rezension dieses Artikels.