Building A Video Streaming App Using Screen Share Using React Native Toolkit
Tags: react, screenshare, videostreaming, api
Published: 2022-07-13 05:37:47

While video meetings make communication more personal, screen sharing makes it more collaborative. With businesses embracing remote and hybrid work where one-to-one and multiparty video calls are a norm, screen sharing becomes all the more crucial.

This post is for you if you’re looking to build a video calling application with screen sharing using React Native.

We have provided a detailed step-by-step guide to explain how you can embed the screen sharing feature in the existing application using EnableX React-Native toolkit.

**Technical Pre-Requisites**
- Nodejs framework
- JDK
- Android Studio (recommended to use LTS version)

## What Is EnableX React Native SDK?
The EnableX-React Native SDK is used to build hybrid real-time communication applications for Android and iOS-based mobile devices.

### Creating Project in EnableX
First, you need to create a project on the EnableX portal. Here are the steps are given below:

- Go to the EnableX portal. If you do not have an account, [Signup here](https://portal.enablex.io/cpaas/trial-sign-up/?utm_source=devto).
- Next, “Create Projects”, enter relevant information as required.
- You get the option to copy App ID & APP Key when you create the project the first time.
In case the project has already been created, users need to go to the Video Project, then select the option: ‘I like to Code’ and then they can view App ID & App Key.

### Creating a ReactNative Project

Now, you need to create a ReactNative project. Follow the steps given below:

**1. Installing the EnableX React Native SDK**
To install the EnableX-ReactNative SDK, open the project, navigate to the ReactNative Project directory and run the following command:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4a9xfytafmzgbxwhxm5.png)

**2. Importing the Reactive Native Class**
Once the installation is done successfully, import ‘enx-rtc-react-native’ in the class where you want to access the EnableX capability.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyv6vjmjbiflm9cm8mpt.png)

**3. How To Start And Stop Screen Sharing**
EnableX-ReactNative SDK is used to start and stop screen sharing, while events are used to handle acknowledgements. To start screen sharing, use the following function:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohavboioi16athdl3rd1.png)

To stop screen sharing, use the following function:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bebh24mj5bo268e4cul.png)

Once the user starts or stops the screen sharing feature, EnableX-ReactNative SDK acknowledges the event by sending event notifications to other participants:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss21lfoba71zlp9zagip.png)

**4. Installing Foreground Service**

Foreground Service is required whenever an application needs to perform a task which is also noticeable by users even when they’re not directly interacting with the app.

Therefore, you need to install the Foreground Service. It is required to use the screen sharing feature in an app.  Here are the steps you need to follow to start the foreground services:

A. Use the following command to add dependency in foreground services:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtk854u9ocnzqavsyo4e.png)

B. Add permissions in “AndroidManifest.xml File”:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zscdjv4ps15dhy25nohj.png)

C. Register for the Foreground Services in the AndroidManifest.xml File:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bxx229lhdpudz42isqd.png)

D. Go to the MainActivity class and add a variable:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d59wzskf9iudvdfdcgy.png)
E. Now, override onNewIntent and onStart function inside the MainActivity class.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ssi3j837926ykmv1ixa.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvjvvkw735b0ebc3d80v.png)

F. MainActivty.java class is a vital component of an Android application through which activities are launched.

Here is how it’s used to add foregroundEmitter function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99b1gl1s8gpa5z0x9i85.png)

**5. Override onActivityResult**
Next, you need to override the onActiveityResult function, which is inside the MainActivity class:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z26m0m80qp4yzrljeh7.png)

**6. Inside the Color.xml file, set the notification color specified in AndroidManifest.xml file:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edubzdhbdv9zhq0r59ny.png)
**7. How to Start Foreground Service**
A. Register a Headless Task (a way to run JavaScript tasks in the background) using  .js file:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1em91hmg72squt81k8m.png)
B. Add a task as shown below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ta75lah5ra2yevtr240.png)
C. To start the Foreground Service class, use the function given below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy2t32wp3sxpda84hl24.png)

**8. How to Stop The Foreground Service**
A. To stop the Foreground Service, you’ll need to remove the task:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2bfo5s8oot5mw722o2k.png)
B. Now you can stop the Foreground Service:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pdtyi34zb2wqqia66ps.png)
Ahoy! you made it. You’re now ready to run the application with screen sharing.

To look at more examples & sample codes, visit our [GitHub repository](https://github.com/EnableX/EnableX-Video-Chat-Application-Sample--with-SwiftUI).

Build something exciting!