React Native PeerJS with WebRTC Zoom Video Call App

SETUP A ZOOM VIDEO CALL APP USING REACT NATIVE, PEERJS SERVER, WEBRTC

Let's move ahead to setup a working react native webrtc app, and also setup a custom peerjs server we would use to connect from the client(which is our app) to the backend(express js node app). WebRTC makes it easy and is fully customizable to transform your incoming streams from your camera and update frequently without delay. Zoom is an example of an app that uses the webrtc to transfer streams through there custom ICU servers to other clients via maybe a specific ID to identify the user the request is going to. 

REACT NATIVE ZOOM VIDEO CALL CLONE APP TUTORIAL

Before you proceed Check out some of this tutorials.

RealTime Whatsapp chat app 

Laravel Custom Local Server

60FPS Framer Motion Animations.

What we need for React Native WebRTC


HOW TO USE REACT NATIVE WEBRTC

Here are the steps we are going to use to create this video call app.

  • 1. Install this dependencies
  1. \"react-native-webrtc\": \"^1.84.1\"
  • 2. Open your android folder,  In android/app/src/main/AndroidManifest.xml add these permissions
<uses-permission android:name=\"android.permission.CAMERA\" />
<uses-feature android:name=\"android.hardware.camera\" />
<uses-feature android:name=\"android.hardware.camera.autofocus\"/>
<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\"/>

Note: If you are using React Native +60.0 you do not need to border to link the project. Because react native now supports autolinking for packages.

  • 3.  In android/settings.gradle, includes WebRTCModule
include':WebRTCModule', ':app'
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
  • 4. In android/app/build.gradle, add WebRTCModule to dependencies
dependencies {
  ...
  implementationproject(':WebRTCModule')
}

If when you try to run the app and there was an error about groovy. Just go ahead to update your gradle version to this one from - gradle.wrapper.properties

distributionUrl=https\\://services.gradle.org/distributions/gradle-6.6.1-all.zip
  • 5. Lastly in android\\gradle.properties
android.enableDexingArtifactTransform.desugaring=false

How to setup Peer Js Server

Apart from react native webrtc, peer js is the backbone of everything we want to do here. It this peerjs thats create a peer to peer stream for multiple users connected to each other using there specific Id's generated from the peer connection.
Inside Express js simple server add this lines of code to it.

const { ExpressPeerServer } = require(\"peer\");
const customGenerationFunction = () =>
  (Math.random().toString(36) + \"0000000000000000000\").substr(2, 16);
const peerServer = ExpressPeerServer(server, {
  debug: true,
  path: \"/\",
  generateClientId: customGenerationFunction,
});
app.use(\"/mypeer\", peerServer)

Now go ahead and watch this video to create a live working video call app