Streams : Creating a screensharing stream

Here is a description of the different steps to create a screenSharing stream. Our sample also demonstrate the usage of this stream in a conference.

Compatibility :

Screensharing is available on browsers :

  • Chrome :
  • Natively supported since Chrome version 72 - For other versions : Supported using an extension, please note that inline extension installation is disabled since September 12, 2018. Check the Note from Chromium. Our extension is available on Chrome Store. Usage of extension can still be forced on API with newer Chrome version.
  • Firefox :
  • Natively supported since Firefox version 52
  • Edge :
  • Natively supported, Screen Capture APIs require Windows 10 Pro or Enterprise. See the Note from Microsoft
  • Safari :
  • Natively supported since Safari version 13.0.2

Create your screenSharing stream

Create the stream using createDisplayMediaStream() function.

Use displayMediaStreamConstraints parameters to define set of desktop media sources you want to propose your user to share.

displayMediaStreamConstraints is defined in : https://w3c.github.io/mediacapture-screen-share/#displaymediastreamconstraints

Check our documentation on createDisplayMediaStream

        const displayMediaStreamConstraints = {
            video: {
                cursor: "always"
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                sampleRate: 44100
            }
        };

        apiRTC.Stream.createDisplayMediaStream(displayMediaStreamConstraints, false)
            .then(function(stream) {
                //Display your stream in video element
            })
            .catch(function(err) {
                console.error('Could not create screensharing stream :', err);
            });
    

Information to establish conference

Check our tutorial on registration if you need more details about conference establishment.

Live Demo