DEV Community

Cover image for How To Integrate Video Calling Feature In React Native Apps
Shyam Vijay
Shyam Vijay

Posted on

How To Integrate Video Calling Feature In React Native Apps

#reactnative #integration #video #calling

A step-by-step guide on adding video calls to React Native apps

The goal of this guide is to demonstrate how to use React Native to build Android and iOS apps the easy way. In this step-by-step tutorial, we will use pre-built APIs and SDKs that can help build our app within a few minutes.

To get started, let’s first skim through the basics of why we are using React Native, while there are a bunch of languages and frameworks out there.

Why Choose React Native For Video Calling APIs?

Not just one or two, React Native have several good reasons why developers like using it to build their apps:

Works on Both iOS and Android: Want to build your app for both iPhone and Android? React Native makes it easier for you. You can write the code once and use it to build your app for both devices. And don’t worry about the look and performance. It feels similar and works the same way everywhere.

Build Faster: React Native is undoubtedly a great choice of framework if you need to develop apps at a faster rate. You need not worry about making mistakes. RN’s Hot Reloading helps you see the output without restarting your app. The less you reload, the more time you save in development.

Lower Costs: This is a good deal, Since you’re only building one app for two platforms, and you can develop it more quickly, the total cost of creating and maintaining the app is usually lower than doing two separate native apps.

Smooth Performance: When you build apps in React Native, it runs smoothly as if it is built directly for iOS or Android. This is because it uses real native components.

Extensive Communication Features: With React Native, you can easily add features like video calls, voice chats, and messaging using available APIs and SDKs. It works well for real-time video chat, especially with tools like WebRTC.

Secure and Compliant: React Native is a good choice if you prioritize security and privacy. It helps you easily achieve the critical privacy standards and encryption criteria that apps require.

Types of React Native Video Call Apps

React Native video call apps can be grouped based on what they’re mainly used for and the tech they rely on. Here’s a simple overview of the common types:

Types of React Native Video Call Apps

1. Basic Video Calling Apps

These apps are made for straightforward video chats either one-on-one or in small groups like the ones you use to talk to friends or coworkers.

They usually rely on services like MirrorFly or Apphitect, which handle the heavy lifting of sending audio and video in real time over the internet. These tools also help manage things like weak signals or dropped connections.

2. Live Streaming Apps

These are designed for broadcasting live video to big audiences, think social media livestreams or online events. They often come with extras like live comments, emojis, and viewer interaction.

Services like GetStream can help you add live streaming features into a React Native app easily.

3. Audio-First Apps with Optional Video

These apps focus mainly on voice conversations, but can include video if needed. They’re built for more organized discussions, with tools like speaker controls, hand-raising, and moderators kind of like online panels, podcasts, or talk shows.

4. Apps with Built-In Video Calling

Some apps aren’t about video calling at their core, but add it as a feature like a doctor’s appointment in a health app, customer support in an e-commerce app, or face-to-face chats in a dating app. This is when you can go for tools like MirrorFly, Sendbird, or CometChat that offer ready-to-use features for adding video and chat to these types of apps.

5. Specialized or Niche Apps

These are built for specific needs, for example, virtual classrooms with lesson tools, online conferences with breakout rooms, or work apps with screen sharing and whiteboards. They’re usually customized to fit what their users need most.

Must-Have Features When Developing a Video Calling App

If you’re building a video chat app in React Native, there are some key features you’ll want to include to make sure it’s easy to use, secure, and works well. Here’s a breakdown of the essentials, explained in simple terms:

  • Video Calling: Lets people have face-to-face conversations over the internet, either one-on-one or in groups, with smooth, high-quality video.

  • Screen Sharing: Allows someone to show what's on their screen to others in real-time during a video call.

  • WebRTC Technology: The behind-the-scenes tech that makes voice and video calls work quickly and smoothly right in your web browser or mobile app.

  • Voice Broadcasting: Useful for things like webinars, where one person needs to talk to a big group without interruptions or feedback.

  • Private and Group Chat: Lets users send instant messages to individuals or groups, either during a call or separately.

  • End-to-End Encryption: Protects conversations so that only the people in the chat or call can see or hear what’s being shared.

  • User Login and Permissions: Makes sure only the right people can sign in, access the app, or join calls.

  • Push Notifications: Sends alerts when there’s an incoming call, a missed call, or a new message.

  • Message Tracking: Lets users see if their messages were delivered and read in a chat.

  • Chatbots or AI Helpers: Can help automate things like joining a call, booking meetings, or answering common questions.

  • File and Media Sharing: Lets users send things like documents, images, or slides during or outside of calls.

  • Works on All Devices: The app runs smoothly on phones, tablets, and computers, no matter the platform.

