React Native Livestream Component
api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
Project description
This module is made for broadcasting rtmp livestream from smartphone camera
Getting started
Installation
npm install @api.video/react-native-livestream
or
yarn add @api.video/react-native-livestream
Note: if you are on iOS, you will need two extra steps:
- Don't forget to install the native dependencies with Cocoapods
cd ios && pod install
- This project contains swift code, and if it's your first dependency with swift code, you need to create an empty swift file in your project (with the bridging header) from XCode. Find how to do that
Permissions
To be able to broadcast,
- On Android you must ask for internet, camera and microphone permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
- On iOS, you must update Info.plist with a usage description for camera and microphone
...
<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your own description of the purpose</string>
...
- On react-native you must handle the permissions requests before starting your livestream. If permissions are not accepted you will not be able to broadcast.
Code sample
import React, { useRef, useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { LivestreamView } from '@api.video/react-native-livestream';
const App = () => {
const ref = useRef(null);
const [streaming, setStreaming] = useState(false);
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<LivestreamView
style={{ flex: 1, backgroundColor: 'black', alignSelf: 'stretch' }}
ref={ref}
video={{
fps: 30,
resolution: '720p',
camera: 'front',
orientation: 'portrait',
}}
liveStreamKey="your-livestrem-key"
onConnectionSuccess={() => {
}}
onConnectionFailed={(e) => {
}}
onDisconnect={() => {
}}
/>
<View style={{ position: 'absolute', bottom: 40 }}>
<TouchableOpacity
style={{
borderRadius: 50,
backgroundColor: streaming ? 'red' : 'white',
width: 50,
height: 50,
}}
onPress={() => {
if (streaming) {
ref.current?.stopStreaming();
setStreaming(false);
} else {
ref.current?.startStreaming();
setStreaming(true);
}
}}
/>
</View>
</View>
);
}
export default App;
Documentation
Props & Methods
type ReactNativeLivestreamProps = {
style: ViewStyle;
liveStreamKey: string;
rtmpServerUrl?: string;
video: {
fps: number;
resolution: '240p' | '360p' | '480p' | '720p' | '1080p' | '2160p';
bitrate?: number;
camera?: 'front' | 'back';
orientation?: 'landscape' | 'portrait';
};
audio?: {
muted?: boolean;
bitrate?: number;
};
onConnectionSuccess?: (event: NativeSyntheticEvent<{ }>) => void;
onConnectionFailed?: (event: NativeSyntheticEvent<{ code: string }>) => void;
onDisconnect?: (event: NativeSyntheticEvent<{ }>) => void;
};
type ReactNativeLivestreamMethods = {
startStreaming: () => void;
stopStreaming: () => void;
};
Plugins
API.Video LiveStream module is using external native library for broadcasting
FAQ
If you have any questions, ask us here: https://community.api.video .
Or use Issues.
Example App
You can try our example app, feel free to test it.