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.
Their will be multiple options like Video calling, Live Streaming, In App Chatting etc., we will select Video Chat
Click the next button and select Start with UIKits
- Select React Native option for React Native Video Calling mobile application
You can also do some basic configuration from right side panel
- Click save button on bottom right
Click on Quick start button but before click save the *AppID *_and **_AppSign**
Open
package.jsonand add this all libraries & run commandnpm 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"
- 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>
)
}
- 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>
)
}
Add Device permission
Android
- 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" />
- Go to file
my_project/android/app/proguard-rules.proand add below code
-keep class **.zego.** { *; }
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>
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
Top comments (0)