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.

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.

• javascript
• firefox
• webrtc
• getusermedia
• screensharing

• 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 Commented Sep 7, 2017 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 Commented Sep 7, 2017 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 Commented Sep 7, 2017 at 19:05

1 Answer 1

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.