Skip to content

ezranbayantemur/react-native-rtmp-publisher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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