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 isfalse
. -
audioOnly
: Share only audio. Default value isfalse
. -
forceCurrentTab
: Show the current tab first in the browser prompt and throw an error if any other tab is selected. Default value isfalse
. -
preferCurrentTab
: Show the current tab first in the browser prompt but does not throw an error if any other tab is selected. Default value isfalse
. -
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 isexclude
, if either offorceCurrentTab
orpreferCurrentTab
aretrue
, this is set toinclude
. -
surfaceSwitching
: Include the option to switch tabs while sharing. Default isinclude
, but will be set toexclude
ifforceCurrentTab
istrue
. -
systemAudio
: Whether to show option for sharing system level audio if the entire screen is being shared. Possible values areinclude
andexclude
. Not applicable ifvideoOnly
istrue
. Note that sharing the system audio might cause echoing if the mic is on. The default value isexclude
. -
displaySurface
: Preselect the relevant tab in screenshare menu. Usebrowser
for preferring a browser tab,window
for application window, andmonitor
for full screen. The default value ismonitor
.
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.