Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Add A Video Call Feature To Your React Native App

How To Add A Video Call Feature To Your React Native App

Video call functionality is now a vital feature of almost every modern messaging app. This is simply because of the ease and interactivity that it offers. There is no doubt that we have used the video chat feature in many social media apps, even without knowing it. Facebook Messenger, WhatsApp, and even Snapchat support video call functionality.

Adding video call functionality to an app from scratch is not an appealing experience. It takes a whole lot of time to implement. This is totally different from ZegoCloud’s Call Kit. You can build a reliable and full-featured video call feature in an app using the ZegoCloud Call Kit.

Today, we’ll learn how to implement a React Native video call app with ZEGOCLOUD’s Call Kit SDK. This SDK will act as a react native video call SDK. Without further ado, let’s get started!

Introduction to the Call Kit SDK

Call Kit is a feature-rich prebuilt UI and call component that enables you to build flagship and highly reliable one-on-one or group voice or video call features into your app with only a few lines of code. What this means is that you can easily integrate video and voice call functionality by calling an already existing React Native video API that comes with the SDK we’re going to integrate.

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 very powerful 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 allows you to 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’re going to 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 even 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 above-mentioned features, 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: Login to the Zegocloud admin console.

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

sign up page

Step 2: Create a new project

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

dash react native kit

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

use case react native video call

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.

uikit react native videos

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 then proceed with building our React Native video call app.

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

app credential page react native video

Import the Call Kit SDK.

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

  1. Install the React Native CLI.
npm install -g react-native-cli
  1. Create a project.
react-native init call
  1. Add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies.
npm install @zegocloud/zego-uikit-prebuilt-call-rn
  1. 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 have a dependency 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, appSign, and UserName in app.js with the credentials from 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 useID and a callID.

Your userID is much like a phone number; you can choose whatever method you like. The callID is then 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 callID can talk to each other.

Configure your project

We’re almost done. There are some things that need to be done before we can proceed to 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? In order to test the app, run the code below:

Android test:

npm run android

iOS test:

npm run ios

You either have to test the app with an emulator or on a real device through USB debugging.

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 with the same method we used in creating this React Native video call app.

You can download the sample demo source code for this article.

If you have any questions, you can always consult our 24-hour technical support.

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts