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.
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.