How A Video Call Works In A React Native App

How A Video Call Works In A React Native App

1. Caller Starts the Call

  • The person who wants to make the call taps a button in the app.
  • The app uses a tool called CallKeep to show the system’s calling screen (like a regular phone call).
  • The app also tells Firebase that a call has started.
  • Firebase then sends a VoIP push notification to the person being called to let their phone know a call is coming in.

2. Receiver Gets the Call

  • The person receiving the call sees a ringing screen pop up on their phone.
  • CallKeep is used again to show this incoming call screen.
  • If they choose to answer, they’re connected to a Call room, which is where the video/audio call actually happens.

3. Both Users Join the Call

  • After the receiver accepts, the app tells Firebase that the call has been answered.
  • The original caller is also connected to the same Call room.
  • Now, both users are in the same virtual space and can see and hear each other.

4. Ending the Call

  • If the receiver hangs up, the app tells CallKeep to close the call screen.
  • The receiver leaves the Call room.
  • Firebase is updated when the call ends, and it sends a regular push notification (not VoIP) to the caller’s device.
  • The caller’s app then ends the call on their end too and disconnects from the Call room.

💡 Quick Tips for Developers

  • Keep UUIDs Consistent
    Every call gets its own unique ID (called a UUID). That same ID should be used throughout the entire call process. Only create a new one if it's a brand-new call.

  • Only One VoIP Push Per Call
    When starting a call, send just one VoIP push notification to the receiver. Do not send one to end the call. Use a regular push notification instead. Apple enforces this strictly.

  • Always Report Calls to CallKeep
    Whenever your app receives a VoIP push, report the incoming call using CallKeep. When the call ends, report that too using the same UUID.

  • Ask for Permissions
    Before the call starts, your app needs to ask users for permission to use the camera and microphone.

  • Listen for Events
    Your app should listen for important events such as:

    • Incoming push notifications
    • When the user answers or ends the call
    • Other call-related actions

Once these events have occurred, remove the listeners so they are not left running in the background.

Handle Tricky Situations

  • If the person being called is already on another call, use checkIfBusy() to notify the caller.
  • You can place calls on hold using setOnHold().
  • On Android, if the app is in the background or not running, use headless tasks to properly handle ending or rejecting calls.

Step-By-Step Guide: How To Build A React Native Video Calling App

In this tutorial, we will use a React Native Video Calling SDK from MirrorFly to speed up the process and complete the entire development in 10 mins

Requirements

When integrating MirrorFly in a React Native project, ensure all required peer dependencies are installed with the exact versions specified to avoid compatibility issues.

  • Node >= 18.20.4
  • npm - 10.7.0
  • react-native >= 0.73.0 <= 0.75.4

Get SDK License Key

To integrate the MirrorFly Call SDK into your React Native app, you’ll need an SDK License Key. This key is used by the MirrorFly server to authenticate your app’s SDK instance.

MirrorFly Video SDK License Key

  • Contact the MirrorFly team to create a user account.
  • Log in to your MirrorFly account.
  • Navigate to the Application Info section to retrieve your License Key.

Integrate Call SDK into Your React Native App

MirrorFly’s Call SDK for React Native streamlines the implementation of in-app calling functionality, providing all the core features needed for real-time communication.

Installation via npm

  • Step 1: Add the MirrorFly SDK to your project using npm: 
  npm i mirrorfly-reactnative-sdk
Enter fullscreen mode Exit fullscreen mode
  • Step 2: Import the SDK into the required module or component: 
  import { SDK } from "mirrorfly-reactnative-sdk";
Enter fullscreen mode Exit fullscreen mode

Use this import in any file where you need to initialize or interact with the MirrorFly call functionalities.

Adding NPM Package Dependencies for Call SDK Integration

First, include the necessary chat-related dependencies as outlined in the MirrorFly documentation.

Next, add the call-specific dependencies required for enabling in-app calling functionality:

{
  // Add chat related dependencies. And then add the below calls related dependencies
  "react-native-webrtc": "124.0.4", // must use version "124.0.4"
  "react-native-background-timer": "^2.4.1",
  "react-native-permissions": "^5.2.1"
}
Enter fullscreen mode Exit fullscreen mode

Ensure all peer dependencies are resolved and linked properly, especially if using React Native versions below 0.60.

Initialize calls SDK

To initialize the MirrorFly Call SDK, you’ll need to provide specific parameters that enable the SDK to respond to connection status changes within the client application.

Pass your license key to the licenseKey parameter, along with any other required initialization data. Use the following method to initialize the SDK:

const incomingCallListener = (res) => {};
const callStatusListener = (res) => {};
const userTrackListener = (res) => {};
const muteStatusListener = (res) => {};
const missedCallListener = (res) => {};
const mediaErrorListener = (res) => {};
const callSpeakingListener = (res) => {};
const callUsersUpdateListener = (res) => {};
const callSwitchListener = (res) => {};
const userCallLogListener = (res) => {};
Enter fullscreen mode Exit fullscreen mode 
const helper = {};
Enter fullscreen mode Exit fullscreen mode 
const initializeObj = {
  apiBaseUrl: `API_URL`,
  licenseKey: `LICENSE_KEY`,
  isTrialLicenseKey: `TRIAL_MODE`,
  callbackListeners: {
    connectionListener,
    incomingCallListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    missedCallListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    callSwitchListener,
    userCallLogListener,
    helper
  },
};

await SDK.initializeSDK(initializeObj);
Enter fullscreen mode Exit fullscreen mode

Ensure this method is invoked during your app’s startup flow or wherever appropriate for SDK readiness.

Sandbox Configuration

You can retrieve the apiUrl and licenseKey required for SDK initialization from the Overview section of the MirrorFly Console dashboard.

These values are essential for authenticating your application and establishing a connection to the MirrorFly services during development and testing in the sandbox environment.

function connectionListener(response) {
  if (response.status === "CONNECTED") {
    console.log("Connection Established");
  } else if (response.status === "DISCONNECTED") {
    console.log("Disconnected");
  }
}
Enter fullscreen mode Exit fullscreen mode 
const initializeObj = {
  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener,
  },
};
await SDK.initializeSDK(initializeObj);
Enter fullscreen mode Exit fullscreen mode

Example Response 

{
  "statusCode": 200,
  "message": "Success"
}
Enter fullscreen mode Exit fullscreen mode

User Registration

  • Step 1: Register a new user using the following method:
  • Step 2: On successful registration, the SDK will return a username and password. These credentials are required to establish a server connection using the connect() method. 
await SDK.register(`USER_IDENTIFIER`, `ANDROID_FCM_TOKEN`, `IOS_VOIP_TOKEN`, `IS_PRODUCTION`);
Enter fullscreen mode Exit fullscreen mode

Sample code for register user 

import messaging from '@react-native-firebase/messaging';
import RNVoipPushNotification from 'react-native-voip-push-notification';
Enter fullscreen mode Exit fullscreen mode 
RNVoipPushNotification.addEventListener('register',
  async voipToken => {
    const fcmToken = await messaging().getToken();
    SDK.register(userIdentifier, fcmToken, voipToken, process.env?.NODE_ENV === "production");
  }
);
Enter fullscreen mode Exit fullscreen mode 
// =====  register for VOIP  =====
RNVoipPushNotification.registerVoipToken();
Enter fullscreen mode Exit fullscreen mode

Sample Response: 

{
  "statusCode": 200,
  "message": "Success",
  "data": {
    "username": "123456789",
    "password": "987654321"
  }
}
Enter fullscreen mode Exit fullscreen mode

Connecting to the MirrorFly Server

  • Step 1: Use the username and password obtained during user registration to establish a connection to the MirrorFly server
  • Step 2: On successful connection, the SDK returns a response with statusCode: 200. If the connection fails, an execution error will be thrown.
  • Step 3: You can monitor real-time connection state changes via the connectionListener callback, which helps you track events like connected, disconnected, or connection lost.
  • Step 4: In case of a failure during the connection attempt, the error details will be available in the callback for debugging and handling purposes. 
{
  "message": "Login Success",
  "statusCode": 200
}
Enter fullscreen mode Exit fullscreen mode

Generating a User JID

To generate a JID (Jabber ID) for any registered user, use the following method:

const userJid = SDK.getJid(USER_NAME);
Enter fullscreen mode Exit fullscreen mode

This method constructs the fully qualified JID required for identifying users during call operations or messaging within the MirrorFly infrastructure.

Wrapping Up

Using MirrorFly’s React Native Video SDK makes it much easier to add video calling to your mobile app without having to build everything from the ground up. The SDK takes care of the heavy lifting like user setup, server connection, and managing call IDs so you can focus on your app's core experience.

This step-by-step guide walks you through the basics, making it simple to get started. To get the most out of it in a live app, make sure to handle things like connection updates, push notifications, and any errors properly. When you're ready to go deeper, the official docs have everything you need to customize and scale further.

Top comments (0)