Datenschutzfreundliche Einstellungen für die Bildschirmfreigabe

François Beaufort

Elad Alon

Das Teilen von Tabs, Fenstern und Bildschirmen ist auf der Webplattform bereits mit der Screen Capture API möglich. Kurz gesagt: Mit getDisplayMedia() kann der Nutzer einen Bildschirm oder einen Teil eines Bildschirms (z. B. ein Fenster) auswählen, der als Media-Stream erfasst werden soll. Dieser Stream kann dann aufgezeichnet oder über das Netzwerk mit anderen geteilt werden. Die API wurde kürzlich geändert, um die Privatsphäre besser zu schützen und die versehentliche Weitergabe personenbezogener Daten zu verhindern.

Hier finden Sie eine Liste der Steuerelemente, die Sie für die datenschutzfreundliche Bildschirmfreigabe verwenden können:

• Die Option displaySurface kann darauf hinweisen, dass die Web-App einen bestimmten Typ von Anzeigeoberfläche (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 freigibt. So wird der „Spiegelkabinett“-Effekt vermieden.
• Mit der Option systemAudio wird dafür gesorgt, dass Chrome dem Nutzer nur relevante Audioaufnahmen anbietet.

Änderungen an getDisplayMedia()

Die folgenden Änderungen wurden an getDisplayMedia() vorgenommen.

Die Option displaySurface

Web-Apps mit speziellen Nutzeraktionen, die am besten funktionieren, wenn ein Fenster oder Bildschirm geteilt wird, können Chrome weiterhin auffordern, Fenster oder Bildschirme im Media-Picker besser sichtbar zu präsentieren. Die Reihenfolge des Angebots bleibt unverändert, aber der entsprechende Bereich ist vorausgewä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" },
});

Es ist nicht möglich, ein bestimmtes Fenster oder einen bestimmten Bildschirm vorab auszuwählen. Das ist so gewollt, da die Web-App sonst zu viel Kontrolle über den Nutzer hätte.

Die Option monitorTypeSurfaces

Um Unternehmen vor dem Verlust privater Informationen durch Nutzerfehler zu schützen, können Videokonferenz-Web-Apps jetzt monitorTypeSurfaces auf "exclude" festlegen. Chrome schließt dann Bildschirme in der Media-Auswahl aus. Legen Sie "include" fest, wenn Sie sie einbeziehen möchten. Derzeit ist der Standardwert für monitorTypeSurfaces "include". Web-Apps sollten ihn jedoch explizit festlegen, 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",
});

Ein explizites monitorTypeSurfaces: "exclude" schließt sich mit displaySurface: "monitor" aus.

Die Option surfaceSwitching

Einer der am häufigsten genannten Gründe für das Teilen des gesamten Bildschirms ist der Wunsch, während einer Sitzung nahtlos zwischen verschiedenen Oberflächen wechseln zu können. Um dieses Problem zu beheben, wird in Chrome jetzt eine Schaltfläche angezeigt, mit der Nutzer dynamisch zwischen verschiedenen Tabs wechseln können, die freigegeben werden. Die Schaltfläche „Diesen Tab stattdessen teilen“ war bisher für Chrome-Erweiterungen verfügbar und kann jetzt von jeder Web-App verwendet werden, die getDisplayMedia() aufruft.

Wenn surfaceSwitching auf "include" gesetzt ist, wird die Schaltfläche im Browser angezeigt. Wenn der Wert auf "exclude" festgelegt ist, wird die Schaltfläche nicht angezeigt. Web-Apps sollten einen expliziten Wert festlegen, 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 wählen Nutzer oft den Videokonferenztab selbst aus, was zu einem „Spiegelkabinett“-Effekt, Heulen und allgemeiner Verwirrung führt.

Um Nutzer vor sich selbst zu schützen, können Web-Apps für Videokonferenzen jetzt selfBrowserSurface auf "exclude" festlegen. Chrome schließt den aktuellen Tab dann aus der Liste der Tabs aus, die dem Nutzer angeboten werden. Legen Sie "include" fest, wenn Sie sie einbeziehen möchten. Derzeit ist der Standardwert für selfBrowserSurface "exclude". Web-Apps sollten ihn jedoch explizit festlegen, da sich der Standardwert in Zukunft ändern kann.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Ein explizites selfBrowserSurface: "exclude" schließt sich mit preferCurrentTab: true aus.

Die Option systemAudio

Mit getDisplayMedia() können Sie Audio zusammen mit Video aufnehmen. Doch nicht alle Audioinhalte sind gleich. Web-Apps für Videokonferenzen: - Wenn der Nutzer einen anderen Tab freigibt, ist es sinnvoll, auch Audio aufzunehmen. – Systemaudio hingegen umfasst das Audio der Remote-Teilnehmer und sollte nicht an sie zurückgesendet werden.

In Zukunft ist es möglicherweise möglich, bestimmte Audioquellen vom Aufzeichnen auszuschließen. Derzeit ist es für Web-Apps für Videokonferenzen jedoch oft am besten, die Aufnahme von Systemaudio zu vermeiden. Bisher war dies möglich, indem geprüft wurde, welche Anzeigefläche der Nutzer ausgewählt hat, und der Audiotrack beendet wurde, wenn er einen Bildschirm freigegeben hat. Das führt jedoch zu einem kleinen Problem, da einige Nutzer verwirrt sind, wenn sie das Kästchen zum Teilen des Systemaudios explizit aktivieren und dann von den Teilnehmern der Videokonferenz erfahren, dass kein Audio eingeht.

Wenn Sie systemAudio auf "exclude" setzen, können Sie verhindern, dass Nutzer durch gemischte Signale verwirrt werden. Chrome bietet an, Audioinhalte zusammen mit Tabs und Fenstern aufzunehmen, aber nicht zusammen mit 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". Web-Apps sollten ihn jedoch explizit festlegen, da sich der Standardwert in Zukunft ändern kann.

Demo

Sie können diese Steuerelemente für die Bildschirmfreigabe in der Demo ausprobieren.

Unterstützte Browser

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

• systemAudio ist in Chrome 105 auf dem Computer verfügbar.

• monitorTypeSurfaces ist in Chrome 119 auf dem Computer verfügbar.

Feedback

Das Chrome-Team und die Webstandards-Community möchten gern mehr über Ihre Erfahrungen mit diesen Bildschirmfreigabe-Einstellungen erfahren.

Informationen zum Design

Funktioniert etwas an diesen Steuerelementen für die Bildschirmfreigabe nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

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

Probleme bei der Implementierung?

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

• Melden Sie einen Fehler unter https://new.crbug.com. Geben Sie dabei so viele Details wie möglich an und fügen Sie eine einfache Anleitung zur Reproduktion hinzu.

Unterstützung zeigen

Planen Sie, diese Steuerelemente für die Bildschirmfreigabe zu 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 einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

• Spezifikation
• displaySurface Erläuterung
• monitorTypeSurfaces Erläuterung
• surfaceSwitching Erläuterung
• selfBrowserSurface Erläuterung
• systemAudio Erläuterung
• TAG-Überprüfung

Danksagungen

Vielen Dank an Rachel Andrew für die Überprüfung.