Force user to share the Entire Screen in Chrome

Force user to share the Entire Screen in Chrome

We came across a use case where we wanted to make sure that the user is sharing his entire screen and not just the particular window/tab. I will explain the solution which we found for the above problem in Chrome.

Chrome

MediaTrackSettings.displaySurface

The MediaTrackSettings dictionary's displaySurface property indicates the type of display surface being captured.

Possible values are —

  • application — The streams video track contains all of the windows belonging to the application chosen by the user.
  • browser — The stream’s video track presents the entire contents of a single browser tab that the user selected during the getDisplayMedia() call.
  • monitor — The video track in the stream presents the complete contents of one or more of the user’s screens.
  • window — The stream’s video track presents the contents of a single window selected by the user.

Now, what we had to do is the moment we get the MediaStream object use it to get this — MediaTrackSettings.displaySurface and make sure that this value is — monitor and if not show a message to the user asking him to share his Entire Screen.

Here is the sample code for the same —

Another approach —

While the above-mentioned approach works pretty well, in the process of finding the solution, I also came across another way to solve this problem.

Another solution that I have found comes from the MediaStream object itself.

Once we have the stream after calling — getDisplayMedia, we need to get the video track and there we will find a property called “label”, using this label we can decide which screen option the user selected for sharing.

We can get the video track (provided we have MediaStream object) as -

Here is the sample videoTrack object obtained from all 3 cases, when the user selects one of these 3 options to share — a) Entire screen b) Window c) Chrome Tab

videoTrackObject.png

As you can see — label property starts with screen:, so we can use that to decide if the user is sharing his entire screen or not.

Here is a sample code for the same —


That’s all for this story, will come soon with another one. I’m Pawan and I’ll keep putting stories related to web development and javascript. If you like such stories please do follow my blog. Your support is very important to me — thank you.