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.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• toggleScreenShare()
• disableScreenShare()
• enableScreenShare()

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) {
      try {
        await toggleScreenShare();
      } catch (err) {
        console.error("toggleScreenShare failed:", err);
      }
    } else {
      let customTrack = await createScreenShareVideoTrack({
        optimizationMode: "motion",
        encoderConfig: "h720p_15fps",
      });

      try {
        await toggleScreenShare(customTrack);
      } catch (err) {
        console.error("toggleScreenShare failed:", err);
      }
    }
  };

  const handleEnableScreenShare = async () => {
    if (localScreenShareOn) {
      try {
        await disableScreenShare();
      } catch (err) {
        console.error("disableScreenShare failed:", err);
      }
    }

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

    try {
      await enableScreenShare(customTrack);
    } catch (err) {
      console.error("enableScreenShare failed:", err);
    }
  };

  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