Amity Livesteram Broadcaster

A react native components used to broadcast livestream

Getting start

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
`

Additional Configuration

$3

1. Install pods

`sh
cd ios && pod install
`

2. Add following permissions to info.plist file

`xml
NSCameraUsageDescription
Your own description of the purpose

NSMicrophoneUsageDescription
Your own description of the purpose
`

$3

1. config kotlinVersion and compileSdkVersion in android/build.gradle, add kotlinVersion above 1.7.0 and compileSdkVersion above 34 in buildscript > ext

!image

2. Add following permissions to AndroidManifest.xml file

`xml




`

Usage

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.
The states are provided as AmityStreamBroadcasterState 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 (

onBroadcastStateChange={onBroadcastStateChange}
resolution={{
width: 1280,
height: 720,
}}
ref={ref}
bitrate={2 1024 1024}
/>


);
};

export default Components;
``