How to narrow screen sharing options like Google Meet does?

user_1015431 0
Viewed 442

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?

enter image description here

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.

google-chrome javascript
1 Answers

You can pass a MediaStreamConstrain to .getDisplayMedia() to specify the attributes on the video stream you want.

The MediaStreamConstrain is an object such as:

{
  audio: {...},
  video: {...},
}

Audio and video can be a boolean (basic usage) or MediaTrackConstraints. If you use a MediaTrackConstrain, you can specify what you want to record:

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

See the MediaTrackConstrain reference for more advanced usage

user_48618730
Related