๐Ÿ“น Live stream RTMP Publisher for React Native

Overview

react-native-rtmp-publisher

๐Ÿ“น Live stream RTMP publisher for React Native

โš ๏ธ iOS on development

Installation

npm install react-native-rtmp-publisher

or

yarn add react-native-rtmp-publisher

Usage

Android

Add Android Permission for camera

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

iOS

Under development ๐Ÿ› 

React Native

import { RTMPPublisher } from 'react-native-rtmp-publisher';

// ...

function publisherActions() {
  publisherRef.current.startStream();
  publisherRef.current.stopStream();
  publisherRef.current.mute();
  publisherRef.current.unmute();
  publisherRef.current.switchCamera();
  publisherRef.current.getPublishURL();
  publisherRef.current.isMuted();
  publisherRef.current.isStreaming();
  publisherRef.current.hasCongestion();
  publisherRef.current.isAudioPrepared();
  publisherRef.current.isVideoPrepared();
  publisherRef.current.isCameraOnPreview();
}

<RTMPPublisher
  ref={publisherRef}
  publishUrl="rtmp://your-publish-url"
  onLayoutChange={() => null}
  onConnectionFailedRtmp={(d: string) => null}
  onConnectionStartedRtmp={(d: string) => null}
  onConnectionSuccessRtmp={() => null}
  onDisconnectRtmp={() => null}
  onNewBitrateRtmp={(d: number) => null}
  onStreamStateChanged={(d: streamState) => null}
/>;

Props

Name Type Required Description
publishUrl string true Publish URL address with RTM Protocol

Events

Name Returns Description
onLayoutChange null Invokes on layout changes
onConnectionFailed string Invokes on connection fails with reason to publish URL
onConnectionStarted string 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 number Invokes with new bitrate value on when bitrate received from URL
onStreamStateChanged streamState Invokes on stream state changes. It can be use alternatively for above connection events.

Methods

Name Returns Description
startStream null Starts the stream
stopStream null Stops the stream
mute null Mutes the microphone
unmute null Unmutes the microphone
switchCamera null Switches the camera
getPublishURL string Gets the publish URL
isMuted boolean Returns microphone state
isStreaming boolean Returns streaming state
hasCongestion boolean Returns if congestion
isAudioPrepared boolean Returns audio prepare state
isVideoPrepared boolean Returns video prepare state
isCameraOnPreview boolean Returns camera is on

Types

Name Value
streamState CONNECTING CONNECTED DISCONNECTED FAILED

Contributing

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

License

MIT

You might also like...

Admob for React Native with powerful hooks and components

React Native Admob โš ๏ธ Please note, this package is under active development, which means it may be not stable to apply on production. Please use this

Jan 6, 2023

React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Dec 5, 2022

Ship React Native .jsbundles compressed by Brotli algorithm.

Ship compressed JS bundles Warning: not yet available for Android. Sometimes you need a very small .app, for example if you are building an App Clip.

Nov 15, 2022

Prevent Screenshots in your React Native app when needed. ๐Ÿฆ„

React Native Prevent Screenshots Prevent Screenshots in your React Native app when needed. ๐Ÿฆ„ Installation First, you need to install the package usin

Oct 19, 2022

Using turborepo & react-native

Turborepo starter with NPM This is an official starter turborepo. What's inside? This turborepo uses NPM as a package manager. It includes the followi

Feb 16, 2022

This is a Food Delivery Mobile Application. Build Using React Native

This is a Food Delivery Mobile Application. Build Using React Native

Ax Food Delivery Service This is a Food Delivery Mobile Application build using ๐‘๐ž๐š๐œ๐ญ ๐๐š๐ญ๐ข๐ฏ๐ž ๐Ÿ’™ Installation Clone this repository git clon

Jul 14, 2022

Project developed for MB Talk - App Center integration on React Native

App Center Setup Download APK Click here Requirements React Native CLI Yarn Sign Up on App Center and create a new App. How to use this repo Clone thi

Oct 31, 2022

Lottie wrapper for React Native.

Lottie wrapper for React Native.

Lottie for React Native, iOS, and Android Lottie component for React Native (iOS and Android) Lottie is a mobile library for Android and iOS that pars

Jan 7, 2023

Render After Effects animations natively on Android and iOS, Web, and React Native

Render After Effects animations natively on Android and iOS, Web, and React Native

Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations expo

