Skip to main content

Share screen - React Native iOS

Contents#

  1. Create Broadcast Upload Extension in iOS
  2. Create iOS Native Module for RPSystemBroadcastPickerView

Create Broadcast Upload Extension in iOS#

Step 1 : Open Target#

Open your project with xcode, select File > New > Target in menu bar.

IOS Screen Share

Step 2 : Select Target#

Choose Broadcast Upload Extension, and click next.

IOS Screen Share

Step 3 : Configure Broadcast Upload Extension#

Enter extensions name in Product Name field, choose team from dropdown, Uncheck include UI extension field and click finish.

IOS Screen Share

Step 4 : Activate Extension scheme#

You will be prompted Activate "Your-Extension-name" scheme? pop-up, click activate.

IOS Screen Share

Now, broadcast folder will appear in xcode left side bar.

IOS Screen Share

Step 5 : Add External file in Created Extension#

Open videosdk-rtc-react-native-sdk-example, Copy SampleUploader.swift, SocketConnection.swift, DarwinNotificationCenter.swift, and Atomic.swift files to your extension's folder and make sure they're added to the target.

Step 6 : Update SampleHandler.swift file#

Open SampleHandler.swift and Copy SampleHandler.swift file content and paste it to your extensions SampleHandler.swift file.

Step 7 : Add Capability in App#

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

IOS Screen Share

Select App Groups from list

IOS Screen Share

After that, you have to select or add generated app group id which you have created before.

IOS Screen Share

Step 8 : Add Capability in Extension#

Go to Your-Extension-Name > Signing & Capabilities and configure App Group functionality which we had perform in previous steps. (Group id should be same for both targets)

IOS Screen Share

Step 9 : Add App Group Id in Extension File#

Go to extensions SampleHandler.swift file and paste your group Id in appGroupIdentifier constant.

IOS Screen Share

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 extension's Bundle Identifier, go to TARGETS > Your-Extension-Name > Signing & Capabilities .

IOS Screen Share

note

You can also check out extension example code on github

Create iOS Native Module for RPSystemBroadcastPickerView#

Step 1 : Add Files in iOS Project#

Go to Xcode > Your App, create new file name VideosdkRPK.swift

IOS Screen Share IOS Screen Share

After click on Create button, it will prompt you to create bridging header.

IOS Screen Share

After creating bridging header file, create Objective-c file name VideosdkRPK

IOS Screen Share IOS Screen Share

  • For VideosdkRPK.swift file, copy the content from VideosdkRPK.swift.

  • For Appname-Bridging-Header file, just add #import "React/RCTEventEmitter.h" line.

  • For VideosdkRPK.m file, copy the content from VideosdkRPK.m.

Step 2 : Integrate Native Module on React native side#

  • Create file with name VideosdkRPK.js and copy the code from VideosdkRPK.js.

  • Add below lines for handling enable and disable screen share event.

import React, { useEffect } from "react";import VideosdkRPK from "../VideosdkRPK";import { TouchableOpacity, Text } from "react-native";
const { enableScreenShare, disableScreenShare } = useMeeting({});
useEffect(() => {  VideosdkRPK.addListener("onScreenShare", (event) => {    if (event === "START_BROADCAST") {      enableScreenShare();    } else if (event === "STOP_BROADCAST") {      disableScreenShare();    }  });
  return () => {    VideosdkRPK.removeSubscription("onScreenShare");  };}, []);
return (  <>    <TouchableOpacity      onPress={() => {        // Calling startBroadcast from iOS Native Module        VideosdkRPK.startBroadcast();      }}    >      <Text> Start Screen Share </Text>    </TouchableOpacity>
    <TouchableOpacity      onPress={() => {        disableScreenShare();      }}    >      <Text> Stop Screen Share </Text>    </TouchableOpacity>  </>);
  • VideosdkRPK.startBroadcast() method results below image

IOS Screen Share

After clicking Start Broadcast button, we wiil be able to get the screen stream in session.