A react native components used to broadcast livestream
npm install @amityco/video-broadcaster-react-nativeA react native components used to broadcast livestream
To use the broadcaster, install these peer dependencies including typescript SDK for react native app.
``sh`
yarn add \
@amityco/ts-sdk-react-native \
@api.video/react-native-livestream
1. Install pods
`sh`
cd ios && pod install
2. Add following permissions to info.plist file
`xml
`
1. config kotlinVersion and compileSdkVersion in android/build.gradle, add kotlinVersion above 1.7.0 and compileSdkVersion above 34 in buildscript > ext
2. Add following permissions to AndroidManifest.xml file
`xml`
AmityVideoBroadcaster component can be imported and configured for the resolution and bitrate. And also accept onBroadcastStateChange function that is called when broadcaster state is changed.
The broadcaster state can be idle, connecting, connected and disconnected.AmityStreamBroadcasterState
The states are provided as enum.
To manage the broadcasting, please use these following methods.
- startPublish(streamId)
- stopPublish()
- switchCamera()
startPublish required streamId. So, Amity.Stream object should be create before publish the livestream.
`ts
import {AmityVideoBroadcaster} from '@amityco/video-broadcaster-react-native';
import {useRef} from 'react';
const Component = () => {
const ref = useRef();
const startPublish = () => {
// Create Amity.Stream to get streamId
const { data: newStream } = await StreamRepository.createStream(params);
ref?.current.startPublish(newStream.streamId);
};
const stopPublish = () => {
ref?.current.stopPublish();
};
const switchCamera = () => {
ref?.current.switchCamera();
};
const onBroadcastStateChange = (state: AmityStreamBroadcasterState) => {
...
}
return (
resolution={{
width: 1280,
height: 720,
}}
ref={ref}
bitrate={2 1024 1024}
/>
);
};
export default Components;
``