Jan 3, 2023
Comments
  • Unable to build release version with react native 0.70.6

    Unable to build release version with react native 0.70.6

    Describe the bug While trying to build the release version of the android app, following error occurs:

    * What went wrong:
    Execution failed for task ':react-native-rtmp-publisher:verifyReleaseResources'.
    > A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
       > Android resource linking failed
         ERROR:<path_to_project>/node_modules/react-native-rtmp-publisher/android/build/intermediates/merged_res/release/values/values.xml:2729: AAPT: error: resource android:attr/lStar not found.
    

    To Reproduce Steps to reproduce the behavior:

    1. Create a project with latest react native version
    2. Install and setup react-native-rtmp-publisher
    3. Navigate to android folder and run ./gradlew assembleRelease
    4. See error

    Expected behavior Release variant of the .apk should have been built successfully

    Desktop (please complete the following information):

    • OS: macOS Ventura 13.1
    • React Native version 0.70.6
    • react-native-rtmp-publisher version 0.4.4
    opened by rranjan14 1
  • Crash on switching off the internet

    Crash on switching off the internet

    Describe the bug As soon as the internet connection is closed, handleOnConnectionFailed handler is called and the app crashes.

    To Reproduce Steps to reproduce the behavior:

    1. Create a View with
    2. Start streaming.
    3. Switch off the internet.
    4. Application crashes as soon as the handleOnConnectionFailed callback is received

    Expected behavior Streaming should stop but the application should not crash.

    Smartphone (please complete the following information):

    • Device: Pixel 6
    • OS: Android 13
    • React Native v0.70.6
    • Package version 0.4.4

    Stacktrace: Link to stacktrace

    opened by rranjan14 2
  • Unable to start a second RTMP stream on iOS

    Unable to start a second RTMP stream on iOS

    The very first time works fine, but stopping the stream and starting a new one will crash. This is happening only on iOS.

    To Reproduce

    1. Run .startStream()
    2. Stream works
    3. Run .stopStream()
    4. Run .startStream() again
    5. Stream won't start. RTMP client is not able to proceed the connection after the handshake.

    Expected behavior Should start a new stream every time I run startStream.

    Smartphone:

    • Device: iPhone 13 and iPhone 11
    • OS: both with iOS 16.1
    • react-native-rtmp-publisher: 0.4.4

    Additional context apiVideo uses HaishinKit 1.3.0 and works as expected, maybe this is an issue that comes from 1.2.7.

    I tried to fork it and upgrade the package, but I've never worked with Xcode before and I'm kinda lost

    opened by izquiratops 2
Releases(v0.4.6)
Owner
Ezran Bayantemur
Software Engineer
Ezran Bayantemur
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 42 Dec 17, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
An awesome native wheel picker component for React Native.

โ›๏ธ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns โœ… Supports looping โœ… Native Androi

null 28 Dec 4, 2022
Live video out from your DJI FPV Goggles via USB.

DigiView is an Android app that allows you to get a live preview from your DJI FPV Goggles (V1 & V2). Working with Android 7+ and devices supporting U

Fpv Out Club 235 Dec 19, 2022
source code of the live coding demo for "Building resilient and scalable API backends with Apache Pulsar and Spring Reactive" talk held at ApacheCon@Home 2021

reactive-iot-backend The is the source code of the live coding demo for "Building resilient and scalable API backends with Apache Pulsar and Spring Re

Lari Hotari 4 Jan 13, 2022
The world's top-level live sdk...

็›ฎๅฝ•็ป“ๆž„่ฏดๆ˜Ž ๆœฌ็›ฎๅฝ•ๅŒ…ๅซ Android ็‰ˆ ็งปๅŠจ็›ดๆ’ญ SDK ็š„Demo ๆบไปฃ็ ๏ผŒไธป่ฆๆผ”็คบๆŽฅๅฃๅฆ‚ไฝ•่ฐƒ็”จไปฅๅŠๆœ€ๅŸบๆœฌ็š„ๅŠŸ่ƒฝใ€‚ โ”œโ”€ MLVB-API-Example // MLVB API Example๏ผŒๅŒ…ๆ‹ฌ็›ดๆ’ญๆŽจๆต๏ผŒ็›ดๆ’ญๆ’ญๆ”พ๏ผŒไบ’ๅŠจ็›ดๆ’ญ | โ”œโ”€ App //

LiteAVSDK 18 Jan 5, 2023
Photo live wallpaper with auto dark mode and power-efficient animations

Pallax Android: Photo Live Wallpaper Pallax Android is an Android app that lets you convert your current static home screen background into a stunning

Patrick Zedler 13 Dec 17, 2022
A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

React Native Boilerplate Folder structure : src โ”œโ”€โ”€ assets โ”‚ย ย  โ”œโ”€โ”€ audios โ”‚ย ย  โ”œโ”€โ”€ fonts โ”‚ย ย  โ”œโ”€โ”€ icons โ”‚ย ย  โ””โ”€โ”€ images โ”œโ”€โ”€ components โ”‚ย ย  โ”œโ”€โ”€ Layout.tsx

LazyRabbit 23 Sep 1, 2022
Lightweight React Native UI Components inspired on Vant

vant-react-native Install yarn add vant-react-native Or npm install vant-react-native Usage import React, { Component } from 'react'; import { View, T

ๆด›็ซน 51 Sep 29, 2022