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" },
});
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",
});
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.
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 🦶🔫.
});
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.
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
displaySurface
,surfaceSwitching
undselfBrowserSurface
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.
Nützliche Links
- Spezifikation
- Erläuterung zu
displaySurface
- Erläuterung zu
monitorTypeSurfaces
- Erläuterung zu
surfaceSwitching
- Erläuterung zu
selfBrowserSurface
- Erläuterung zu
systemAudio
- TAG-Überprüfung
Danksagungen
Hero-Image von John Schnobrich.
Vielen Dank an Rachel Andrew für die Rezension dieses Artikels.