TheLazy.Dev
Portfolio GitHub

Blog

reactnative |mobile |zegocloud |javascript

Add Voice & Video calling Feature in React Native using ZEGOCLOUD

zainbinfurqan

Zain Ahmed

Posted on December 10, 2022

Add Voice & Video calling Feature in React Native using ZEGOCLOUD

On one of my React Native project related to Medical field required to add a Video calling feature in Mobile application & for that I search some third part libraries/SDKs. I found ZEGOCLOUD SDK for React Native Video calling and turn out it was pretty simple and easy to integrate in React Native for Android & IOS

Setup ZEGOCLOUD Account/Project

After signup to ZEGOCLOUD you will landed to Admin panel from where create a project with suitable name.

create project screen

Their will be multiple options like Video calling, Live Streaming, In App Chatting etc., we will select Video Chat

select use case for you pproject

Click the next button and select Start with UIKits

select name and UIKits

select mobile application tech stack

  1. Select React Native option for React Native Video Calling mobile application

You can also do some basic configuration from right side panel

select app configuration

  1. Click save button on bottom right

  2. Click on Quick start button but before click save the *AppID *_and **_AppSign**

  3. Open package.json and add this all libraries & run command npm i

"@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"
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Create a component and add following code, it will show a button to join a call 
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>
    )
}
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Add a component for Video calling 
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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Image description

Add Device permission

Android

  1. Go to file project-name/android/app/src/main/AndroidManifest.xmland add below code 
<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" />
Enter fullscreen mode Exit fullscreen mode

Image description

  1. Go to file my_project/android/app/proguard-rules.pro and add below code 
-keep class **.zego.**  { *; }
Enter fullscreen mode Exit fullscreen mode

Image description

IOS

9.Go to this file my_project/ios/my_project/Info.plist and add below code

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>
Enter fullscreen mode Exit fullscreen mode

Image description

Run Application

Run on an iOS device: yarn ios
Run on an Android device: yarn android

Checkout ZEGOCLOUD documentation for more understanding and other common use cases. You can get a sample source code for React Native Voice & Video Calling demo from their documentation a

💖 💪 🙅 🚩
zainbinfurqan
Zain Ahmed

Posted on December 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Add Voice & Video calling Feature in React Native using ZEGOCLOUD
reactnative Add Voice & Video calling Feature in React Native using ZEGOCLOUD

December 10, 2022