Privacy-preserving screen sharing controls

François Beaufort
François Beaufort
GitHub
Elad Alon

Sharing tabs, windows, and screens is already possible on the web platform with the Screen Capture API. In short, getDisplayMedia() allows the user to select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network. There have been recent changes to the API to better preserve privacy, and prevent accidental sharing of personal information.

Here's a list of controls you can use for privacy-preserving screen sharing:

  • The displaySurface option can indicate that the web app prefers to offer a specific display surface type (tabs, windows, or screens).
  • The monitorTypeSurfaces option can be used to prevent the user from sharing an entire screen.
  • The surfaceSwitching option indicates whether Chrome should allow the user to dynamically switch between shared tabs.
  • The selfBrowserSurface option can be used to prevent the user from sharing the current tab. This avoids the "hall of mirrors" effect.
  • The systemAudio option ensures Chrome only offers relevant audio-capture to the user.

Changes to getDisplayMedia()

The following changes have been made to getDisplayMedia().

The displaySurface option

Web apps with specialized user journeys, which work best with sharing a window or a screen, can still ask Chrome to offer windows or screens more prominently in the media picker. The ordering of the offer remains unchanged, but the relevant pane is pre-selected.

The values for the displaySurface option are:

  • "browser" for tabs.
  • "window" for windows.
  • "monitor" for screens.
const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});