Datenschutzfreundliche Einstellungen für die Bildschirmfreigabe

François Beaufort

Elad Alon

Mit der Screen Capture API ist es bereits möglich, Tabs, Fenster und Bildschirme auf der Webplattform zu teilen. Kurz gesagt: Mit getDisplayMedia() können Nutzer einen Bildschirm oder einen Teil eines Bildschirms (z. B. ein Fenster) auswählen, um ihn als Medienstream aufzunehmen. Dieser Stream kann dann aufgezeichnet oder über das Netzwerk mit anderen geteilt werden. Die API wurde vor Kurzem 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 eine datenschutzfreundliche Bildschirmfreigabe verwenden können:

• Die Option displaySurface kann darauf hinweisen, dass die Webanwendung bevorzugt einen bestimmten Bildschirmtyp (Tabs, Fenster oder Bildschirme) anbietet.
• Mit der Option monitorTypeSurfaces kann verhindert werden, dass der Nutzer einen ganzen Bildschirm freigibt.
• Die Option „surfaceSwitching“ gibt an, ob Chrome Nutzern das dynamische Wechseln zwischen geteilten Tabs ermöglichen soll.
• Mit der Option selfBrowserSurface können Sie verhindern, dass der Nutzer den aktuellen Tab freigibt. So wird der Spiegelkabinetteffekt vermieden.
• Mit der Option systemAudio wird sichergestellt, 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 Aufrufabfolgen, die am besten mit der Freigabe eines Fensters oder Bildschirms funktionieren, können Chrome trotzdem bitten, Fenster oder Bildschirme in der Medienauswahl auffälliger anzubieten. 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" },
});

Der Bereich „Fenster“ ist in der Medienauswahl voreingestellt.

Es ist nicht möglich, ein bestimmtes Fenster oder einen bestimmten Bildschirm vorab auszuwählen. Das ist so gewollt, da dies der Webanwendung zu viel Macht über die Nutzer geben würde.

Die Option monitorTypeSurfaces

Um Unternehmen vor dem Verlust privater Daten durch Mitarbeiterfehler zu schützen, können Web-Apps für Videokonferenzen jetzt monitorTypeSurfaces auf "exclude" setzen. Chrome schließt dann Bildschirme in der Medienauswahl aus. Wenn Sie sie einschließen möchten, legen Sie "include" fest. Derzeit ist "include" der Standardwert für monitorTypeSurfaces. Bei Webanwendungen wird jedoch empfohlen, ihn explizit festzulegen, da er sich in Zukunft ändern kann.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Der Bereich „Ganzer Bildschirm“ ist in der Media-Auswahl nicht sichtbar.

Beachten Sie, dass sich eine explizite monitorTypeSurfaces: "exclude" mit displaySurface: "monitor" ausschließt.

Die Option surfaceSwitching

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

Die Schaltfläche „Stattdessen diesen Tab teilen“ in Chrome.

Wenn surfaceSwitching auf "include" gesetzt ist, wird die Schaltfläche im Browser angezeigt. Ist der Wert "exclude", wird die Schaltfläche dem Nutzer nicht angezeigt. Für Webanwendungen wird empfohlen, 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. Das führt zu einem „Hall of Mirrors“-Effekt, Heulen und allgemeiner Verwirrung.

Um Nutzer vor sich selbst zu schützen, können Webanwendungen für Videokonferenzen jetzt selfBrowserSurface auf "exclude" festlegen. 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 "include" fest. Derzeit ist "exclude" der Standardwert für selfBrowserSurface. Bei Webanwendungen wird jedoch empfohlen, ihn explizit festzulegen, da er sich in Zukunft ändern kann.

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

Der aktuelle Tab ist ausgeschlossen, nur der zweite Tab ist vorhanden.

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

Die Option systemAudio

Mit getDisplayMedia() können Sie neben dem Video auch Audio aufnehmen. Aber nicht alle Audioinhalte sind gleich. Web-Apps für Videokonferenzen: – Wenn der Nutzer einen anderen Tab teilt, ist es sinnvoll, auch Audio aufzunehmen. - Systemaudio enthält hingegen die Audiodaten der Teilnehmer an anderen Standorten und sollte nicht an sie zurückgesendet werden.

Künftig wird es möglicherweise möglich sein, einige Audioquellen von der Aufzeichnung auszuschließen. Derzeit ist es jedoch bei Web-Apps für Videokonferenzen oft am besten, das Aufzeichnen von Systemaudio zu vermeiden. Bisher konnte dies dadurch erfolgen, dass geprüft wurde, welche Anzeigefläche der Nutzer ausgewählt hat, und der Audiotrack angehalten wurde, wenn er einen Bildschirm freigegeben hat. Dies stellt jedoch ein kleines Problem dar: Einige Nutzer sind verwirrt, wenn sie das Kästchen zur Freigabe von Systemaudio explizit anklicken, und werden dann von den Remote-Teilnehmern darüber informiert, dass keine Audiodaten eingehen.

Die Freigabe von Tab-Audio ist im Bereich „Chrome-Tab“ verfügbar, aber nicht im Bereich „Ganzer Bildschirm“.

Wenn Sie systemAudio auf "exclude" festlegen, kann eine Webanwendung verhindern, dass Nutzer durch gemischte Signale verwirrt werden. Chrome bietet an, Audioaufnahmen 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 "include" der Standardwert für systemAudio. Bei Webanwendungen wird jedoch empfohlen, ihn explizit festzulegen, da er sich in Zukunft ändern kann.

Demo

Sie können diese Steuerelemente für die Bildschirmfreigabe ausprobieren, indem Sie die Demo auf Glitch ausführen. Sehen Sie sich den Quellcode an.

Unterstützte Browser

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

Unterstützte Browser

• 105
• 105
• x
• x

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

Unterstützte Browser

• 119
• 119
• x
• x

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

Feedback

Das Chrome-Team und die Webstandards-Community möchten gerne wissen, wie Sie diese Funktionen zur Bildschirmfreigabe finden.

Erzähl uns etwas über das Design

Funktionieren die Steuerelemente für die Bildschirmfreigabe nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die du zur Umsetzung deiner Idee benötigst? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

• Melden Sie ein Problem mit der Spezifikation im GitHub-Repository oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem 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 an und machen Sie eine einfache Anleitung zur Reproduktion. Glitch eignet sich gut zum Teilen von Code.

Support anzeigen

Werden Sie diese Steuerelemente für die Bildschirmfreigabe verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Schicken Sie uns einen Tweet an @ChromiumDev und teilen Sie uns mit, wo und wie Sie Gemini 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