Screen Share - React Native

Screen sharing during a meeting allows you to broadcast your device's screen to all participants, making it invaluable for presentations, demonstrations, and collaborative sessions. This guide will help you set up screen sharing in your React Native application using VideoSDK, covering both Android and iOS platforms.

Contents

1. Android Setup
2. iOS Setup
3. Screen Share Controls
4. Rendering the Screen Share Stream
5. Handling Screen Share Events
6. API References

---

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

Use the useMeeting hook to control screen sharing within your application.

enableScreenShare()

Starts sharing your device's screen with other participants.

Usage:

const { enableScreenShare } = useMeeting();

// Start screen sharing
enableScreenShare();

• You can pass a custom screen share track if needed. See Custom Screen Share Track.

disableScreenShare()

Stops sharing your screen.

Usage:

const { disableScreenShare } = useMeeting();

// Stop screen sharing
disableScreenShare();

toggleScreenShare()

Toggles screen sharing on or off based on its current state.

Usage:

const { toggleScreenShare } = useMeeting();

// Toggle screen sharing
toggleScreenShare();

note

You can also pass a custom screen share track to toggleScreenShare() if required.

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;

---

Rendering the Screen Share Stream

To display the screen share from another participant:

1. Get the presenterId

Use the useMeeting hook to obtain the presenterId, which identifies the participant currently sharing their screen.

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

Use the useParticipant hook with the presenterId to access the screen share stream.

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;

---

Handling Screen Share Events

React to changes in screen sharing status by handling events provided by the SDK.

onPresenterChanged

Triggered when a participant starts or stops screen sharing.

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

const MeetingView = () => {
  const onPresenterChanged = (presenterId) => {
    if (presenterId) {
      console.log(`${presenterId} started screen sharing`);
    } else {
      console.log("Screen sharing stopped");
    }
  };

  useMeeting({ onPresenterChanged });

  return <>{/* Your UI components */}</>;
};

export default MeetingView;

onStreamEnabled and onStreamDisabled

Listen for when a participant's screen share stream is enabled or disabled.

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

const ParticipantView = ({ participantId }) => {
  const onStreamEnabled = (stream) => {
    if (stream.kind === "share") {
      console.log(`Participant ${participantId} started screen sharing`);
    }
  };

  const onStreamDisabled = (stream) => {
    if (stream.kind === "share") {
      console.log(`Participant ${participantId} stopped screen sharing`);
    }
  };

  useParticipant(participantId, {
    onStreamEnabled,
    onStreamDisabled,
  });

  return <>{/* Participant UI components */}</>;
};

export default ParticipantView;

---

API References

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