react-native-rtmp-publisher

📹 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