displaySurface constraint not restricting user share screen selection options

Question

Adding displaySurface does not provoke option restriction for the user before sharing his own screen. I am trying to limit those options to only let the user select anything except browser tabs.

I tried setting displaySurface explicitly to 'monitor' and still all options being showed up.

async startCaptureMD() {
  let captureStream = null;
  var screen_constraints = {
     video: {
        cursor: "always",
        displaySurface: "monitor"
     }
  };
  try{
     captureStream = await 
     navigator.mediaDevices.getDisplayMedia(screen_constraints);
  }catch(err){
    console.log(err.message, err.code);
  }
  return captureStream;
},

The expected result is to show 'Your Entire Screen' or 'Application Window' and not 'Chrome Tab'.

Answer 1

You can't. The MDN docs explain that it is for security:

Constraints never cause changes to the list of sources available for capture by the Screen Sharing API. This ensures that web applications can't force the user to share specific content by restricting the source list until only one item is left.

The spec says:

The user agent MUST let the end-user choose which display surface to share out of all available choices every time, and MUST NOT use constraints to limit that choice.

So the browser is doing the right thing. It seems displaySurface is an output value only. If you already have a MediaStreamTrack to call getSettings() on, then you can read displaySurface.

I also was confused, so I fixed the MDN docs. The MDN docs need updating to not list displaySurface as "A string (or array of strings) indicating what type or types of screen surface to allow the user to select".