React Native + webRTC (Video Calling Mobile Application)

Demo: https://www.youtube.com/watch?v=7i4sT1B1yz8

Required basic understanding of :

1. React / React Native
2. React Hooks

What we will be creating

1. Video calling application for Android + IOS
2. Implementing webRTC using package “react-native-webrtc”
3. Using Websockets for signaling
4. Using UI components from ‘react-native-paper”

Note: In this guide, we will only implement the frontend part, there will be no guide for backend i.e handling socket events and other backend work.

webRTC is a great tool for establishing real-time communication over web. In this guide we are going to implement webRTC in a React Native mobile application using package react-native-webrtc, basically, this package is an adapter which exposes webRTC classes like RTCPeerConnection ,Media Streams etc.

Steps :

1. Setup a react native project using react-native-cli

You can follow this official guide — https://reactnative.dev/docs/environment-setup

2. After Successfully running your demo application we will install some React Native Libraries for UI and Navigation

Here is my package.json dependencies you also need to install

"dependencies": {
"@react-native-community/async-storage": "^1.10.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.2.3",
"@react-navigation/stack": "^5.2.18",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-incall-manager": "^3.2.7",
"react-native-paper": "^3.9.0",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.7.0",
"react-native-vector-icons": "^6.6.0",
"react-native-webrtc": "^1.75.3"  
}

3. Building Navigation :

For building navigation for our application, we are using react-navigation as you can see in the project dependencies list.

App.js

4. As you can see we are importing Login and Call screens in the App Component, now we will create Login screen :

LoginScreen.js

Here in the above file we are just storing a unique USER ID which will represent this user, and can be referred by another connected user, here you can assign a unique id for any of you users,

THE MAIN CODE FOR IMPLEMENTING WEBRTC :

5.The CallScreen Code:

In the above file, there is a lot of code , I will explain every line of code :

The Main Parts :

setting userID : the user which is currently logged in

connectedUser : while making a call to another user using his ID this variable is assigned to that users ID

Video/Audio Streams:

localStream : Accessing local video stream of a user using his/her mobile camera

remoteStream: When call is connected the receiver video stream is added to this stream variable

NOTE : For accessing video stream you need to set some permissions in you android and ios files Permissions are :

Android — https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md

IOS — https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/iOSInstallation.md

conn: this establishes your WebSocket connection

yourConn : this establishes you RTCPeerConnection which will be further used for setting local/remote descriptions and offers

So Reading all that code in the file you will have
1.Streams
2.Signaling Socket
3.RTCPeerConnection

SOCKET EVENTS :

onmessage : fires when we get a message

Message types and handlers :

1. Offer: when one user tries to call another user he creates and offer and send this offer to the other user, then another user will receive the offer, which is handled by handleOffer.
2. Candidate: when a sender sends the offer and receiver gets it, it means the senders get a candidate then this handle candidate fires signaling that the call has been ringing or awaiting an answer
3. Answer: When a receiver gets an offer he can accept or reject the offer, we can store this offer in variable and later we can create an answer to that offer or can reject/leave
   If we accept the offer we will add our local stream to the connection so that the sender will get to see our video stream and then we create and answer to that offer and send it.
4. Handling Answer: After the receiver sends us an answer, means our call is accepted now we can our and our friend videos on the screens
5. Leave: When we call hangUp means we will end the connected call or reject the incoming offer, then we rest all our variables and close the RTCPeerConnection.

There is concept of like remoteDescription localDescription , you can read this on MDN all about them -https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription

The Process :

1. LOGIN : send message to the socket for login
2. LOCAL STREAM : get video stream from the local user
3. Add Event Listerners for ice candidate update
4. Event Listener ontrack triggers when remote user adds his/her stream to this rtcPeerConnection then we will display it.

Github :https://github.com/skyrocketscommunity/React-native-webrtcApp

Youtube :https://www.youtube.com/watch?v=7i4sT1B1yz8