Rn-rtmp-friend NPM

📹 Live stream RTMP publisher for React Native with built in camera support!

THIS IS ORIGINALLY FORK OF THE AWESOME LIBRARY. p.s Created this fork, because i needed some fixes to be in the app (like video settings setup, reconnection, etc.)

⚠️🛠️ Support for the new architecture is under development

Installation

npm install react-native-publisher

yarn add react-native-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>

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-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"
  videoSettings={{
    width: 1080,
    height: 1920,
    bitrate: 5000 * 1024,
    audioBitrate: 192 * 1000
  }}
  allowedVideoOrientations={[
    "portrait",
    "landscapeLeft",
    "landscapeRight",
    "portraitUpsideDown"
  ]}
  videoOrientation="portrait"
  onConnectionFailedRtmp={() => ...}
  onConnectionStartedRtmp={() => ...}
  onConnectionSuccessRtmp={() => ...}
  onDisconnectRtmp={() => ...}
  onNewBitrateRtmp={() => ...}
  onStreamStateChanged={(status: streamState) => ...}
/>

Props

Name	Type	Required	Description
`streamURL`	`string`	`true`	Publish URL address with RTMP Protocol
`streamName`	`string`	`true`	Stream name or key
`videoSettings`	`VideoSettingsType`	`false`	Video settings for video
`allowedVideoOrientations`	`VideoOrientation[]`	`false`	Allowed video orientation
`videoOrientation`	`VideoOrientation`	`false`	Initial video orientation

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	✅	✅
`setVideoSettings`	`Promise<VideoSettingsType>`	Sets camera quality settings	✅	✅

Types

Name	Value
`streamState`	`CONNECTING`, `CONNECTED`, `DISCONNECTED`, `FAILED`
`BluetoothDeviceStatuses`	`CONNECTING`, `CONNECTED`, `DISCONNECTED`
`AudioInputType`	`BLUETOOTH_HEADSET`, `SPEAKER`, `WIRED_HEADSET`
`VideoSettingsType`	`{width: number; height: number; bitrate: number; audioBitrate: number}`
`VideoOrientation`	`portrait`, `landscapeLeft`, `landscapeRight`, `portraitUpsideDown`

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.5.3

Contributing

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

License

MIT

react-native ios android rtmp

@everything-registry/sub-chunk-2675

0.0.1

5 months ago