Quick start

Integrate the SDK

Import the SDK

1. Add the @zegocloud/zego-uikit-prebuilt-video-conference-rn as dependencies.

yarn add @zegocloud/zego-uikit-prebuilt-video-conference-rn

npm install @zegocloud/zego-uikit-prebuilt-video-conference-rn

2. Add other dependencies.

Run the following command to install other dependencies for making sure the @zegocloud/zego-uikit-prebuilt-video-conference-rn can work properly:

yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0

npm install @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0

Using the ZegoUIKitPrebuiltVideoConference component in your project

• Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
• Specify the userID and userName for connecting the Video Conference Kit service.
• Create a conferenceID that represents the video conference you want to start.

// App.js
import React, { Component } from 'react';
import ZegoUIKitPrebuiltVideoConference from '@zegocloud/zego-uikit-prebuilt-video-conference-rn'

export default function VideoConferencePage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltVideoConference
                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}
                conferenceID={conferenceID} // conferenceID can be any unique string. 

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

Configure your project

• Android:

1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the following:

<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" />
<uses-permission android:name="android.permission.VIBRATE"/>

2. Open my_project/android/app/proguard-rules.pro file and add the following:

-keep class **.zego.**  { *; }

• 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 & Test

• Run on an iOS device:

yarn ios

npm run ios

• Run on an Android device:

yarn android

npm run android

Related guide

Custom prebuilt UI

Resources