How to narrow screen sharing options like Google Meet does?

Question

I'm using MediaDevices.getDisplayMedia() to record user's screen.

In theory, I can't narrow the choices from JS ...

The specified constraints can't be used to limit the options available to the user. Instead, they must be applied after the user chooses a source, in order to generate output that matches the constraints.

but, somehow Google Meet does it (Windows + Chrome)? But how?

I've tried

{
  video: {
    displaySurface: 'application' | 'browser' | 'monitor' | 'window'
  }
}

but I always get the dialog window with all the options.

I would like to have it working at least on Chrome.

Answer 1

Actually the menu you see in your post was solved by having a Chrome Extension baked right into the Chrome browser that was specifically for Google Meet (Actually it was also shipped in Edge which was quite funny). The browser getDisplayMedia API didn't allow to define constraints to the selectable sources.

However recently Chromium based browsers have introduced a new feature: You can now set the new constraint: monitorTypeSurfaces to exclude in getDisplayMedia() to disable sharing the whole screen.

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

You can find more details under: Chrome Blog and MDN getDisplayMedia docs