Screen Sharing

Our Video SDK provides an easy ways to enable screensharing in your application. In the following examples, we would learn to control and configure screen sharing.

For a user to be able to share their screen, they must have the screenshare capability (provided through the Screenshare permission) configured for the call they are in.

Screen sharing can be enabled or disabled on the dashboard for your call type:

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();

Screen Sharing optimization hints

Content Hint

When sharing a screen, you can optimize the content being shared by setting the contentHint setting. This option is usable to improve the quality of the shared content based on its type.

For example, if you are sharing a video, you can set the contentHint to motion to optimize for higher fps. Use detail for sharing content where details are important (presentations, images, fine art, etc.), text for text-heavy content, or leave it empty for general content.

You can read more about this in the MDN documentation.

// one of "motion", "detail", "text", or "" (default)
call.screenShare.setSettings({ contentHint: "motion" });
await call.screenShare.enable();

Resolution and frame rate

By default, screen shared content is capped to a maximum 2560x1440 at 30 frames per second. This is a sensible default that should work well with the majority of the use cases and provide a good balance between video quality, bandwidth usage and CPU pressure.

However, in certain circumstances, it might be necessary to either increase or decrease this limit:

// will lift the limit up to 4k@30fps.
call.screenShare.setDefaultConstraints({
  video: {
    width: { max: 3840 },
    height: { max: 2160 },
    frameRate: { ideal: 30 },
  },
});

// will put the limit down to 1080p@25fps.
call.screenShare.setDefaultConstraints({
  video: {
    width: { max: 1920 },
    height: { max: 1080 },
    frameRate: { ideal: 25 },
  },
});

// will remove the limitations completely,
// and will use the system native resolution
call.screenShare.setDefaultConstraints({ video: true });

// constraints need to be updated before enabling the screenshare
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.