Detect Firefox support for screen sharing

Question

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.

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.