Screen Share - React Native

This feature enables hosts to start or stop sharing their screen with other hosts and audience members during the live stream. Only hosts (in SEND_AND_RECV mode) can broadcast their screen, while audience members (in RECV_ONLY mode) can view it in real time.

Android Setup

To enable screen sharing on Android, follow these steps:

1. Update AndroidManifest.xml

Add the required permissions and service metadata:

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.cool.app">

    <!-- Required permissions -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

    <application>
        <!-- Foreground Service Metadata -->
        <meta-data
            android:name="live.videosdk.rnfgservice.notification_channel_name"
            android:value="Meeting Notification" />
        <meta-data
            android:name="live.videosdk.rnfgservice.notification_channel_description"
            android:value="Notification appears when meeting starts." />
        <meta-data
            android:name="live.videosdk.rnfgservice.notification_color"
            android:resource="@color/red" />

        <!-- Foreground Services -->
        <service
            android:name="live.videosdk.rnfgservice.ForegroundService"
            android:foregroundServiceType="mediaProjection" />
        <service
            android:name="live.videosdk.rnfgservice.ForegroundServiceTask" />
    </application>
</manifest>

2. Define Colors

Update colors.xml to define the required colors:

android/app/src/main/res/values/colors.xml

<resources>
    <!-- Define the color 'red' used in notifications -->
    <color name="red">#FC0303</color>
</resources>

3. Link VideoSDK Dependencies

In android/app/build.gradle

Add the rnfgservice module to your dependencies:

android/app/build.gradle

dependencies {
    // ... other dependencies
    implementation project(':rnfgservice')
}

In android/settings.gradle

Include the rnfgservice project:

android/settings.gradle

include ':rnfgservice'
project(':rnfgservice').projectDir = new File(rootProject.projectDir, '../node_modules/@videosdk.live/react-native-foreground-service/android')

In MainApplication.java

Register the ForegroundServicePackage:

MainApplication.java

// ... other imports
import live.videosdk.rnfgservice.ForegroundServicePackage; // Add this import

public class MainApplication extends Application implements ReactApplication {

    // ... existing code

    @Override
    protected List<ReactPackage> getPackages() {
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // Manually add the ForegroundServicePackage
        packages.add(new ForegroundServicePackage());
        return packages;
    }

    // ... existing code
}

---

iOS Setup

For screen sharing on iOS, follow the dedicated guide:

• React Native iOS Screen Share

---

Screen Share Controls

enableScreenShare()

• By using the enableScreenShare() function of the useMeeting hook, the host can share their device screen to other hosts and audience members.

• You can also pass a customised screenshare track in the enableScreenShare() method by using Custom Screen Share Track.

• The Screen Share stream of a participant can be accessed from the screenShareStream property of the useParticipant hook.

disableScreenShare()

• By using the disableScreenShare() function of the useMeeting hook, the host can stop sharing their desktop screen to other hosts and audience members.

toggleScreenShare()

• By using the toggleScreenShare() function of the useMeeting hook, the host can start or stop sharing their desktop screen to other hosts and audience members based on the current state of the screen sharing.

• You can also pass a customised screenshare track in the toggleScreenShare() method by using Custom Screen Share Track.

• The Screen Share stream of a participant can be accessed from the screenShareStream property of useParticipant hook.

Example

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

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

  return (
    <>
      <TouchableOpacity onPress={enableScreenShare}>
        <Text>Enable Screen Share</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={disableScreenShare}>
        <Text>Disable Screen Share</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={toggleScreenShare}>
        <Text>Toggle Screen Share</Text>
      </TouchableOpacity>
    </>
  );
};

export default MeetingControls;

---

Handling Screen Share Events

Events associated with enableScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object.

• Every participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, which provides the participantId as the presenterId of the participant who started the screen share.

Events associated with disableScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object.

• Every Participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, with the presenterId as null, indicating that there is no current presenter.

Events associated with toggleScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was started.

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was stopped.

• Every Participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, providing the participantId as the presenterId of the participant who started the screen share or null if the screen share was turned off.

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

const LiveStreamView = () => {
  //Callback for when the presenter changes
  function onPresenterChanged(presenterId) {
    if(presenterId){
      console.log(presenterId, "started screen share");
    }else{
      console.log("someone stopped screen share");
    }
  }

  const { participants } = useMeeting({
    onPresenterChanged,
    ...
  });

  return <>...</>
}

const ParticipantView = (participantId) => {
  //Callback for when the participant starts a stream
  function onStreamEnabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream On: onStreamEnabled", stream);
    }
  }

  //Callback for when the participant stops a stream
  function onStreamDisabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream Off: onStreamDisabled", stream);
    }
  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled
    ...
  });
  return <> Participant View </>;
}

Rendering the Screen Share Stream

To display the screen share from another host:

1. Get the presenterId

To render the screenshare, you will need the participantId of the host presenting the screen. This can be obtained from the presenterId property of the useMeeting hook.

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

const MeetingView = () => {
  const { presenterId } = useMeeting();

  return <>{presenterId && <PresenterView presenterId={presenterId} />}</>;
};

export default MeetingView;

2. Access the Screen Share Stream

Now that you have the presenterId, you can obtain the screenShareStream using the useParticipant hook and play it.

import React from "react";
import {
  useParticipant,
  RTCView,
  MediaStream,
} from "@videosdk.live/react-native-sdk";

const PresenterView = ({ presenterId }) => {
  const { screenShareStream, screenShareOn } = useParticipant(presenterId);

  if (!screenShareOn || !screenShareStream) return null;

  return (
    <RTCView
      streamURL={new MediaStream([screenShareStream.track]).toURL()}
      objectFit="contain"
      style={{ flex: 1 }}
    />
  );
};

export default PresenterView;

---

API References

• enableScreenShare()
• disableScreenShare()
• toggleScreenShare()
• onPresenterChanged()
• onStreamEnabled()
• onStreamDisabled()