Skip to main content

Screen Sharing

Screen Sharing

Start/Stop Screen Sharing

await call.screenShare.toggle();

// or
await call.screenShare.enable();
await call.screenShare.disable();

// alternatively
import { useCallStateHooks } from '@stream-io/video-react-sdk';

const { useScreenShareState } = useCallStateHooks();
const { screenShare } = useScreenShareState();
await screenShare.toggle();

Screen Sharing Status

Here is how you can access the status of screen sharing:

import { useCallStateHooks } from '@stream-io/video-react-sdk';

call.screenShare.state.status; // enabled, disabled or undefined

// or, if you want to subscribe to changes
const { useScreenShareState } = useCallStateHooks();
const { status } = useScreenShareState();

console.log('Screen sharing is:', status === 'enabled' ? 'active' : 'inactive');

Screen Sharing Settings

The behavior of the screen share video track can be customized, and a few parameters can be set:

call.screenShare.setSettings({
maxFramerate: 15, // will be clamped between 1 and 15 fps
maxBitrate: 1500000, // will use at most 1.5Mbps
});

await call.screenShare.enable();

Render Screen Share

Our SDK provided ParticipantView component can automatically render the screen share video track.

Screen Share Audio

Start/Stop Screen Share Audio

// enable it
call.screenShare.enableScreenShareAudio();

// publish video and audio (if available, and supported by the browser)
await call.screenShare.enable();

// disable it
call.screenShare.disableScreenShareAudio();

Play Screen Share Audio

Our SDK provided ParticipantView component can automatically play the screen share audio track.

Caveats

Screen Share Audio has limited support across browsers and platforms. For most up-to-date information, please take a look at Browser Compatibility.

In addition to that, there are a few caveats that you should be aware of:

  • On Windows, the entire system audio can be captured, but on MacOS and Linux, only the audio of a tab can be captured.

Did you find this page helpful?