Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Build Live Streams App With React Native

How To Build Live Streams App With React Native

It might be challenging to record and transmit a live feed from your app, especially if you want to do so with little to no latency for a global audience. When one or more persons are streaming their feeds to a large audience around the world, the ZEGOCLOUD Live Streaming Kit SDK is ideal for providing low-latency communications with reliability.

Introduction to React Native Live Streaming Kit

Flutter Live Streaming Kit is a brand-new pre-built UIKits by ZEGOCLOUD. Through it, You can complete the development of a live streams app within 10 minutes.

live streaming kit

As shown in the figure, React Native Live Streaming Kit is responsible for handling all the logic and UI of the live streams 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

Implement video live streams

Create Project

Run the following code to create a new project.

npx react-native init live_streaming
create project

Add ZegoUIKitPrebuiltLiveStreaming as dependencies

Add 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"
add sdk as dependencies

Add live Streams Button

For the convenience of demonstration, I have added two buttons for creating live streams and joining live streams. In your application, you need to add the entrance of creating live streams for the host and the entrance of joining live streams 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>
    )
}
add live streaming button

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} // yourAppSign
            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 or watch a live by navigating to this live page.

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" />
  1. Open the my_project/android/app/proguard-rules.pro file and add the following:
configure your project
-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

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 as well as 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.

Take action now, You can download the sample demo source code of this article, or consult us 24h technical support.

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us