4

Firefox, since version 52, will support screen sharing via:

navigator.mediaDevices.getUserMedia({ video: { mediaSource: 'screen' }}) 
  .then(stream => { ... });

Check out this test page to see it in action.

I would like to know whether there is a way to detect whether a browser supports { mediaSource: 'screen' }?

I would like to only give the option to share the screen with users that have the ability to share. So I'd like to be able to feature detect this.

jib
  • 40,579
  • 17
  • 100
  • 158
philnash
  • 70,667
  • 10
  • 60
  • 88
  • 1
    screensharing has been implemented for ages. FF52 just removed the need for a whitelist entry or an extension that modifies the whitelist. – Philipp Hancke Sep 07 '17 at 18:44
  • Yes, good point. Are you saying that Firefox before 52 would indeed claim to support `mediaSource` and make the check from jib not useful? (Unless you are on the old whitelist...) – philnash Sep 07 '17 at 18:46
  • Yes. Just check for Firefox version >= 52 (or rely on extension). Fortunately the last ESR is 52 even though there are reports of people still using FF45... – Philipp Hancke Sep 07 '17 at 19:05

1 Answers1

9

Updated answer: getDisplayMedia is now the correct API for screen-sharing, with support in all major browsers for a couple of years now (in Firefox since 66+). So the correct API is:

await navigator.mediaDevices.getUserMedia({video: true});

And the correct way to feature detect it is:

console.log(navigator.mediaDevices &&
            "getDisplayMedia" in navigator.mediaDevices);

This is false on mobile where support is lacking (Firefox for Android & Chrome for Android).

It's also false over insecure http (non-https) connections where navigator.mediaDevices itself is undefined, an object considered a "powerful feature".

Answer for really old Firefox < 66:

⚠️ Do not rely on this answer in newer browsers, as this constraint is going away!

a way to detect whether a browser supports { mediaSource: 'screen' }?

The pedantic answer is the following will tell you if the mediaSource constraint is supported:

console.log(!!navigator.mediaDevices.getSupportedConstraints().mediaSource);

Unfortunately, mediaSource is non-standard, and only implemented in Firefox. Firefox is as of this writing the only browser to enable screen-sharing without a plugin.

Chrome has a different non-standard API using chromeMediaSource available as a plug-in, using an older constraints syntax, but it (rightly) does not appear in the new getSupportedConstraints.

It's a bit of a mess still. Long-term browsers may end up implementing getDisplayMedia instead.

jib
  • 40,579
  • 17
  • 100
  • 158
  • 1
    Ah, of course. I was looking through `getSupportedConstraints` and got hung up on `browserWindow` for some reason and completely missed `mediaSource`. I realise this is all non-standard, and hopefully there is a decent standard in the future (`getDisplayMedia` seems like a good idea). Thank you! – philnash Sep 07 '17 at 16:59
  • 2
    Chrome 70 now supports `getDisplayMedia()` [under a flag](https://addpipe.com/blog/screen-capture-in-chrome-70-with-getdisplaymedia/) – octavn Nov 27 '18 at 16:49