/react-native-rtmp-publisher

📹 Live stream RTMP Publisher for React Native

Primary LanguageHTMLMIT LicenseMIT

logo

github/license github/issues github/issues-pr npm/dw github/followers github/stars github/forks

📹 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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT