Talk to us
Talk to us
menu

How To Make Video Call App With React Native UIKit

How To Make Video Call App With React Native UIKit

Have you considered creating a WhatsApp-like real-time video call app? In this article, I will walk you step-by-step through building a Video Call app using the React Native UIKit SDK.

We will implement the following functions:

  • 1v1 video call
  • Camera switching
  • Microphone, speaker management

React Native UIKit SDK – Make Your App-building Easier

ZEGOCLOUD provides pre-built UIKits to its users for effective building. As you have assessed the need to create a video call app for your system, taking ZEGOCLOUD’s help is effective. Using react native UIKit for video communication would simplify the complete design. Rather than hiring individuals, this turns out to be the best way to execute the process in no time.

Subsequently, ZEGOCLOUD is a swift, comprehensive, and efficient way to create a video call app using its API and SDK service. This is why people prefer going for such solutions that offer quick results. With ZEGOCLOUD, you can induce features like face beautification, super-resolution, and call quality monitory for effective results.

As shown in the figure, React Native UIKit SDK from ZEGOCLOUD is responsible for processing audio and video calls and the logic related to text chat. Include:

  • UI and interaction of the calling module
  • call status management
  • Audio and video data transmission

You only need to implement business-related logic. For example:

  • User login registration
  • Friends List Management
  • Call billing recharge

Preparation

  • A ZEGOCLOUD developer account–Sign up
  • React Native 0.60.0 or later
  • Basic understanding of React Native development
react native uikit

Steps to Implement Video Call

1. Create Project

First, You need to run the following code to create a new project.

npx react-native init call
create video call project

2. Add React Native UIKit SDK dependencies

Next, you need to open the package.json file in the root directory and add the React Native UIKit SDK dependencies.

"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@zegocloud/zego-uikit-prebuilt-call-rn": "^1.2.1",
"@zegocloud/zego-uikit-rn": "^1.2.0",
"react-delegate-component": "^1.0.0",
"react-native-gesture-handler": "^2.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-navigation": "^4.4.4",
"zego-express-engine-reactnative": "^0.21.0"
add sdk dependencies

3. Add a call button

import { NavigationContainer, useNavigation} from '@react-navigation/native';
import React from "react";
import { Button, View} from 'react-native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomePage">
        <Stack.Screen name="HomePage" component={HomePage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomePage(props) {
    const navigation = useNavigation();
    return (
        <View style={{flex: 1,alignItems: 'center',justifyContent: 'space-around'}}>
            <Button title="Call" onPress={() => { navigation.navigate('CallPage') }} />
        </View>
    )
}
react native uikit

4. Add Video Call page

Use ZegoUIKitPrebuiltCall to easily build a Call page

import ZegoUIKitPrebuiltCall, {GROUP_VOICE_CALL_CONFIG} from '@zegocloud/zego-uikit-prebuilt-call-rn';
function CallPage(props) {
  randomUserID = String(Math.floor(Math.random() * 100000))
  return (
      <View style={{flex: 1}}>
          <ZegoUIKitPrebuiltCall
            appID={1484647939}
            appSign='Your App Sign'
            userID={randomUserID}
            userName={'user_'+randomUserID}

            config={{
              ...GROUP_VOICE_CALL_CONFIG,
              onHangUp: () => {props.navigation.navigate('HomePage')},
            }}
          />
      </View>
  )
}

Now, you can make a new call by navigating to this CallPage.

5. Add Device permission

Android:

  1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the permission:
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
  1. Open the my_project/android/app/proguard-rules.pro file and add the following:
-keep class **.zego.**  { *; }
configure project

iOS:

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

Thanks to a rising need for more dependable and dynamic communication, the growth of video streaming apps don’t appear to be slowing down. As a result, plenty of businesses concentrated on creating social apps, video conferencing, and video calling.

We have you covered if you want to enter the video conferencing market, whether you want to start out small by integrating one of our chat widgets or go all in with one of our SDKs.

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

Conclusion

In summary, the best way to create a video call app is with ZEGOCLOUD. However, for enhanced viewing aesthetics, the need for a complete UIKit can make things easier. For this, ZEGOCLOUD provides a complete react native UIKit to utilize. While it saves time, it can be cost-effective for the users in many ways.

Instead of hiring a massive team of developers, using ZEGOCLOUD can be effective for you in all ways. Furthermore, the results would conclude in better speeds with a quality that will surpass expectations.

Read More

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our video APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.