0.4.7 ā¢ Published 1 year ago
react-native-rtmp-publisher v0.4.7
š¹ Live stream RTMP publisher for React Native with built in camera support!
ā ļøš ļø Support for the new architecture is under development
Installation
npm install react-native-rtmp-publisher
or
yarn add react-native-rtmp-publisher
and for iOS
cd ios && pod install
Android
Add Android Permission for camera and audio to AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
iOS
Add iOS Permission for camera and audio to Info.plist
<key>NSCameraUsageDescription</key>
<string>CAMERA PERMISSION DESCRIPTION</string>
<key>NSMicrophoneUsageDescription</key>
<string>AUDIO PERMISSION DESCRIPTION</string>
Implement these changes to AppDelegate.m
(or AppDelegate.mm
)
#import <AVFoundation/AVFoundation.h> // <-- 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
yarn
and
cd example && yarn ios (or yarn android)
You can use Youtube for live stream server. You can check Live on Youtube
Usage
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);
}
<RTMPPublisher
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 |
Youtube Example
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: ****-****-****-****-****
<RTMPPublisher
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<void> | Starts the stream | ā | ā |
stopStream | Promise<void> | Stops the stream | ā | ā |
mute | Promise<void> | Mutes the microphone | ā | ā |
unmute | Promise<void> | Unmutes the microphone | ā | ā |
switchCamera | Promise<void> | Switches the camera | ā | ā |
toggleFlash | Promise<void> | Toggles the flash | ā | ā |
getPublishURL | Promise<string> | Gets the publish URL | ā | ā |
isMuted | Promise<boolean> | Returns microphone state | ā | ā |
isStreaming | Promise<boolean> | Returns streaming state | ā | ā |
hasCongestion | Promise<boolean> | Returns if congestion | ā | ā |
isAudioPrepared | Promise<boolean> | Returns audio prepare state | ā | ā |
isVideoPrepared | Promise<boolean> | Returns video prepare state | ā | ā |
isCameraOnPreview | Promise<boolean> | Returns camera is on | ā | ā |
setAudioInput | Promise<AudioInputType> | 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