React Native Video Calling App with react-native-webrtc

What is react-native-webrtc Module?

WebRTC stands for Web Real-Time Communication, and it is a set of technologies that enable peer-to-peer audio and video communication between browsers and mobile devices.

react-native-webrtc module exposes the native WebRTC APIs for iOS and Android platforms, such as RTCPeerConnection, RTCDataChannel, RTCMediaStream, RTCMediaStreamTrack, etc. It also provides some additional components and hooks for easier integration with React Native.

To use react-native-webrtc module in your React Native app, you need to install it using the following command:

npm install react-native-webrtc --save

Implementation on iOS

1. Install cocoapods

npx pod-install

2. Update App permissions in Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>

Implementation on Android

1. Update App permissions in android/app/src/main/AndroidManifest.xml

2. Add the following lines in android/app/build.gragle to enable support for Java 8

What is WebRTC?

WebRTC is a set of technologies that enable peer-to-peer audio and video communication between browsers and mobile devices. It consists of three main components:

• MediaStream: This represents a stream of media data, such as audio or video. A MediaStream can have one or more MediaStreamTracks, which are the individual sources of media data.
• RTCPeerConnection: This represents a connection between two peers that can exchange media and data. A RTCPeerConnection can have one or more MediaStreams attached to it, which are sent or received by the peers.
• RTCDataChannel: This represents a bidirectional data channel between two peers that can exchange arbitrary data. A RTCDataChannel can be created on top of a RTCPeerConnection.

WebRTC uses several protocols and mechanisms to establish and maintain the peer-to-peer connection, such as:

• SDP: Session Description Protocol. This is a format for describing the media and data capabilities and preferences of each peer. SDP is used to negotiate the parameters of the connection, such as codecs, resolutions, bitrates, etc.
• ICE: Interactive Connectivity Establishment. This is a framework for finding the best possible network path between two peers. ICE uses various techniques to discover the local and public IP addresses and ports of each peer, such as STUN and TURN servers.
• STUN: Session Traversal Utilities for NAT. This is a protocol for discovering the public IP address and port of a peer behind a NAT (Network Address Translation) device, such as a router or firewall.
• TURN: Traversal Using Relays around NAT. This is a protocol for relaying media and data through a server when a direct connection between two peers is not possible due to NAT or firewall restrictions.
• RTP: Real-time Transport Protocol. This is a protocol for transmitting media data over UDP (User Datagram Protocol). RTP provides features such as sequencing, timing, synchronization, etc.
• SRTP: Secure Real-time Transport Protocol. This is an extension of RTP that provides encryption and authentication for media data.

For more information, please refer to the official docs: https://webrtc.org/

What is WebRTC Signalling?

WebRTC signalling is the process of exchanging information between two peers before and during the peer-to-peer connection. Signalling involves sending messages such as:

• Session initiation: This is when one peer initiates the connection by sending an SDP offered to another peer.
• Session negotiation: This is when the peers exchange answer SDP and candidate ICE messages to agree on the parameters of the connection.
• Session termination: This is when one peer ends the connection by sending a bye message to another peer.

WebRTC does not specify how signalling should be implemented or what protocol should be used for it. Signalling can be done using any method or technology that allows two peers to communicate with each other, such as HTTP, WebSocket, Socket.io, XMPP, SIP, etc.

In this article, we will use Socket.io as our signalling method. Socket.io is a library that enables real-time bidirectional communication between clients and servers using WebSocket as the underlying transport protocol.

How to Build a WebRTC Signalling Server?

A WebRTC signalling server is a server that handles the signalling messages between two peers who want to establish a peer-to-peer connection. The signalling server does not participate in the media or data transmission between the peers; it only acts as an intermediary for exchanging information.

Now, we will build a simple WebRTC signalling server using Node.js and Socket.io. The server will have the following features:

• Listening for incoming connections from clients (React Native apps) using Socket.io.
• Maintaining a list of connected clients and their socket IDs.
• Broadcasting messages from one client to all other clients using Socket.io rooms.
• Handling offer SDP messages from clients who want to initiate a connection with another client.
• Handling answer SDP messages from clients who want to accept a connection from another client.
• Handling candidate ICE messages from clients who want to exchange network information with another client.
• Handling bye messages from clients who want to end a connection with another client.

Before we start, make sure to install the following dependencies:

In your Node js server

npm install express

npm install socket.io

In your React Native app

npm install react-native-webrtc
npm install react-native-svg
npm install socket.io-client

Let's setup our WebRTC Node Js project

// our folder structure will look like this

server
    └── index.js
    └── socket.js
    └── package.json

Content in index.js

Content in socket.js

That's it, we're done with our WebRTC signaling server project. Let's connect it to a frontend React Native project.

Developing React Native WebRTC Application

Before we start, let's understand the app's flow before we start developing the client side. When the user starts the app, we will provide them with a CallerId (A 5 digit random number).

For example, Rachel and Ross have CallerIds of 54678 and 21345 respectively. If Rachel initiates the call to Ross with her CallerId, Rachel will now see an Outgoing call screen, whilst Ross will see an Incoming call screen with an Accept button. Rachel and Ross will attend the meeting after accepting the call.

We will create 3 screens to achieve this flow: JoinScreen, IncomingCallScreen, and OutgoingCallScreen A text input component

We will also use assets from this source: https://github.com/videosdk-live/webrtc/tree/main/react-native-webrtc-app/client/asset Make sure you have all the assets downloaded in the "assets" folder within the project directory.

1. Create a TextInput Component

2. Create a Join-Call Screen

3. Create Incoming-Call Screen

4. Create Outgoing-Call Screen

5. Create IconContainer Component

6. Render main UI in App.js

Before starting, we will install a third-party library from Incall-Manager from https://github.com/react-native-webrtc/react-native-incall-manager Install the library in your project, and check al the installation steps carefully before proceeding.

Now that we're all set, let's program our App.js file. Look out for commented lines for explaination of different sections.

If you have any issues related to the code, you can refer to the original source code https://github.com/videosdk-live/webrtc/blob/main/react-native-webrtc-app/client/App.js.