react-native-publisher

📹 Live stream RTMP publisher for React Native with built in camera support!

THIS IS ORIGINALLY FORK OF THE AWESOME LIBRARY. p.s Created this fork, because i needed some fixes to be in the app (like video settings setup, reconnection, etc.)

$3

Installation

``sh
npm install react-native-publisher
`

or

`sh
yarn add react-native-publisher
`

and for iOS
`sh
cd ios && pod install
`


Android

Add Android Permission for camera and audio to AndroidManifest.xml

`xml



`




iOS

Add iOS Permission for camera and audio to Info.plist

`xml
NSCameraUsageDescription
CAMERA PERMISSION DESCRIPTION
NSMicrophoneUsageDescription
AUDIO PERMISSION DESCRIPTION
`

Example Project

Clone the repo and run

`sh
yarn
`
and

`sh
cd example && yarn ios (or yarn android)
`

You can use Youtube for live stream server. You can check Live on Youtube

Usage


`js
import RTMPPublisher from 'react-native-publisher';

// ...

async function publisherActions() {
await publisherRef.current.startStream();
await publisherRef.current.stopStream();
await publisherRef.current.mute();
await publisherRef.current.unmute();
await publisherRef.current.switchCamera();
await publisherRef.current.getPublishURL();
await publisherRef.current.isMuted();
await publisherRef.current.isStreaming();
await publisherRef.current.toggleFlash();
await publisherRef.current.hasCongestion();
await publisherRef.current.isAudioPrepared();
await publisherRef.current.isVideoPrepared();
await publisherRef.current.isCameraOnPreview();
await publisherRef.current.setAudioInput(audioInput: AudioInputType);
}

ref={publisherRef}
streamURL="rtmp://your-publish-url"
streamName="stream-name"
videoSettings={{
width: 1080,
height: 1920,
bitrate: 5000 * 1024,
audioBitrate: 192 * 1000
}}
allowedVideoOrientations={[
"portrait",
"landscapeLeft",
"landscapeRight",
"portraitUpsideDown"
]}
videoOrientation="portrait"
onConnectionFailedRtmp={() => ...}
onConnectionStartedRtmp={() => ...}
onConnectionSuccessRtmp={() => ...}
onDisconnectRtmp={() => ...}
onNewBitrateRtmp={() => ...}
onStreamStateChanged={(status: streamState) => ...}
/>
`

Props

| Name | Type | Required | Description |
| :----------: | :------: | :------: | :-----------------------------------: |
| streamURL | string | true | Publish URL address with RTM Protocol |
| streamName | string | true | Stream name or key |
| videoSettings | VideoSettingsType | false | Video settings for video |
| allowedVideoOrientations | VideoOrientation[] | false | Allowed video orientation |
| videoOrientation | VideoOrientation | false | Initial video orientation |

$3

For live stream, Youtube gives you stream url and stream key, you can place the key on streamName parameter

Youtube Stream URL: rtmp://a.rtmp.youtube.com/live2

Youtube Stream Key: *----*

`js
streamURL="rtmp://a.rtmp.youtube.com/live2"
streamName="*----*"
...
...
`

Events

| Name | Returns | Description | Android | iOS |
| :------------------------------: | :-----------------------: | :---------------------------------------------------------------------------------------: | :------: |:---:|
| onConnectionFailed | null | Invokes on connection fails to publish URL | ✅ | ✅ |
| onConnectionStarted | null | Invokes on connection start to publish URL | ✅ | ✅ |
| onConnectionSuccess | null | Invokes on connection success to publish URL | ✅ | ✅ |
| onDisconnect | null | Invokes on disconnect from publish URL | ✅ | ✅ |
| onNewBitrateReceived | null | Invokes on new bitrate received from URL | ✅ | ❌ |
| onStreamStateChanged | StreamState | Invokes on stream state changes. It can be use alternatively for above connection events. | ✅ | ✅ |
| onBluetoothDeviceStatusChanged | BluetoothDeviceStatuses | Invokes on bluetooth headset state changes. | ✅ | ❌ |

Methods

| Name | Returns | Description | Android | iOS |
| :-----------------: | :------------------------:| :-------------------------: | :------: |:---:|
| startStream | Promise | Starts the stream | ✅ | ✅ |
| stopStream | Promise | Stops the stream | ✅ | ✅ |
| mute | Promise | Mutes the microphone | ✅ | ✅ |
| unmute | Promise | Unmutes the microphone | ✅ | ✅ |
| switchCamera | Promise | Switches the camera | ✅ | ✅ |
| toggleFlash | Promise | Toggles the flash | ✅ | ✅ |
| getPublishURL | Promise | Gets the publish URL | ✅ | ✅ |
| isMuted | Promise | Returns microphone state | ✅ | ✅ |
| isStreaming | Promise | Returns streaming state | ✅ | ✅ |
| hasCongestion | Promise | Returns if congestion | ✅ | ❌ |
| isAudioPrepared | Promise | Returns audio prepare state | ✅ | ✅ |
| isVideoPrepared | Promise | Returns video prepare state | ✅ | ✅ |
| isCameraOnPreview | Promise | Returns camera is on | ✅ | ❌ |
| setAudioInput | Promise| Sets microphone input | ✅ | ✅ |
|setVideoSettings | Promise| Sets camera quality settings| ✅ | ✅ |

Types

| Name | Value |
| ------------------------- | :--------------------------------------------------:|
| streamState | CONNECTING, CONNECTED, DISCONNECTED, FAILED |
| BluetoothDeviceStatuses | CONNECTING, CONNECTED, DISCONNECTED |
| AudioInputType | BLUETOOTH_HEADSET, SPEAKER, WIRED_HEADSET |
| VideoSettingsType | {width: number; height: number; bitrate: number; audioBitrate: number} |
| VideoOrientation | portrait, landscapeLeft, landscapeRight, portraitUpsideDown` |

* AudioInputType: WIRED_HEADSET type supporting in only iOS. On Android it affects nothing. If a wired headset connected to Android device, device uses it as default.

Used Native Packages

- Android: rtmp-rtsp-stream-client-java [2.2.2]
- iOS: HaishinKit.swift [1.2.7]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT