Talk to us
Talk to us
menu

Blog Post

start building
Developer

Make Your Own Video Call App With React Native UIKit

Make Your Own Video Call App With React Native UIKit

As 5G networks become more widely used in everyday life, more individuals are willing to communicate with their friends through social media apps. Even the smallest software systems usually have simple video call functions, enabling users to communicate directly.

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

Introduction to React Native UIKit SDK

React Native UIKit SDK is a brand-new pre-built UIKits and UI Components by ZEGOCLOUD. Through it, We can complete the development of video calls, live streaming, video conference, and other scenarios within 10 minutes.

react native uikit

As shown in the figure, React Native UIKit SDK 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

Implement Video Call

Create Project

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

npx react-native init call
create video call project

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

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>
    )
}

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='16e1c2b4d4c6345c8644546e8fe636d8b7e47d010e9b4a8825439ecd64ccee6f'
            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.

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

Conclusion

Thanks to a rising need for more dependable and dynamic communication, the growth of video streaming apps doesn’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.

If you have deeper requirements, such as streaming mix, noise reduction, censorship, etc. you can use our Core SDK.

If you have any questions, you can always consult us 24h 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

Contact us