How to Build a React Native Video Call App

Video calling has become a crucial daily activity nowadays and we can maintain good connections with our loved ones. Today, let’s build our own React Native app that enables us to conduct video calls. Throughout this tutorial, we will learn how to implement a react native video call app using the ZEGOCLOUD video call API.

Why ZEGOCLOUD React-native-video SDK

ZEGOCLOUD is a video communication platform that provides an API for developers to integrate video call functionality into their React Native applications. With its React Native Video Call API, developers can easily build cross-platform video communication apps for iOS and Android.

ZEGOCLOUD React Native Video Call API offers a range of features including high-quality video and audio transmission, real-time messaging, screen sharing, and recording. The API is easy to use and provides detailed documentation, making it simple for developers to integrate video calling into their React Native apps.

It also provides a range of customization options, allowing developers to easily customize the user interface and experience of their video communication app. Additionally, the API offers real-time analytics and monitoring, enabling developers to track the performance of their app and optimize it for their users.

Moreover, ZEGOCLOUD provides pre-built UIKits including Call Kit which is a feature-rich prebuilt UI and calls component that enables you to build flagship and highly reliable one-on-one or group video call features into your app with only a few lines of code. You can easily integrate video and voice call functionality by calling an existing React Native video API with the SDK we will incorporate.

When do you need the Call Kit?

The benefits of using Call Kit cannot be overstated. There is definitely no doubt that it is the best video call SDK out there. The Call Kit is mighty for many reasons.

And you may want to use it because of the following reasons:

1. Build apps faster and easier.

This is one of the primary reasons for the development of Call Kit. It lets you get your video call apps up and running with a few lines of code. You don’t have to worry about the core implementation, as everything is taken care of behind the scenes. Call Kit also supports many frameworks, so you don’t have to learn any frameworks to use them. For instance, we will implement a video call feature using React’s native video SDK. If you are unfamiliar with React Native, you can use other development tools such as Flutter or Web.

2. Customize the UI and features as needed.

Call Kit is highly customizable, unlike other UIKit tools out there. You can easily customize the look and improve the features of your video call app as per your needs by simply tweaking the code. There’s no doubt that the Call Kit SDK has all the functionality you could ever need in a call app.

Apart from the two features mentioned above, below are some powerful features that the Call Kit SDK offers out of the box:

Ready-to-use 1-on-1/group calls
Customizable UI styles
Real-time sound waves display
Device management
Switch views during a 1-on-1 call.
Extendable menu bar
Participant list

Preparation

A ZEGOCLOUD developer account —Sign up
VS Code or Android Studio 2.0 and above
Android/iOS/computer device with audio and video support
Basic understanding of app development

Call Kit SDK Integration.

Obtain App Credentials

Follow the steps below to get app credentials and integrate the Call Kit SDK into your project.

Step 1: Log in to the Zegocloud admin console.

Create an account or log in to the ZegoCloud admin console if you already have one.

Step 2: Create a new project

Click on “Create a new project” to get started with Call Kit integration processes.

Select “Voice and Video” under “Call Kit” in the app use cases section. Click on “Next” to proceed.

Step 3: Enter the project name.

Note: A project name will only contain numbers, letters, and underlines (_).

You can choose whatever name you like. Provided that you follow the rules.

project name react native video call sdk

Step 4: UI customization kits

Choose “UIKit” since we’re only testing our project. You can choose an SDK customization level if you’re building for production and need complex customization in your video call app.

After selecting the UI customization option, wait for the build process to finish.

build process react native video call app

Step 5: Choose a platform.

Choose the platform you’re building for. In this article, we’ll be using React Native. So, select “React Native” as the platform. With React Native, we can build our React Native video call app.

Click on “Get configuration and integration files” to access app details, including app credentials.

Import the Call Kit SDK.

Follow the steps below to import the Call Kit SDK into your project:

Install the React Native CLI.

npm install -g react-native-cli

Create a project.

react-native init call

Add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.

npm install @zegocloud/zego-uikit-prebuilt-call-rn

Add other dependencies.

npm install @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative

To ensure that our zego-uikit-prebuilt-call-rn works well, run the code below to add other necessary dependencies.

Making Use of Call Kit Dependency

We now depend on Call Kit, which we will use to implement our native video call in React.

Follow the steps below to get started with it:

1. Enter the app’s credentials.

Replace appID, app sign, and UserName in app.js with the credentials from the ZEGOCLOUD admin console.

 // App.js

import React, { Component } from 'react';

import ZegoUIKitPrebuiltCall, { ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn'

export default function VoiceCallPage(props) {

    return (

        <View style={styles.container}>

            <ZegoUIKitPrebuiltCall

                appID={yourAppID}

                appSign={yourAppSign}

                userID={userID} // userID can be something like a phone number or the user id on your own user system. 

                userName={userName}

                callID={callID} // callID can be any unique string. 

                config={{

                    // You can also use ONE_ON_ONE_VOICE_CALL_CONFIG/GROUP_VIDEO_CALL_CONFIG/GROUP_VOICE_CALL_CONFIG to make more types of calls.

                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,

                    onOnlySelfInRoom: () => { props.navigation.navigate('HomePage') },

                    onHangUp: () => { props.navigation.navigate('HomePage') },

                }}

            />

        </View>

    );

}

2. Create a user and a callID.

Your user ID is much like a phone number; you can choose whatever method. The call ID is the unique identifier for the call you’re making.

Note: userID and callID can only contain numbers, letters, and underlines (_).

Users that join the call with the same call ID can talk to each other.

Configure your project

We’re almost done. Some things need to be done before we can test our project.

The most important thing is permission.

React Native creates applications for Android and iOS. Hence, we’ll be enabling permission for the two operating systems.

1. Permission for Android devices

To enable microphone and camera usage on Android, do the following:

Open the my_project/android/app/src/main/AndroidManifest.xml File and add the following:

Open the my_project/android/app/proguard-rules.pro File and add the following:

-keep class **.zego.**  { *; }

2. Permission for iOS devices

To enable microphone and camera usage on iOS, do the following:

Open the my_project/ios/my_project/Info.plist File and add the following:

<key>NSCameraUsageDescription</key>

<string>We need to use the camera</string>

<key>NSMicrophoneUsageDescription</key>

<string>We need to use the microphone</string>

Run a demo.

We’re done creating our app. Simple, right? To test the app, run the code below:

Android test:

npm run android

iOS test:

npm run ios

Through USB debugging, you must test the app with an emulator or on an actual device.

If your device isn’t performing well or you’ve noticed UI stuttering, switch to Release mode for a more fluid experience.

Conclusion

Creating apps with video call functionality is never a problem with ZEGOCLOUD’s Call Kit. Just connect and call the API, and you’re good to go. You don’t have to know about complex programming concepts and networking before you can integrate video call functionality into your app. With a few lines of code, you can set up a standard and rich-featured video call app in many frameworks using the same method we used to create this React Native video call app.

Read More