📹 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