RTM Publisher for React Native
npm install react-native-rtmp-publisher
š¹ Live stream RTMP publisher for React Native with built in camera support!
``sh`
npm install react-native-rtmp-publisher
or
`sh`
yarn add react-native-rtmp-publisher
and for iOS
`sh`
cd ios && pod installAndroid
Add Android Permission for camera and audio to AndroidManifest.xml
`xml`
Add iOS Permission for camera and audio to Info.plist
`xml`
Implement these changes to AppDelegate.m (or AppDelegate.mm) `objc
#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
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 parameterYoutube Stream URL:
rtmp://a.rtmp.youtube.com/live2Youtube 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.
- Android: rtmp-rtsp-stream-client-java [2.2.2]
- iOS: HaishinKit.swift [1.2.7]
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT