Datenschutzfreundliche Einstellungen für die Bildschirmfreigabe

Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

Das Teilen von Tabs, Fenstern und Bildschirmen ist auf der Webplattform bereits mit der Screen Capture API möglich. Mit getDisplayMedia() kann der Nutzer einen Bildschirm oder einen Teil des Bildschirms (z. B. ein Fenster) auswählen, um ihn als Medienstream aufzunehmen. Dieser Stream kann dann aufgezeichnet oder mit anderen über das Netzwerk geteilt werden. In diesem Artikel werden einige aktuelle Änderungen an der API vorgestellt, um den Datenschutz besser zu wahren und die versehentliche Freigabe personenbezogener Daten zu verhindern.

Im Folgenden finden Sie eine Liste der Einstellungen, die Sie für die datenschutzfreundliche Bildschirmfreigabe verwenden können:

  • Mit der Option displaySurface kann angegeben werden, dass die Web-App einen bestimmten Anzeigeoberflächentyp (Tabs, Fenster oder Bildschirme) bevorzugt.
  • Mit der Option monitorTypeSurfaces kann verhindert werden, dass der Nutzer einen ganzen Bildschirm freigibt.
  • Die Option surfaceSwitching gibt an, ob Chrome dem Nutzer erlauben soll, dynamisch zwischen freigegebenen Tabs zu wechseln.
  • Mit der Option „selfBrowserSurface“ kann verhindert werden, dass der Nutzer den aktuellen Tab teilt. Dadurch wird der „Spiegelsaal“-Effekt vermieden.
  • Mit der Option „systemAudio“ wird sichergestellt, dass dem Nutzer in Chrome nur relevante Audioaufnahmen angeboten werden.

Änderungen an getDisplayMedia()

An getDisplayMedia() wurden die folgenden Änderungen vorgenommen.

Die Option displaySurface

Web-Apps mit speziellen User Journeys, die sich am besten für die gemeinsame Nutzung eines Fensters oder eines Bildschirms eignen, können Chrome weiterhin auffordern, Fenster oder Bildschirme stärker in der Medienauswahl anzuzeigen. Die Reihenfolge des Angebots bleibt unverändert, aber der relevante Bereich ist bereits ausgewählt.

Die Werte für die Option displaySurface sind:

  • "browser" für Tabs.
  • "window" für Windows.
  • "monitor" für Bildschirme.
const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});
Screenshot der Media-Auswahl mit den vorausgewählten
Der Bereich „Fenster“ ist in der Mediaauswahl vorab ausgewählt.

Es gibt keine Möglichkeit, ein bestimmtes Fenster oder einen bestimmten Bildschirm vorab auszuwählen. Dies ist bewusst so konzipiert, da dies der Webanwendung zu viel Kontrolle über die Nutzenden geben würde.

Die Option monitorTypeSurfaces

Um Unternehmen vor dem Verlust privater Daten durch Mitarbeiterfehler zu schützen, können Videokonferenz-Web-Apps jetzt monitorTypeSurfaces auf "exclude" setzen. In Chrome werden dann Bildschirme in der Medienauswahl ausgeschlossen. Wenn Sie sie einschließen möchten, legen Sie dafür "include" fest. Derzeit ist der Standardwert für monitorTypeSurfaces "include". Wir empfehlen jedoch, ihn explizit festzulegen, da sich der Standardwert in Zukunft ändern kann.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});
Screenshot der Media-Auswahl ohne
Der Bereich „Ganzer Bildschirm“ ist in der Medienauswahl nicht sichtbar.

Ein expliziter monitorTypeSurfaces: "exclude" und displaySurface: "monitor" schließen sich gegenseitig aus.

Die Option surfaceSwitching

Einer der am häufigsten zitierten Gründe für die gemeinsame Nutzung des gesamten Bildschirms ist der Wunsch, während einer Sitzung nahtlos zwischen verschiedenen geteilten Oberflächen zu wechseln. Deshalb blendet Chrome jetzt eine Schaltfläche ein, mit der Nutzer dynamisch zwischen verschiedenen geteilten Tabs wechseln können. Die Schaltfläche „Stattdessen Tab teilen“ war bisher für Chrome-Erweiterungen verfügbar und kann jetzt in allen Web-Apps verwendet werden, die getDisplayMedia() aufrufen.

Screenshot der Schaltfläche, mit der dynamisch zwischen verschiedenen Tabs gewechselt werden kann
Die Schaltfläche „Stattdessen Tab teilen“ in Chrome.

Wenn surfaceSwitching auf "include" gesetzt ist, wird diese Schaltfläche im Browser eingeblendet. Wenn "exclude" festgelegt ist, wird dem Nutzer diese Schaltfläche nicht angezeigt. Es wird empfohlen, für Webanwendungen einen expliziten Wert festzulegen, da Chrome den Standardwert im Laufe der Zeit ändern kann.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

Die Option selfBrowserSurface

Bei Videokonferenzen machen Nutzer oft den Fehler, den Tab für Videokonferenzen selbst auszuwählen, was zu einem „Spiegelsaal“-Effekt, Heulen und allgemeinen Verwirrung führt.

Um Nutzer vor sich selbst zu schützen, können Videokonferenz-Web-Apps jetzt selfBrowserSurface auf "exclude" setzen. Chrome schließt dann den aktuellen Tab aus der Liste der Tabs aus, die dem Nutzer angeboten werden. Wenn Sie sie einschließen möchten, legen Sie dafür "include" fest. Derzeit ist der Standardwert für selfBrowserSurface "exclude". Wir empfehlen jedoch, ihn explizit festzulegen, da sich der Standardwert in Zukunft ändern kann.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});
Screenshot der Media-Auswahl ohne den aktuellen Tab
Der aktuelle Tab ist ausgeschlossen, nur der zweite Tab ist vorhanden.

Ein expliziter selfBrowserSurface: "exclude" und preferCurrentTab: true schließen sich gegenseitig aus.

Die Option systemAudio

getDisplayMedia() ermöglicht die Aufnahme von Audio neben dem Video. Aber nicht alle Audiodateien sind gleich. Web-Apps für Videokonferenzen: – Wenn der Nutzer einen anderen Tab teilt, ist es sinnvoll, auch Audio aufzunehmen. - Die Audioausgabe des Systems enthält die eigenen Audiodaten der Teilnehmer und sollte nicht zurück an sie übertragen werden.

In Zukunft wird es möglicherweise möglich sein, einige Audioquellen von der Aufnahme auszuschließen. Derzeit finden Web-Apps für Videokonferenzen jedoch oft am besten, die Aufnahme von Systemaudio zu vermeiden. Bisher war es möglich, zu prüfen, welche Anzeigefläche der Nutzer ausgewählt hat, und den Audiotrack zu stoppen, wenn er einen Bildschirm geteilt hat. Dies führt jedoch zu einem kleinen Problem, da einige Nutzer verwirrt sind, wenn sie explizit das Kästchen zur Freigabe von Systemaudio aktivieren und dann von Remote-Teilnehmern darüber informiert werden, dass kein Audio eingeht.

Screenshots der Medienauswahl mit der Audiofreigabe für Tabs
Das Teilen des Tabs-Audio wird im Bereich „Chrome-Tab“ angeboten, aber nicht im Bereich „Ganzer Bildschirm“.

Wenn Sie systemAudio auf "exclude" setzen, kann eine Web-App verhindern, dass Nutzer durch gemischte Signale irritiert werden. Chrome bietet die Möglichkeit, Audio neben Tabs und Fenstern aufzunehmen, aber nicht neben Bildschirmen.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Derzeit ist der Standardwert für systemAudio "include". Wir empfehlen jedoch, ihn explizit festzulegen, da sich der Standardwert in Zukunft ändern kann.

Demo

Du kannst mit diesen Steuerelementen für die Bildschirmfreigabe experimentieren, indem du die Demo auf Glitch ausführst. Prüfen Sie unbedingt den Quellcode.

Unterstützte Browser

Unterstützte Browser

  • 107
  • 107
  • x
  • 11.1

Quelle

  • displaySurface, surfaceSwitching und selfBrowserSurface sind in Chrome 107 auf Computern verfügbar.

Unterstützte Browser

  • 105
  • 105
  • x
  • x

  • systemAudio ist in Chrome 105 auf Computern verfügbar.

Unterstützte Browser

  • 119
  • 119
  • x
  • x

  • monitorTypeSurfaces ist in Chrome 119 auf Computern verfügbar.

Feedback

Das Chrome-Team und die Webstandards-Community möchten wissen, welche Erfahrungen Sie mit den Steuerelementen für die Bildschirmfreigabe gemacht haben.

Erzählen Sie uns mehr über das Design

Gibt es etwas an den Einstellungen für die Bildschirmfreigabe, 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. Glitch eignet sich gut zum Teilen von Code.

Unterstützung zeigen

Möchten Sie diese Einstellungen für die Bildschirmfreigabe 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.

Danksagungen

Hero-Image von John Schnobrich.

Vielen Dank an Rachel Andrew für die Rezension dieses Artikels.