react-native-rtmp-publisher: An HTML repository from thehellmaker

📹 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

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

thehellmaker/react-native-rtmp-publisher