@zegocloud/zego-uikit-prebuilt-live-streaming-rn
TypeScript icon, indicating that this package has built-in type declarations

2.5.2 • Public • Published

Quick start


If you have any questions regarding bugs and feature requests, visit the ZEGOCLOUD community .

Integrate the SDK

Tutorial | How to build live streaming using React Native in 10 mins with ZEGOCLOUD

Import the SDK

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

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

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

Using the ZegoUIKitPrebuiltLiveStreaming Component in your project

  • Go to ZEGOCLOUD Admin Console|_blank, get the appID and appSign of your project.
  • Specify the userID and userName for connecting the LiveStreaming Kit service.
  • Create a liveID that represents the live streaming you want to make.
  • userID and callID can only contain numbers, letters, and underlines (_).
  • Using the same liveID will enter the same live streaming.
// 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'

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,
                    onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') }
                }}
            />
        </View>
    );
}

Configure your project

  • Android:

Open my_project/android/app/src/main/AndroidManifest.xml file and add the code as follow:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
  • iOS:

Open my_project/ios/my_project/Info.plist file and add the code as follow:

<key>NSCameraUsageDescription</key>
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string></string>

Run & Test

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

Related guide

Custom prebuilt UI

Sample code

Package Sidebar

Install

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

Weekly Downloads

151

Version

2.5.2

License

MIT

Unpacked Size

2.69 MB

Total Files

316

Last publish

Collaborators

  • c050820063
  • diggingking
  • listen936
  • ttzhang
  • tilince
  • tripli_zego
  • azraellong
  • zego_package