Share screen - React Native iOS

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.

• createScreenShareVideoTrack()
• enableScreenShare()
• disableScreenShare()

Contents

1. Create Broadcast Upload Extension in iOS
2. Start and Stop Screen Share

Create Broadcast Upload Extension in iOS

Step 1 : Open Target

Open your project in Xcode, then select File > New > Target in the menu bar.

Step 2 : Select Target

Select Broadcast Upload Extension and click next.

Step 3 : Configure Broadcast Upload Extension

Enter the extension's name in the Product Name field, choose the team from the dropdown, uncheck the "Include UI extension" field, and click "Finish."

Step 4 : Activate Extension scheme

You will be prompted with a popup : Activate "Your-Extension-name" scheme?, click on activate.

Now, the "Broadcast" folder will appear in the Xcode left side bar.

Then open the General tab of the extension target and set Minimum Deployments to the same iOS version as your app target.

Step 5 : Add External file in Created Extension

Open the videosdk-rtc-react-native-sdk-example repository, and copy the following files: SampleUploader.swift, SocketConnection.swift, DarwinNotification.swift, and Atomic.swift to your extension's folder. Ensure that these files are added to the target.

Step 6 : Update SampleHandler.swift file

Open SampleHandler.swift, and copy the content of the file. Paste this content into your extension's SampleHandler.swift file.

Step 7 : Add Capability in App

In Xcode, navigate to YourappName > Signing & Capabilities, and click on +Capability to configure the app group.

Choose App Groups from the list.

After that, select or add the generated App Group ID that you have created before.

Step 8 : Add Capability in Extension

Go to Your-Extension-Name > Signing & Capabilities and configure App Group functionality as you did in the previous step. (Group id should be same for both targets).

Step 9 : Add App Group Id in Extension File

Go to the extension's SampleHandler.swift file and paste your group ID in the appGroupIdentifier constant.

Step 10 : Update App level info.plist file

1. Add a new key RTCScreenSharingExtension in Info.plist with the extension's Bundle Identifier as the value.
2. Add a new key RTCAppGroupIdentifier in Info.plist with the extension's App groups Id as the value.

Note : For the extension's Bundle Identifier, go to TARGETS > Your-Extension-Name > Signing & Capabilities .

Step 11 : Enable Background Modes in App

Enable the necessary capabilities in Xcode:

1. Open your project in Xcode.
2. Navigate to your target settings.
3. Select the "Signing & Capabilities" tab.
4. Click the "+" button to add capabilities.
5. Add Background Modes.

Under Background Modes, enable the following options:

• Audio, AirPlay, and Picture in Picture

To learn more, see Background Handling.

note

You can also check out the extension's example code on github.

Start and Stop Screen Share

enableScreenShare() shows the system broadcast picker itself, so you do not need a native module, such as VideosdkRPK, to show it. If your app used v1.x.x, remove VideosdkRPK.swift, VideosdkRPK.m, VideosdkRPK.js and the onScreenShare listener. Calling VideosdkRPK.startBroadcast() before enableScreenShare() shows the picker twice.

Call enableScreenShare() and disableScreenShare() from your buttons:

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

const ScreenShareControls = () => {
  const { enableScreenShare, disableScreenShare } = useRoom();

  const startScreenShare = async () => {
    try {
      const screenShareTrack = await createScreenShareVideoTrack();
      // Shows the iOS broadcast picker
      await enableScreenShare(screenShareTrack);
    } catch (err) {
      console.error("enableScreenShare failed:", err);
    }
  };

  const stopScreenShare = async () => {
    try {
      await disableScreenShare();
    } catch (err) {
      console.error("disableScreenShare failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity onPress={startScreenShare}>
        <Text> Start Screen Share </Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={stopScreenShare}>
        <Text> Stop Screen Share </Text>
      </TouchableOpacity>
    </>
  );
};

export default ScreenShareControls;

• The enableScreenShare() method shows the following picker.

After clicking the Start Broadcast button, you will be able to get the screen share stream in the session.

• Sharing has started when the share stream of the local participant fires onStreamEnabled, not when the Promise resolves.
• If the user closes the picker, call enableScreenShare() again to show it again.
• If the user stops the broadcast from Control Center, the SDK ends the share for you and onStreamDisabled fires. You do not need to call disableScreenShare().
• If Info.plist has no RTCScreenSharingExtension or RTCAppGroupIdentifier key, or your app is not in that App Group, enableScreenShare() rejects with 3013 ERROR_GET_DISPLAY_MEDIA. Check Steps 7 to 10.
• iOS shares the screen without its audio. The withAudio option of createScreenShareVideoTrack() works on Android only.
• To learn more about the screen share methods and events, see Screen Share.