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. Expo Setup
4. System Audio with Screen Share
5. Screen Share Controls
6. Rendering the Screen Share Stream
7. Handling Screen Share Events
8. 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"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

    <!-- For sharing System Audio -->
    <!-- This permission is applicable starting from @videosdk.live/react-native-sdk version 0.3.5 -->
    <uses-permission android:name="android.permission.CAPTURE_AUDIO_OUTPUT" />

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

        <!-- Foreground Services -->
        <service
            android:name="live.videosdk.rnwebrtc.MediaProjectionService"
            android:foregroundServiceType="mediaProjection" />
        <service android:name="live.videosdk.rnwebrtc.MediaProjectionServiceTask" />
    </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>

---

iOS Setup

For screen sharing on iOS, follow the dedicated guide:

• React Native iOS Screen Share

---

Expo Setup

To enable screen sharing in your React Native Expo app for iOS, follow the dedicated integration guide below:

• React native Expo iOS Screen Share

---

System Audio with Screen Share (Android Only)

• System Audio Sharing during screen sharing, allowing users to share both the screen and the audio from their device simultaneously.

• Bool enableAudio: In the enableScreenShare() method, the second parameter, enableAudio, is a flag that controls whether system audio is shared. Set it to true to include system audio with the screen share, or false to share only the screen without audio.

• Ensure that you request the necessary permissions (android.permission.RECORD_AUDIO) for screen sharing and system audio capture on the user's device. The required permissions may vary based on the Android version and device manufacturer.

• Devices running Android 9 (API Level 28) or below will not support the System Audio sharing feature.

note

System audio will only be shared if the microphone is enabled. If the microphone is muted, the system audio will also be muted.

---

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({enableAudio: true}); // here you can pass enableAudio.

• 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({enableAudio: true}); // here you can pass enableAudio.

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()