Screen share 🔗



How to screen share 🔗

The following platforms support screen sharing:

  • Chrome
  • Opera
  • Firefox
  • Safari >= 13.0
  • Electron apps

All of them in their desktop version. Mobile platforms do not currently support screen sharing.

Chrome >=72, Opera (based on Chrome >=72), Safari >= 13.0 and Firefox >=66 🔗

To share your screen instead of your webcam, the process is exactly the same as stated in Publish a stream section, but setting to "screen" videoSource property when initializing a Publisher object:

var OV = new OpenVidu();
var sessionScreen = OV.initSession();
getToken().then((token) => {
    sessionScreen.connect(token).then(() => {
        var publisher = OV.initPublisher("html-element-id", { videoSource: "screen" });

        publisher.once('accessAllowed', (event) => {
            publisher.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
                console.log('User pressed the "Stop sharing" button');
            });
            sessionScreen.publish(publisher);

        });

        publisher.once('accessDenied', (event) => {
            console.warn('ScreenShare: Access Denied');
        });

    }).catch((error => {
        console.warn('There was an error connecting to the session:', error.code, error.message);

    }));
});

Chrome <72 and Opera (based on Chrome <72) 🔗

NOTE: Chrome 72 is available since January 2019. This means that the need for the browser's extension is now virtually overcome.

In these cases there's need of a browser extension. An OpenViduError object may be returned with the following OpenViduError.name property in the callback function:

  • SCREEN_SHARING_NOT_SUPPORTED: if the client does not support screen sharing.
  • SCREEN_EXTENSION_NOT_INSTALLED: Chrome <72 needs an extension to allow screen sharing. error.message has the URL of Chrome Web Store where to install the extension.
  • SCREEN_EXTENSION_DISABLED: if Chrome's screen extension is installed but disabled
  • SCREEN_CAPTURE_DENIED: if the user doesn't grant permissions to capture the screen when the browser asks to.
var OV = new OpenVidu();
var publisher = OV.initPublisher('html-element-id', { videoSource: "screen" }, function(error) {
    if (error.name == 'SCREEN_EXTENSION_NOT_INSTALLED') {
        showWarning(error.message);

        // showWarning could show a button with href 'error.message',
        // so the user can navigate to install the extension.
        // A browser refresh is also needed after installation

    } else if (error.name == 'SCREEN_SHARING_NOT_SUPPORTED') {
        alert('Your browser does not support screen sharing');
    } else if (error.name == 'SCREEN_EXTENSION_DISABLED') {
        alert('You need to enable screen sharing extension');
    } else if (error.name == 'SCREEN_CAPTURE_DENIED') {
        alert('You need to choose a window or application to share');
    }
});

Firefox <66 🔗

NOTE: Firefox 66 is available since March 2019. This means that below instructions should not be necessary in most cases.

For Firefox <66 two different videoSource strings are allowed in order to screen share:

  • "screen": entire screen
  • "window": specific application window

In Chrome, Opera and Firefox >=66 both values will always give access to both entire screen and specific application windows.

Desktop Electron apps 🔗

Electron allows screen-sharing, but there's no default screen selector built in the framework. For the rest of supported platforms, a native dialog will be shown when calling OpenVidu.initPublisher with { videoSource: "screen" }, so the user can pick up the screen or application window to share.

For Electron, you must build your own screen selection dialog using desktopCapturer API and then append the desired screen identifier to string "screen" like this: { videoSource: "screen:SCREEN_IDENTIFIER" }

To do so:

desktopCapturer.getSources({
    types: ['window', 'screen']
}).then(async sources => {
    sources.forEach(source => {
        // Name of the screen or window
        console.log(source.name);
        // Thumbnail of the screen or window. You can set this as the src attribute of an <img> element
        console.log(source.thumbnail.toDataURL());
        // ID of the screen or window. This is the required value
        console.log(source.id);

        if (my_condition) {
            var OV = new OpenVidu();
            var publisher = OV.initPublisher("html-element-id", { videoSource: "screen:" + source.id });
        }
    });
});

You can check out openvidu-electron tutorial, which includes a fully functional screen selector dialog.



How to know when the user stops sharing the screen 🔗

You can use native Web API to add a listener for determining when the user pressed the "Stop sharing" button shown by browsers when sharing a window or screen. You can do it like this:

var OV = new OpenVidu();
var publisher = OV.initPublisherAsync({
    videoSource: "screen"
}).then(publisher => {
    publisher.stream.getMediaStream().addEventListener('inactive', () => {
        console.log('User pressed the "Stop sharing" button');
        // You can send a signal with Session.signal method to warn other participants
    });
});

If that doesn't work (it may only work in certain clients, but not in others) you can also try event ended of MediaStreamTrack, which serves the same purpose. Following the same example above that would be:

var OV = new OpenVidu();
var publisher = OV.initPublisherAsync({
    videoSource: "screen"
}).then(publisher => {
    publisher.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
        console.log('User pressed the "Stop sharing" button');
    });
});



Custom Screen Sharing extension for Chrome 🔗

NOTE: Chrome 72 is available since January 2019. This means that the need for the browser's extension is now virtually overcome.

We provide a default extension that will work on any domain in case the client is using Chrome <72 or Opera based on it. But you can create your own Chrome extension always based on ours (OpenVidu Screen Sharing extension). This way your extension may have your own icon, name, description and custom valid domains.

To use your extension, just configure OpenVidu object like this after initializing it:

var OV = new OpenVidu();
OV.setAdvancedConfiguration(
    { screenShareChromeExtension: "https://chrome.google.com/webstore/detail/EXTENSION_NAME/EXTENSION_ID" }
);

Check the GitHub README for further information.