React Native CLI Setup

This guide covers screen share setup for Android and iOS in React Native apps.

Android Setup

Android uses a foreground service for screen capturing, managed by @stream-io/react-native-webrtc.

Edit AndroidManifest

Declare foreground service permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<!-- We declare the permissions to for using foreground service -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

Changes to MainActivity

Add the following import:

import com.oney.WebRTCModule.WebRTCModuleOptions

import com.oney.WebRTCModule.WebRTCModuleOptions;

After that, add the following code inside the onCreate function:

override fun onCreate(savedInstanceState: Bundle?) {
    val options: WebRTCModuleOptions = WebRTCModuleOptions.getInstance()
    options.enableMediaProjectionService = true
    // ..the rest
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
    options.enableMediaProjectionService = true;
    // ..the rest
}

iOS Setup

Screen sharing requires iOS 14+. Create a Broadcast Upload Extension to capture screen contents.

Step 1: Create the Broadcast Upload Extension

Open your project with Xcode, select File > New > Target in menu bar. Select Broadcast Upload Extension, and click Next.

Enter a name in Product Name field, lets say "Broadcast Extension", choose the Team from dropdown, choose the Language to be Swift from dropdown, uncheck include UI extension field and click Finish. You will then be prompted with pop-up titled Activate "Broadcast Extension" scheme?, click Activate button on that.

Step 2: Copy over the files from Sample App

From @stream-io/video-react-native-dogfood app, copy the content of SampleHandler.swift file and paste it to the SampleHandler.swift file in your extension and also copy Atomic.swift, SocketConnection.swift, SampleUploader.swift and DarwinNotificationCenter.swift files to your extension's folder and ensure that they are added to the target.

Step 3: Add App Group Id

Go to App-Name > Signing & Capabilities and add App Groups Capability. Also, go to Broadcast Extension > Signing & Capabilities and add App Groups Capability.

Then, select or add a new app-group-identifier to both the App and the Extension. Ensure that the App Group for both the targets are the same.

Then, head over to SampleHandler.swift file and paste the app-group-identifier in the appGroupIdentifier constant variable.

Step 4: Update Info

Go to the info.plist of the App and add two new keys:

Head over to the Info of the broadcast extension target and ensure that the Bundle version string (short) is the same for both the App and the broadcast extension.

Finally, head over to the Build Settings of the broadcast extension target and ensure that the iOS Deployment Target is 14.0 or above. The deployment target is the minimum iOS version that the extension can run on. The minimum it can run on is 14.0. But if your app is set to a higher iOS deployment target then it is best to keep them both aligned.