Custom ScreenShare Sources - React

To deliver high-quality livestreams, it's essential to fine-tune screen share tracks being broadcasted. Whether you’re hosting a webinar, or going live with a presentation, using custom media tracks gives you better control over stream quality and performance.

Custom Screen Share Track

This feature enables the customization of screenshare streams with enhanced optimization modes and predefined encoder configuration (resolution + FPS) for specific use cases, which can then be sent to other hosts and audience members.

How to Create a Custom Screen Share Track ?

• You can create a Video Track using the createScreenShareVideoTrack() method of @videosdk.live/react-sdk.
• This method enables the creation of a screen share track with different encoding parameters and optimization modes.

Example

import { createScreenShareVideoTrack } from "@videosdk.live/react-sdk";

let customShareTrack = await createScreenShareVideoTrack({
  optimizationMode: "motion", // "text" | "detail",  Default : "motion"

  // This will accept the  height & FPS of video you want to capture.
  encoderConfig: "h720p_15fps", //  `h360p_30fps` | `h1080p_30fps` // Default : `h720p_15fps`
});

You can learn more about the optimizationMode from here

How to Setup a Custom Screen Share Track ?

During the live stream, you can update the screenshare track by passing the MediaStream into enableScreenShare() or toggleScreenShare() methods from the useMeeting hook.

note

Make sure to call the disableScreenShare() method before you create a new track as it may lead to unexpected behavior.

Example

import {
  createScreenShareVideoTrack,
  useMeeting,
} from "@videosdk.live/react-sdk";

const MeetingControls = () => {
  const {
    localScreenShareOn,
    enableScreenShare,
    disableScreenShare,
    toggleScreenShare,
  } = useMeeting();

  const handleToggleScreenShare = async () => {
    if (localScreenShareOn) {
      toggleScreenShare();
    } else {
      let customTrack = await createScreenShareVideoTrack({
        optimizationMode: "motion",
        encoderConfig: "h720p_15fps",
      });

      toggleScreenShare(customTrack);
    }
  };

  const handleEnableScreenShare = async () => {
    if (localScreenShareOn) {
      disableScreenShare();
    }

    let customTrack = await createScreenShareVideoTrack({
      optimizationMode: "motion",
      encoderConfig: "h720p_15fps",
    });

    enableScreenShare(customTrack);
  };

  return (
    <>
      <button onClick={handleToggleScreenShare}>Toggle ScreenShare</button>
      <button onClick={handleEnableScreenShare}>Enable ScreenShare</button>
    </>
  );
};

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• Custom Screen Share Track