@amityco/video-broadcaster-react-native

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.

yarn add \
@amityco/ts-sdk-react-native \
@api.video/react-native-livestream

Additional Configuration

IOS

1. Install pods

cd ios && pod install

2. Add following permissions to info.plist file

<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your own description of the purpose</string>

Android

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

<manifest>
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
</manifest>

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.

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 (
    <View>
      <AmityVideoBroadcaster
        onBroadcastStateChange={onBroadcastStateChange}
        resolution={{
          width: 1280,
          height: 720,
        }}
        ref={ref}
        bitrate={2 * 1024 * 1024}
      />
      <YourOtherComponents>
    </View>
  );
};

export default Components;