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 können Sie verhindern, dass der Nutzer einen gesamten Bildschirm freigibt.
• Mit der Option surfaceSwitching wird angegeben, ob Chrome dem Nutzer erlauben soll, dynamisch zwischen geteilten Tabs zu wechseln.
• 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.

Folgende Werte sind für die Option displaySurface zulässig:

• "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 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 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",
});

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 beheben, wird in Chrome jetzt eine Schaltfläche angezeigt, mit der Nutzer dynamisch zwischen der Freigabe verschiedener Tabs wechseln können. Die Schaltfläche „Diesen Tab stattdessen teilen“ war bisher nur für Chrome-Erweiterungen verfügbar. Sie kann jetzt von jeder Webanwendung verwendet werden, die getDisplayMedia() aufruft.

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, zu Heulen und allgemeiner Verwirrung.

Um Nutzer vor sich selbst zu schützen, können Web-Apps für Videokonferenzen jetzt selfBrowserSurface auf "exclude" setzen. Chrome schließt den aktuellen Tab dann 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 sich der Standardwert in Zukunft ändern kann.

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

Beachten Sie, dass sich eine explizite selfBrowserSurface: "exclude" mit preferCurrentTab: true ausschließt.

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 hingegen umfasst das Audio der Remote-Teilnehmer und sollte nicht an sie zurückgegeben werden.

Künftig wird es möglicherweise möglich sein, einige Audioquellen von der Aufzeichnung auszuschließen. Bis dahin ist es jedoch oft am besten, bei Web-Apps für Videokonferenzen 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. Das führt jedoch zu einem kleinen Problem: Einige Nutzer sind verwirrt, wenn sie das Kästchen für die Freigabe von Systemaudio anklicken und dann von Remote-Teilnehmern erfahren, dass kein Audiosignal empfangen wird.

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

• 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 gerne wissen, wie Sie diese Funktionen zur Bildschirmfreigabe finden.

Designbeschreibung

Funktioniert etwas an den Steuerelementen für die Bildschirmfreigabe nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare 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 einen Fehler in der Chrome-Implementierung 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.

Unterstützung zeigen

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.

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