Skip to main content
Version: 0.1.x

Custom Screen Share Track - React Native

We have introduced the ability to pass a custom Screen Share track while sharing the screen of participants. This feature can be used to add custom video encoder config, optimization mode (whether you want to focus on motion, text or detail of the video) and send it to other participants.

Creating a Custom Screen Share Track

  • You can create a Video Track using createScreenShareVideoTrack() method of @videosdk.live/react-native-sdk.
  • This method can be used to create video track using different encoding parameters and optimization mode.

Parameters

  • encoderConfig:

    • type: String
    • required: false
    • default: h720p_15fps
    • Allowed values : h360p_30fps | h720p_5fps | h720p_15fps | h1080p_15fps | h1080p_30fps
    • It will be the encoderConfigs you can want to use for the Video Track.
note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode.

  • optimizationMode
    • type: String
    • required: false
    • Allowed values: motion | text | detail
    • It will specify the optimization mode for the video track being generated.

Returns

  • MediaStream

Example

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

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

Using Custom Screen Share Track

Custom Track with enableScreenShare()

In order to switch tracks during the meeting, you have to pass the MediaStream in the enableScreenShare() method of useMeeting.

You can also pass custom track in toggleScreenShare() method of useMeeting.

note

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

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

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

const { enableScreenShare, toggleScreenShare } = useMeeting();

enableScreenShare(customTrack);

//or

toggleScreenShare(customTrack);

Got a Question? Ask us on discord