Quick start (with cohosting)

Prerequisites

• Go to ZEGOCLOUD Admin Console to create a UIKit project.
• Get the AppID and AppSign of the project.

​If you don't know how to create a project and obtain an app ID, please refer to this guide.

Integrate the SDK

Import the SDK

1. Add @zegocloud/zego-uikit-prebuilt-live-streaming-rn as dependencies.

yarn add @zegocloud/zego-uikit-prebuilt-live-streaming-rn 

npm install @zegocloud/zego-uikit-prebuilt-live-streaming-rn 

2. Add other dependencies.

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

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

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

Using the Live Streaming Kit

• Specify the userID and userName for connecting the LiveStreaming Kit service.
• Create a liveID that represents the live streaming you want to make.
• Set the plugins to ZIM plug-in.

// HostPage.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG } from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn';
import * as ZIM from 'zego-zim-react-native';

export default function HostPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveStreaming
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                liveID={liveID}

                config={{
                    ...HOST_DEFAULT_CONFIG,
                    onStartLiveButtonPressed: () => {},
                    onLiveStreamingEnded: () => {},
                    onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') },
                }}
                plugins={[ZIM]}
            />
        </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 the 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

Resources