Screen Share

Screenshare involves sharing either the complete screen, a specific window or, a browser tab. For a peer to share their screen, their role must have screenshare enabled in the dashboard.

To start a screenshare:

try {
    await hmsActions.setScreenShareEnabled(true);
} catch (error) {
    // an error will be thrown if user didn't give access to share screen
}

AudioOnly Screenshare

To start audio only screenshare, you can pass a config as second argument.

try {
    await hmsActions.setScreenShareEnabled(true, {
        audioOnly: true
    });
} catch (error) {
    // an error will be thrown if user didn't give access to share screen
}

VideoOnly Screenshare

To start video only screenshare, you can pass a config as second argument.

try {
    await hmsActions.setScreenShareEnabled(true, {
        videoOnly: true
    });
} catch (error) {
    // an error will be thrown if user didn't give access to share screen
}

To stop the screenshare:

hmsActions.setScreenShareEnabled(false);

Config for setScreenShareEnabled

The setScreenShareEnabled function accepts a second optional config prop. It has the following options:

• videoOnly: Share only video. Default value is false.

• audioOnly: Share only audio. Default value is false.

• forceCurrentTab: Show the current tab first in the browser prompt and throw an error if any other tab is selected. Default value is false.

• preferCurrentTab: Show the current tab first in the browser prompt but does not throw an error if any other tab is selected. Default value is false.

• selfBrowserSurface: Whether to show an option for sharing the current tab in the screen share prompt. Screen sharing current tab might lead to hall of mirrors effect. Default is exclude, if either of forceCurrentTab or preferCurrentTab are true, this is set to include.

• surfaceSwitching: Include the option to switch tabs while sharing. Default is include, but will be set to exclude if forceCurrentTab is true.

• systemAudio: Whether to show option for sharing system level audio if the entire screen is being shared. Possible values are include and exclude. Not applicable if videoOnly is true. Note that sharing the system audio might cause echoing if the mic is on. The default value is exclude.

• displaySurface: Preselect the relevant tab in screenshare menu. Use browser for preferring a browser tab, window for application window, and monitor for full screen. The default value is monitor.

Useful Selectors

// to know if someone is screensharing
const screenshareOn = hmsStore.getState(selectIsSomeoneScreenSharing);

// to get the HMSPeer object of the peer screensharing, will select  first if multiple screenshares
const presenter = hmsStore.getState(selectPeerScreenSharing);

// to get the HMSPeer object of all the peers screensharing
const presenters = hmsStore.getState(selectPeersScreenSharing);

// a boolean to know if the local peer is the one who is screensharing
const amIScreenSharing = hmsStore.getState(selectIsLocalScreenShared);

// to get the screenshare video track, this can be used to call attachVideo for rendering
const screenshareVideoTrack = hmsStore.getState(selectScreenShareByPeerID(presenter.id));

// Get the peer who is sharing audio only screenshare
const peer = hmsStore.getState(selectPeerSharingAudio);
// Get the audio track of audio Only screenshare
const audioTrack = hmsStore.getState(selectScreenShareAudioByPeerID(peer?.id));

Find more here.

Screenshare with audio:

We also give support of adding screenshare with audio in chromium based browsers. This only applies if checkbox at bottom left shown below is checked while sharing a browser tab.