Building a React Native live streaming app is an exciting venture. This guide will walk you through the process of creating a dynamic and engaging app that can reach a wide audience. We'll cover essential steps, from setting up your development environment to integrating live streaming functionalities. Whether you're a seasoned developer or just starting out, this comprehensive tutorial will provide clear instructions and valuable insights to help you bring your live streaming app to life.
How to Build a Live Streaming App with React Native
Ready to create your live streaming app? This section is all you need. We'll show you how to leverage ZEGOCLOUD's powerful Live Streaming Kit to simplify development.
ZEGOCLOUD offers two options to fit your needs:
Pre-built UIKits: Get started quickly with pre-built components that handle the core streaming functionality and user interface. This allows you to focus on crafting a unique user experience without reinventing the wheel.
Highly Customizable Live Streaming SDK: For ultimate control, ZEGOCLOUD also provides a 100% customizable live streaming SDK.
Prerequisites:
- A ZEGOCLOUD developer account - Sign up
- Have NodeJS installed
- Basic knowledge of React Native development
If you’ve met the requirements below or are ready to do so as we progress with the other section of the article, follow the steps below to enable live streaming in React Native:
1. Integrate the SDK
a. Add @zegocloud/zego-uikit-prebuilt-live-streaming-rn as dependencies:
To start integrating the ZEGOCLOUD SDK into your React Native project, first add the primary SDK dependency. Open your terminal and run:
yarn add @zegocloud/zego-uikit-prebuilt-live-streaming-rn
b. Add other dependencies:
The primary SDK has several dependencies that need to be installed for it to work correctly. Install these by running the following command in your terminal:
yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.14.5 @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
2. Getting App Credentials
a. Obtain credentials from ZEGOCLOUD admin console:
Go to the ZEGOCLOUD Admin Console.
Create a project and retrieve the appID and appSign of your project.
Specify the userID and userName for connecting to the LiveStreaming Kit service.
Create a liveID that represents the live streaming you want to initiate.
Note:
-
userIDandliveIDcan only contain numbers, letters, and underscores (_). - Using the same
liveIDwill enter the same live streaming session. - With the same
liveID, only one user can enter the live stream as a host. Other users will join as the audience.
3. Implement the HostPage Component
Create a file named HostPage.js in the src directory of your project and add the following code:
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) {
const yourAppID = 'YourAppID'; // Replace with your actual appID
const yourAppSign = 'YourAppSign'; // Replace with your actual appSign
const userID = 'YourUserID'; // Replace with your actual userID
const userName = 'YourUserName'; // Replace with your actual userName
const liveID = 'YourLiveID'; // Replace with your actual liveID
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>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
zIndex: 0,
}
});
This HostPage component sets up a live streaming session using ZEGOCLOUD's prebuilt UI kit. It configures necessary credentials, centers the live stream UI, and navigates back to the home page when the user leaves the stream.
4. Configure Your Project
a. Android configuration
Open my_project/android/app/src/main/AndroidManifest.xml and add the following permissions:
<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"/>
Open my_project/android/app/proguard-rules.pro and add the following rule:
-keep class **.zego.** { *; }
b. iOS Configuration
Open my_project/ios/my_project/Info.plist and add the following keys:
<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>
5. Run and Test Your App
a. To run the app on an iOS device, open your terminal and execute:
yarn ios
b. To run the app on an Android device, open your terminal and execute:
yarn android
Note: If your device is not performing well or you experience UI stuttering, try running the app in Release mode for a smoother experience.
Conclusion
Creating a live streaming app with React Native is now within reach. This guide has equipped you with the essential steps and tools to build a dynamic and engaging platform. By following these instructions and leveraging the power of ZEGOCLOUD, you can create a live streaming experience that captivates your audience. With this knowledge, you're ready to turn your live streaming vision into reality.
Top comments (0)