Custom Screen Share Track - React Native

You can pass a custom screen share track when you share your screen. Use it to add custom video encoder config and, on Android, system audio, and send it to other participants.

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.

• enableScreenShare()
• toggleScreenShare()

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.
• On Android, the screen capture consent dialog appears when you create the track. If the user declines, the Promise rejects with ERROR_GET_DISPLAY_MEDIA_PERMISSION_DENIED (3016).
• On iOS, enableScreenShare() opens the system broadcast picker, and sharing starts when the user taps Start Broadcast. Your app needs a Broadcast Upload Extension. Follow React Native iOS Screen Share to set it up.

Parameters

• encoderConfig:

  • type: String
  • required: false
  • default: h720p_15fps
  • Allowed values : h360p_30fps | h480p_15fps | h480p_30fps | h720p_5fps | h720p_15fps | h720p_30fps | h1080p_15fps | h1080p_30fps
  • The encoder config to use for the video track.

note

These encoder configurations work in both landscape and portrait mode.

• multiStream

  • type: boolean
  • required: false
  • default: false
  • If true, the screen share is sent as three quality layers instead of one.

• withAudio

  • type: boolean
  • required: false
  • default: false
  • Android 10 and later only. If true, system audio is shared as well. It is mixed into your microphone track, so muting the mic mutes both. On iOS, this option has no effect.

Returns

• Promise<CustomStreamTrack>

Example

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

let customTrack = await createScreenShareVideoTrack({
  encoderConfig: "h720p_15fps",
  withAudio: true, // Android only
});

Using Custom Screen Share Track

Custom Track with enableScreenShare()

In order to switch tracks during the room, you have to pass the CustomStreamTrack in the enableScreenShare() method of useRoom.

To share at a different resolution or frame rate, create a new track with that encoderConfig and pass it to enableScreenShare().

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

Sharing has started when onStreamEnabled() of useParticipant() fires with the share stream.

note

Make sure to call disableScreenShare() before you create a new track. While you are sharing, enableScreenShare() rejects with ERROR_ALREADY_IN_REQUESTED_STATE (3054), and toggleScreenShare() turns screen share off without using the track.

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

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

const { enableScreenShare, toggleScreenShare } = useRoom();

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

//or

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