react-native-rtmp-publisher

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

$3

Installation

``sh
npm install react-native-rtmp-publisher
`

or

`sh
yarn add react-native-rtmp-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
`

Implement these changes to AppDelegate.m (or AppDelegate.mm)
`objc
#import // <-- Add this import
..
..

- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions
{
..
..
..
..

// <-- Add this section -->
AVAudioSession *session = AVAudioSession.sharedInstance;
NSError *error = nil;

if (@available(iOS 10.0, *)) {
[session
setCategory:AVAudioSessionCategoryPlayAndRecord
mode:AVAudioSessionModeVoiceChat
options:AVAudioSessionCategoryOptionDefaultToSpeaker|AVAudioSessionCategoryOptionAllowBluetooth
error:&error];
} else {
SEL selector = NSSelectorFromString(@"setCategory:withOptions:error:");

NSArray * optionsArray =
[NSArray arrayWithObjects:
[NSNumber numberWithInteger:AVAudioSessionCategoryOptionAllowBluetooth],
[NSNumber numberWithInteger:AVAudioSessionCategoryOptionDefaultToSpeaker], nil];

[session
performSelector:selector
withObject: AVAudioSessionCategoryPlayAndRecord
withObject: optionsArray
];

[session
setMode:AVAudioSessionModeVoiceChat
error:&error
];
}

[session
setActive:YES
error:&error
];
// <-- Add this section -->

return YES;
}
`


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-rtmp-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"
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 |

$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 | ✅ | ✅ |

Types

| Name | Value |
| ------------------------- | :--------------------------------------------------:|
| streamState | CONNECTING, CONNECTED, DISCONNECTED, FAILED |
| BluetoothDeviceStatuses | CONNECTING, CONNECTED, DISCONNECTED |
| AudioInputType | BLUETOOTH_HEADSET, SPEAKER, WIRED_HEADSET` |

* 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