WebRTC and React-Native
Tags: react, reactnative, webrtc
Published: 2020-05-12 05:24:04

It is a strange time to be a developer, with most countries going into lock-down, the need for communication technologies has sparked.

One of the technologies that has been readily available for web developers to create this solutions is the [WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) which web browsers have implemented [almost across the board](https://caniuse.com/#search=webrtc). The next step for these kind of technologies is to make a jump to mobile, either with PWA or a Native application. The former could be considered already viable but the features that the public expects with video apps has only become more and more complex.

For React-Native Developers the WebRTC solutions have historically had a high barrier of entry. Expo has not yet (as of May 2020) integrated the `react-native-webrtc` native module into their framework despite having [demand for it](https://expo.canny.io/feature-requests/p/webrtc). Of course it is not Expo's responsibility to implement the things that we claim for, that is not how open source works.

> If you want to have WebRTC on your React-Native project you *must* go with the official `npx react-native` CLI. 

## The Setup

`react-native-webrtc`'s documentation has been neglected by the community, as it is one of the least favourite parts of a developer's tasks, but an essential task nonetheless. You can follow the installation guides for both [Android](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md) and [iOS](https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/iOSInstallation.md) but in this post I will try to guide you through a much much simpler process that is made possible thanks to the auto-linking features that came with `react-native@0.60`

## Starting From Scratch

My purpose here is to lower the entrance barrier for people to explore WebRTC technologies, for this reason I will approach this from the perspective of a greenfield project, the typical `npx react-native init myApp` will do.

Once you have a boilerplate project we need add `react-native-webrtc` as a dependency: 

```bash
npm install --save react-native-webrtc
```

From here on our next step is going to be to integrate `react-native-webrtc` with each platform. 

The high-level overview of this setup is: 

- glue the native module to each platform
- ask for the necessary permissions

> I highly recommend you use a physical device to debug. 

## iOS

The iOS integration is the simplest one because _cocoapods_ will do most of the legwork.

On the project's root, locate the podfile under `./ios/podfile`, the first line is where we set the platform version, we will change this to version 10: 

`platform :ios, '10.0'`

On the podfile, locate your project's target pods and add the following line:

```pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'```

Once you've made these changes save everything and open a terminal on your project's root and run `npx pod-install`

Now that you've completed the first step, it's time to ask (nicely) for some permissions, locate the `info.plist` file under `./ios/myApp` and add the following lines after the first `<dict>`:

```xml
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone Permission</string>
```

And that completes the iOS setup portion, easy right? If you only care about the iOS platform then all you need to do now is to run the project on an iPhone.

## Android

The setup process for Android is inherently more complex but we will try to keep it as simple as possible. 

On the project's root locate graddle settings under `./android/settings.graddle` and replace the last line with the following: 

```
include ':WebRTCModule', ':app'
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
```

In the ideal world we would add permissions and be done with it, but bear with me 

![](https://i.imgur.com/zlEH6.gif)


Locate the project's graddle properties under `./android/graddle.properties` and add the following line: 

`android.enableDexingArtifactTransform.desugaring=false`


Locate Android's build properties under `./android/build.graddle` and look for the buildscript dependencies, make sure the tooling is on version *3.5.2*: 

`classpath("com.android.tools.build:gradle:3.5.2")`

On different build properties located under `./android/app/build.graddle` locate the dependencies and add the following line within its scope: 

`compile project(':WebRTCModule')` 

Go into the project's Android `MainApplication.java` located at `./android/app/src/java/com/all/the/things/` and add the namespace for `react-native-webrtc` by adding the following import: 

```java
import com.oney.WebRTCModule.WebRTCModulePackage; 
```

Finally we can ask (nicely) for permissions, locate the project's `AndroidManifest.xml` under `./android/app/src/main` and add the permissions on the same scope as the `<application>` tag with the following lines:

```xml
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.WAKE_LOCK" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-feature android:name="android.hardware.camera" />
 <uses-feature android:name="android.hardware.camera.autofocus"/>
```

Once this is in place we are ready to run the project on a device for testing.

## Conclusion

`react-native-webrtc`'s installation guides while not completely up-to-date, they have valuable information that is still useful for some people. I've made a template application that has been setup for WebRTC broadcasting and includes a simple socket implementation of a signaling server (required to start the Peer Connections), The sample itself is written using hooks and its linked below:

{% github https://github.com/jdmg94/react-native-webrtc-example no-readme %}

What do you think about video broadcasting technologies? What other uses could Real Time Communication technologies be applied to? Have you baked bread during this quarantine yet? Thanks for reading!