Live streaming is a popular way to deliver content to audiences. It might be challenging to record and transmit live streaming from your app. Especially when you do so with little to no latency for a global audience. ZEGOCLOUD Live Streams Kit SDK is ideal if you are wondering how to make a React Native live streaming app.
Why ZEGOCLOUD SDK for React Native Live Streaming
ZEGOCLOUD provides a cloud-based live streaming service that provides developers with a suite of APIs and SDKs to easily integrate live streaming capabilities into their applications with React Native. Its live streaming service offers a range of features including low latency, high-definition video, real-time interaction, and cross-platform support.
ZEGOCLOUD live streaming API also supports a wide range of platforms including iOS, Android, and the web, making it a versatile solution for developers. Moreover, it provides pre-built UIKits that include a live streaming kit, which is a low-code live streaming SDK to allow developers to complete the development of the live streaming app within 10 minutes.
React Native Live Streaming Kit handles all the logic and UI of the streaming function. Include:
- UI and interaction of the video live Streaming module
- Message sending and display
- Audio and video data transmission
- Camera and microphone management
- Live Viewer Statistics
You only need to implement business-related logic. For example:
- User login registration
- Live List Management
- Top up and send gifts, etc.
Preparation
- A ZEGOCLOUD developer account–Sign up
- React Native 0.60.0 or later
- Basic understanding of React Native development
How to Implement Video Live Streams with React Native
Create Project
Run the following code to create a new project.
npx react-native init live_streaming
Set ZegoUIKitPrebuiltLiveStreaming as a dependency
Add the following dependencies in package.json
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@zegocloud/zego-uikit-prebuilt-live-streaming-rn": "1.0.7",
"@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": "^3.0.1"
Live Streams Button
For the convenience of demonstration, I have added two buttons for creating live streamings and joining them. In your application, you need to add the entrance for creating it, for the host, and for joining live streaming for viewers.
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="Start a live" onPress={()=>{navigation.navigate('LivePage',{isHost:true})}}/>
<Button title="Watch a live" onPress={()=>{navigation.navigate('LivePage',{isHost:false})}}/>
</View>
)
}
Implement Video Live Streaming
Next, we need to build a live streams page using ZegoUIKitPrebuiltLiveStreaming.
import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG, AUDIENCE_DEFAULT_CONFIG}
from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn'
function LivePage(props) {
randomUserID = String(Math.floor(Math.random() * 100000))
isHost = props.route.params.isHost;
return (
<View style={{flex: 1}}>
<ZegoUIKitPrebuiltLiveStreaming
appID={1234} // Your App ID
appSign='yourAppSign'
userID={randomUserID}
userName={'user_'+randomUserID}
liveID='testLiveID'
config={{
...(isHost==true?HOST_DEFAULT_CONFIG:AUDIENCE_DEFAULT_CONFIG),
onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') }
}}
/>
</View>
)
}Now, you can create a new live streaming or watch one by navigating to this live page.
Configure your live streams app project
Android:
- Open the
my_project/android/app/src/main/AndroidManifest.xmlfile 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" />- Open the
my_project/android/app/proguard-rules.profile 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 a Demo
Take action now! You can download this article’s sample demo source code for live streams appwith react native.
Conclusion
The market for live streams is expanding yearly. Real-time communication via streams is getting more popular. This tendency was driven by the epidemic and internet musical performances and events. There are many application cases, such as in education and healthcare. It means that creating an application for live streaming is worth trying.
Talk to Expert
Learn more about our solutions and get your question answered.
