{"id":21659264,"url":"https://github.com/red5pro/react-native-red5pro","last_synced_at":"2025-09-03T02:06:47.985Z","repository":{"id":40364373,"uuid":"110601398","full_name":"red5pro/react-native-red5pro","owner":"red5pro","description":"React Native Red5 Pro Publisher/Subscriber","archived":false,"fork":false,"pushed_at":"2023-05-24T14:45:58.000Z","size":171827,"stargazers_count":37,"open_issues_count":32,"forks_count":20,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-23T02:41:32.348Z","etag":null,"topics":["react-native","red5","red5pro"],"latest_commit_sha":null,"homepage":"https://www.red5pro.com/","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/red5pro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-13T20:59:02.000Z","updated_at":"2025-03-22T00:03:19.000Z","dependencies_parsed_at":"2024-11-25T09:43:11.701Z","dependency_job_id":null,"html_url":"https://github.com/red5pro/react-native-red5pro","commit_stats":null,"previous_names":["infrared5/react-native-red5pro"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/red5pro/react-native-red5pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Freact-native-red5pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Freact-native-red5pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Freact-native-red5pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Freact-native-red5pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/red5pro","download_url":"https://codeload.github.com/red5pro/react-native-red5pro/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Freact-native-red5pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273377153,"owners_count":25094528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","red5","red5pro"],"created_at":"2024-11-25T09:30:45.572Z","updated_at":"2025-09-03T02:06:47.963Z","avatar_url":"https://github.com/red5pro.png","language":"Objective-C","funding_links":[],"categories":["Objective-C"],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://account.red5pro.com/register\" target=\"_blank\"\u003e\u003cimg src=\"assets/red5pro_logo.png\" alt=\"Red5 Pro Logo\" /\u003e\u003c/a\u003e\n\u003c/h3\u003e\n\n---\n\n# react-native-red5pro\n\n\u003e This project is in **BETA**.\n\nReact Native Red5 Pro Publisher \u0026 Subscriber.\n\n* [Version Support](#support)\n* [Install](#install)\n  * [iOS](#ios)\n  * [Android](#android)\n* [Project Setup](#project-setup)\n  * [iOS](#ios-project-setup)\n  * [Android](#android-project-setup)\n* [Project Libraries](#project-libraries)\n  * [R5StreamModule](#r5streammodule)\n  * [R5VideoView](#r5videoview)\n* [R5StreamModule Usage](#r5streammodule-usage)\n  * [Methods](#module-methods)\n  * [Stream Properties](#module-stream-properties)\n  * [Events](#module-events)\n  * [Known Issues](#known-issues)\n* [R5VideoView Usage](#r5videoview-usage)\n  * [Properties](#component-properties)\n  * [Methods](#component-methods)\n  * [Event Callbacks](#component-event-callbacks)\n  * [Publisher Example](#component-publisher-example)\n  * [Subscriber Example](#component-subscriber-example)\n* [Red5 Pro Quickstart](https://www.red5pro.com/docs/#overview)\n\n\u003e You will need a Red5 Pro SDK License and a Red5 Pro Server in order to use this component.  \n[Sign up for a free trial!](https://account.red5pro.com/register)\n\n# Version Support\n\nThis repo and the [examples](examples) have been built and tested against the following:\n\n* React Native `v0.67.3`\n* Red5 Pro Mobile SDK `v10.0.0`\n\n# Install\n\nInstall the `react-native-red5pro` component:\n\n```sh\n$ npm i --save react-native-red5pro\n```\n\nIf you intend to use the live broadcasting capabilities of the [Red5 Pro SDK](https://www.red5pro.com/docs/streaming/), install the `react-native-permissions` module that will present to the user the permissions dialogs for Camera and Microphone:\n\n```sh\n$ npm i --save react-native-permissions\n```\n\n\u003e More information about [react-native-permissions](https://github.com/yonahforst/react-native-permissions)\n\nFinally, run the following to link the libraries into your projects:\n\n## iOS\n\n## Using CocoaPods\n\nAdd the following to the `Podfile` of your React Native project:\n\n```sh\npod 'R5VideoView', :path =\u003e '../node_modules/react-native-red5pro'\n\npermissions_path = '../node_modules/react-native-permissions/ios'\n\n  pod 'Permission-Camera', :path =\u003e \"#{permissions_path}/Camera/Permission-Camera.podspec\"\n  pod 'Permission-Microphone', :path =\u003e \"#{permissions_path}/Microphone/Permission-Microphone.podspec\"\n```\n\nThen issue the following within your React Native iOS-based project directory:\n\n```sh\n$ pod install\n```\n\n## Android\n\n## Using react-native link\n\n```sh\n$ react-native link\n```\n\nAfter running `react-native link`, the `react-native-red5pro` library will be added your Android project:\n\n![Android Link](assets/android_link.png)\n\n### Troubleshooting\n\nIf the `react-native-red5pro` library was not added using `react-naive link`, you can add them manually for Android by doing the follow in your project:\n\n1. Locate and open the `settings.gradle` for your Android app.\n2. Add `:react-native-red5pro` to the `include` and define the library project location:\n\n```txt\nrootProject.name = 'Red5ProVideoViewExample'\n\ninclude ':app',\n        ':react-native-red5pro'\n\nproject(':react-native-red5pro').projectDir = new File(rootProject.projectDir, '../../android')\n```\n\nNow locate the `build.gradle` for your Android app, and add the following to the `dependencies`:\n\n```txt\ncompile project(':react-native-red5pro')\n```\n\n\u003e Review the [Android Example](example/android) included in this repository.\n\n# Project Setup\n\nIt is assumed that you have used the [create-react-native](https://github.com/react-community/create-react-native-app) CLI tool to bootstrap your projects. If you have used other means to set up your projects, some instructions may be different.\n\nIn addition to adding the `react-native-red5pro` library - and optionally `react-native-permissions` library - as [described above](#installation), there are additional project settings required, including the addition of the [Red5 Pro Mobile SDK](https://www.red5pro.com/docs/streaming/).\n\nThis section will describe how to setup your projects to integrate the [Red5 Pro Mobile SDK](https://www.red5pro.com/docs/streaming/) so you can use the `react-native-red5pro` library to display a video view for broadcasting and subscribing to a live stream.\n\n\u003e You will need a Red5 Pro SDK License and a Red5 Pro Server in order to use this component. [Sign up for a free trial!](https://account.red5pro.com/register)\n\n## iOS Project Setup\n\nAfter linking in the `react-native-red5pro` library as described in the [previous section](#installation), you will need to install the **Red5 Pro iOS SDK** and update the permissions for you project.\n\n### Install Red5 Pro SDK\n\nTo integrate the **Red5 Pro iOS SDK**:\n\n1. Download the latest [Red5 Pro iOS SDK](https://account.red5pro.com/download) from your account. If you don't have an account yet, [Sign up for a free trial!](https://account.red5pro.com/register).\n2. Unpack the **Red5 Pro iOS SDK** into a location on your local machine. This will unzip to a `R5Streaming.framework` file; that file is the **Red5 Pro iOS SDK**.\n\n### After CocoaPods Installation\n\n1. Locate the `Pods` project in your generated `xcworkspace` and select to open the project settings in Xcode.\n2. Within the `Targets` listing, select `R5VideoView`.\n3. Click on `Build Settings`\n4. Search for \"**frameworks**\" (sans quotes), and navigate to the `Framework Search Paths`.\n5. Click on the Value field and add the directory path to the `R5Streaming.framework` file (either relative or full path). _Tip: drag and drop the directory holding the framework into an entry in the modal and Xcode will fill in the relative path._\n6. Do the above 5 steps again for your top level project.\n\n![iOS Framework Path](assets/ios_framework_path.png)\n\n### Required Dependencies\n\nThe *Red5 Pro iOS SDK* requires a few additional dependencies in order to properly broadcast and consume live streams. Add the following libraries and frameworks to your project under the *General \u003e Linked Frameworks and Libraries* panel:\n\n```\nlibc++.1.tbd\nlibiconv.2.4.0.tbd\nlibbz2.tbd\nlibz.tbd\n\nGLKit\nQuartzCore\nOpenAL\nCoreFoundation\nVideoToolbox\n```\n\n### Define Permissions\n\n#### Camera \u0026 Microphone Access\n\nIf you intend to use the `react-native-red5pro` to broadcast live streams, you will need to add Privacy permissions for Camera and Microphone access on the device. To do so:\n\n1. Locate the `Info.plist` file for your project in Xcode.\n2. Click to Add an entry (using the `+` icon), and add a `Privacy - Camera Usage Description` entry.\n3. Provide a String Value of the message you want to present to your User(s) - e.g., `Camera access required for publishing.`\n4. Add a similar entry and String value for `Privacy - Microphone Usage Description`.\n\nYour app should now be available for broadcasting and subscribing to live streams!\n\n#### Background Services\n\nIf you intend to use the `react-native-red5pro` to continue broadcasting and/or playback while the app is in the background, you will additionally need to define the ability to do so:\n\n1. Locate the `Info.plist` file for your project in Xcode.\n2. Click to Add an entry (using the `+` icon), and add a `Required background modes` entry.\n3. In the generated `Item 0` entry, add a String value of `App plays audio or streams audio/video using AirPlay`.\n\nNow you can use the `enableBackgroundStreaming` of the library to enable background streaming!\n\n### Additional Notes\n\n* You may be required to set the `Enable Bitcode` Build Setting to a value of `No` in order to use the SDK.\n\n## Android Project Setup\n\nAfter linking in the `react-native-red5pro` library as described in the [previous section](#installation), you will need to install the **Red5 Pro Android SDK** and update the permissions for you project.\n\n### Install Red5 Pro SDK\n\nTo integrate the **Red5 Pro Android SDK**:\n\n1. Download the latest [Red5 Pro Android SDK](https://account.red5pro.com/download) from your account. If you don't have an account yet, [Sing up for a free trial!](https://account.red5pro.com/register).\n2. Unpack the **Red5 Pro Android SDK** into a location on your local machine - there will be a `red5streaming.jar` file and a folder labelled `jniLibs`. These files make up the **Red5 Pro Android SDK**.\n3. Drag the `red5streaming.jar` file into the *app/libs* folder of your Android app project in Android Studio.\n4. Drag the `jniLibs` holder under the *app/src/main* folder of your Android app project in Android Studio.\n\n![Android SDK](assets/android_sdk.png)\n\nThe `react-native-red5pro` library is not shipped with the **Red5 Pro SDK**. As such, we need to point the `react-native-red5pro` library point to the `red5streaming.jar` dependency:\n\n1. Expand the `react-native-red5pro` library in the Project Panel of Android Studio.\n2. Locate the `build.gradle` file and open it in the editor.\n3. Add the path to the `red5streaming.jar` as a dependency. e.g.,\n\n```txt\ndependencies {\n    implementation \"com.facebook.react:react-native:${safeExtGet('reactNativeVersion', '+')}\"\n    implementation files(\"../example/android/app/libs/red5streaming.jar\") \n}\n```\n\nNow that the **Red5 Pro Android SDK** is a dependency for the `react-native-red5pro` library and is referenced from the parent project, we need to make sure we exclude it from being compiled in twice:\n\n1. Locate the `build.gradle` for your Android **app** and open it in the editor.\n2. Define the `red5sreaming.jar` as an exclusion for the **libs** dependencies.\n\nThe `dependencies` definition in the `build.gradle` of the **app** should look similar to the following:\n\n```txt\ndependencies {\n    implementation fileTree(dir: \"libs\", include: [\"*.jar\"], excludes: [\"red5streaming.jar\"])\n    implementation \"com.facebook.react:react-native:+\"  // From node_modules\n\n    implementation project(':react-native-permissions')\n    implementation project(':react-native-red5pro')\n}\n```\n\n### Add `R5Package` to your App\n\n1. Open you main `ReactApplication` implementation file.\n2. Within the `getPackages()` override, add a new instance of `R5Package` to the list, e.g.,:\n\n```java\nprivate final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n  @Override\n  public boolean getUseDeveloperSupport() {\n    return BuildConfig.DEBUG;\n  }\n\n  @Override\n  protected List\u003cReactPackage\u003e getPackages() {\n    return Arrays.\u003cReactPackage\u003easList(\n        new MainReactPackage(),\n        new RNPermissionsPackage(),\n        new R5Package()\n    );\n  }\n\n  @Override\n  protected String getJSMainModuleName() {\n    return \"index.android\";\n  }\n};\n```\n\n### Define Permissions\n\n#### Camera, Microphone and Network\n\nIf you intend to use the `react-native-red5pro` to broadcast live streams, you will need to add Privacy permissions for Camera and Microphone access on the device. To do so:\n\n1. Open the `AndroidManifest.xml` file and add the following to the `uses-permissions`:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\u003cuses-permission android:name=\"android.permission.CAPTURE_AUDIO_OUTPUT\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.READ_PHONE_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n```\n\n1. With the `AndroidManifest.xml` still open, under the `uses-permissions`, add the following `uses-feature`s:\n\n```xml\n\u003cuses-feature\n  android:name=\"android.hardware.camera\"\n  android:required=\"false\" /\u003e\n\u003cuses-feature\n  android:name=\"android.hardware.camera.front\"\n  android:required=\"false\" /\u003e\n```\n\nYour app should now be available for broadcasting and subscribing to live streams!\n\n#### Background Services\n\nThe librayr provides background services for broadcasting and/or playback of stream while the app is in the background. You will need to add the following to your `AndroidManifest.xml` file in order to enable these services:\n\n```\n\u003cservice android:name=\"com.red5pro.reactnative.view.PublishService\" /\u003e\n\u003cservice android:name=\"com.red5pro.reactnative.view.SubscribeService\" /\u003e\n```\n\n# Available Libraries\n\nIncluded in the `react-native-red5pro` project are two libraries that can be used (together, no less!) in your React Native App:\n\n* `R5StreamModule`\n* `R5VideoView`\n\n## R5StreamModule\n\nThe `R5StreamModule` is a Native Module.\n\nThe `R5StreamModule` is used to establish a streaming session without requiring a corresponding view to display and render the stream in your App on a UI View. This can be useful when the App only requires playing back the audio of a stream, or not requiring a publisher preview view, along with other feature scenarios.\n\nThe original reason for developing and including the `R5StreamModule` was to allow a previously established stream to be detached and reattached to `R5VideoView` instance when the UI state of the App requires a change in your project. By using the `R5StreamModule` you can maintain the previously established publisher or subscriber session while updating the view state - all while not interrupting the stream.\n\nTo initialize a stream session, from which you can start a publisher or subscriber stream, you initilize/register the configuration using the `R5StreamModule.init` method which returns a `Promise` and can be used with `async/await`:\n\n```\nconst streamId = await R5StreamModule.init('\u003cuniquestreamid\u003e', configuration)\n```\n\nFor publishers, the `\u003cuniquestreamid\u003e` can be the stream name you will publish with. For subscriber, the `\u003cuniquestreamid\u003e` will be a unique subscriper id.\n\n\u003e To Learn more about the `R5StreamModule` Usage, see [Module Usage](#r5streammodule-usage)\n\n## R5VideoView\n\nThe `R5VideoView` is a Native Component.\n\nThe `R5VideoView` is used to declare a UI view instance that a stream will be shown - either the Publisher preview or the Subscriber stream playback.\n\nThe `R5VideoView` is declared similar to the following and is recommended to retain a reference for other node handling and interaction:\n\n```js\n  const [subscriberRef, setSubscriberRef] = useState(null)\n\n...\n\n  return (\n    \u003cView\u003e\n      \u003cR5VideoView\n        {...streamConfiguration}\n        ref={ref =\u003e setSubscriberRef(ref)}\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n\u003e To Learn more about the `R5VideoView` Usage, see [Component Usage](#component-usage)\n\n# R5StreamModule Usage\n\nThe following describe the API available for the `react-native-red5pro` Native Module library, `R5StreamModule`.\n\n## Module Methods\n\nThe methods available on the `R5StreamModule` require the retention of a `stream id` established during initialization in order to access the associated stream instance to interact with.\n\n| Name | Arguments | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :--: | :--: |\n| init | `\u003cstream-id\u003e`, `configuration` | Request to intialize a configuration for a stream with an associated, unique stream id. | x | x |\n| publish | `\u003cstream-id\u003e`, `streamType`, `streamProps` | Request to start broadcasting stream with unique name and type (0: `live`, 1: `record`, `2`: append) and additional properties to use in broadcast. _See [Module Stream Properties](#module-stream-properties)._ | x | |\n| unpublish | `\u003cstream-id\u003e` | Request to stop broadcast. | x | |\n| subscribe | `\u003cstream-id\u003e`, `streamProps` | Request to start playback of stream with additional properties to use in playback. _See [Module Stream Properties](#module-stream-properties)._ | | x |\n| unsubscribe | `\u003cstream-id\u003e` | Request to stop playback. | | x |\n| swapCamera | `\u003cstream-id\u003e` | Request to swap camera on device, from front-facing to back-facing and vice-versa. | x | |\n| muteAudio | `\u003cstream-id\u003e` | Request to not send audio on broadcast during a publish session. | x | |\n| unmuteAudio | `\u003cstream-id\u003e` | Request to send audio on broadcast during a publish session. | x | |\n| muteVideo | `\u003cstream-id\u003e` | Request to not send video on broadcast during a publish session. | x | |\n| unmuteVideo | `\u003cstream-id\u003e` | Request to send video on broadcast during a publish session. | x | |\n| setPlaybackVolume | `\u003cstream-id\u003e` | Request to set playback volume. _From `0` to `100`._ | | x |\n\nIt should be noted that the following methods return a `Promise` object:\n\n* `init`\n* `publish`\n* `unpublish`\n* `subscribe`\n* `unsubscribe`\n\n## Module Stream Properties\n\nThe following stream properties are available for a `R5StreamModule`:\n\n| Key | Type | Default | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :-- | :--: | :--: |\n| showDebugView | boolean | false | Displays the debug information for a broadcast and playback stream. | x | x |\n| logLevel | int | 3 | Enumerated value of [R5LogLevel](src/enum/R5VideoView.loglevel.js). | x | x |\n| scaleMode | int | 0 | Enumerated value of [R5ScaleMode](src/enum/R5VideoView.scalemode.js). | x | x |\n| publishVideo | boolean | true | Flag to include video in broadcast. | x | |\n| publishAudio | boolean | true | Flag to include audio in broadcast. | x | |\n| subscribeVideo | boolean | true | Flag to include video in subscription. | x | |\n| cameraWidth | int | 640 | Width dimension of Camera to use in broadcast. | x | |\n| cameraHeight | int | 360 | Height dimension of Camera to use in broadcast. | x | |\n| bitrate | int | 750 | The video bitrate to broadcast at. | x | |\n| framerate | int | 15 | The video framerate to broadcast at. | x | |\n| audioBitrate | int | 32 | The audio bitrate to broadcast at (kb/s). | x | |\n| audioSampleRate | int | iOS: `16000`, Android: `44100` | The audio sample rate to broadcast at (hz).  | x | |\n| useAdaptiveBitrateController | boolean | false | Use of adaptive bitrate streaming for broadcasting.  | x | |\n| useBackfacingCamera | boolean | false | Use the backfacing camera of the device to start broadcasting. | x | |\n| audioMode | int | 0 | Enumerated value of [R5AudioMode](src/enum/R5VideoView.audiomode.js). | x | x |\n| enableBackgroundStreaming | boolean | false | Turns on ability to continue to publish or subscribe to audio while app is in the background. | x | x |\n\nThese properties represent the settings for a Publisher and Subscriber session that do not necessarily rely on a corresponding UI view (such as the `R5VideoView` component).\n\n## Module Events\n\nIn addition to the `Promise` objects returned on the `init`, `publish`, `unpublish`, `subscribe` and `unsubscribe` methods, there are events on the `R5StreamModule` that can listened to using the `NativeEventEmitter` from React Native.\n\nThe following events are available:\n\n| Name | Event Object | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :--: | :--: |\n| onConfigured | {`key`: `\u003cconfiguration.key provided\u003e`} | Notification of configuration being completed. | x | x |\n| onMetaDataEvent | {`metadata`: `\u003cserver provided info about stream\u003e`} | Notification of stream metadata. | | x |\n| onPublisherStreamStatus | {`status`: [refer to status section](#status-callback-objects)} | Notification of stream status for a Publisher. | x | |\n| onSubscriberStreamStatus | {`status`: [refer to status section](#status-callback-objects)} | Notification of stream status for a Subscriber. | | x |\n| onUnsubscribeNotification | none | Notification of stop of playback. | | x |\n| onUnpublishNotification | none | Notification of stop of broadcast. | x | |\n\nTo establish a listener for these events, you must first establish a `NativeEventEmiiter` instance using the `R5StreamModule`:\n\n```js\nimport { useRef } from 'react'\nimport { NativeEventEmiiter } from 'react-native'\nimport { R5StreamModule } from 'react-native-red5pro'\n...\n  const emitter = useRef(new NativeEventEmitter(R5StreamModule))\n```\n\nOnce an emitter is established, use the `addListener` method, e.g,:\n\n```js\n  useEffect(() =\u003e {\n    const eventEmitter = emitter.current\n    if (eventEmitter) {\n      eventEmitter.addListener('onMetaDataEvent', onMetaData)\n      eventEmitter.addListener('onConfigured', onConfigured)\n      eventEmitter.addListener('onSubscriberStreamStatus', onSubscriberStreamStatus)\n      eventEmitter.addListener('onUnsubscribeNotification', onUnsubscribeNotification)\n    }\n    return () =\u003e {\n      if (eventEmitter) {\n        eventEmitter.removeAllListeners('onMetaDataEvent')\n        eventEmitter.removeAllListeners('onConfigured')\n        eventEmitter.removeAllListeners('onSubscriberStreamStatus')\n        eventEmitter.removeAllListeners('onUnsubscribeNotification')\n      }\n    }\n  }, [])\n```\n\n## Known Issues\n\n### Issue 1.0 - Android Publisher\n\nThe Android SDK requires reading data from the camera previous display in order to send video data to the server. As such, when there is no associated \"attached\" `R5VideoView` to the publisher stream, no video data will be delivered to subscribers.\n\n# R5VideoView Usage\n\nThe following describe the API available for the `react-native-red5pro` Native Component library, `R5VideoView`.\n\n## Component Properties\n\n| Key | Type | Default | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :-- | :--: | :--: |\n| showDebugView | boolean | false | Displays the debug information for a broadcast and playback stream. | x | x |\n| logLevel | int | 3 | Enumerated value of [R5LogLevel](src/enum/R5VideoView.loglevel.js). | x | x |\n| scaleMode | int | 0 | Enumerated value of [R5ScaleMode](src/enum/R5VideoView.scalemode.js). | x | x |\n| streamType | int | 0 | Enumerated value of [R5PublishType](src/enum/R5VideoView.publishtype.js). | x | |\n| publishVideo | boolean | true | Flag to include video in broadcast. | x | |\n| publishAudio | boolean | true | Flag to include audio in broadcast. | x | |\n| subscribeVideo | boolean | true | Flag to include video in subscription. | x | |\n| cameraWidth | int | 640 | Width dimension of Camera to use in broadcast. | x | |\n| cameraHeight | int | 360 | Height dimension of Camera to use in broadcast. | x | |\n| bitrate | int | 750 | The video bitrate to broadcast at. | x | |\n| framerate | int | 15 | The video framerate to broadcast at. | x | |\n| audioBitrate | int | 32 | The audio bitrate to broadcast at (kb/s). | x | |\n| audioSampleRate | int | iOS: `16000`, Android: `44100` | The audio sample rate to broadcast at (hz).  | x | |\n| useAdaptiveBitrateController | boolean | false | Use of adaptive bitrate streaming for broadcasting.  | x | |\n| useBackfacingCamera | boolean | false | Use the backfacing camera of the device to start broadcasting. | x | |\n| audioMode | int | 0 | Enumerated value of [R5AudioMode](src/enum/R5VideoView.audiomode.js). | x | x |\n| enableBackgroundStreaming | boolean | false | Turns on ability to continue to publish or subscribe to audio while app is in the background. | x | x |\n| zOrderOnTop | boolean | false | Setting of layout order of stream view. _Android only._ | x | x |\n| zOrderMediaOverlay | boolean | false | Setting of layout order of stream view. _Android only._ | x | x |\n| configuration | shape | `REQUIRED` | [Refer to Configuration Properties](#component-configuration-properties). | x | x |\n\n## Component Configuration Properties\n\nThe following are the `configuration` properties of the Properties of the `react-native-red5pro` library. This is required to properly setup a broadcasting or playback session of a stream on the *Red5 Pro Server*.\n\nThese properties are required for **both** Publishers and Subscribers.\n\n| Key | Type | Default | Description |\n| :-- | :-- | :-- | :-- |\n| host | string | `REQUIRED` | The IP or Fully Qualified Domain Name of where the *Red5 Pro Server* is deployed. |\n| port | int | `REQUIRED` | The port number that is exposed on the *Red5 Pro Server* to access RTSP connections. |\n| streamName | string | `REQUIRED` | The unique name of the stream to broadcast on or subscribe to. |\n| contextName | string | `REQUIRED` | The target *webapp* to stream to or access streams from. _Typically, `live`._ |\n| licenseKey | string | `REQUIRED` | The SDK license key provided with your registered *Red5 Pro* account. |\n| bundleID | string | `REQUIRED` | A unique (typically inversed domain name) descriptor for you app. _Required for some stores._ |\n| bufferTime | number | 0.5 | Default buffer. |\n| streamBufferTime | number | 4 | Default buffer for subscribers to allow on the server in sending packets. |\n| parameters | string | none | Optional connection parameters. Often used for authentication. ***[See Note Below](#parameters-configuration-property)** |\n| autoAttachView | boolean | `true` | A flag to also attach the view component to a stream upon setup. |\n| key | string | `REQUIRED` | Unique key to be used internally to access the configuration object. |\n\n### Component Parameters Configuration Property\n\nThe `parameters` configuration provides the ability to pass in additional properties to be used by the target application accepting the RTSP connection from a publisher or subscriber.\n\nTypically, this is used for authentication purposes and requires custom modifications on the server.\n\nThe structure is key/value pairs delimited by a `;`. For example:\n\n```js\nlet auth = 'username=foo;password=bar;'\n```\n\n\u003e See [iOS Example](https://github.com/red5pro/streaming-ios/blob/master/R5ProTestbed/Tests/PublishAuth/PublishAuthTest.swift) and [Android Example](https://github.com/red5pro/streaming-android/blob/master/app/src/main/java/red5pro/org/testandroidproject/tests/PublishAuthTest/PublishAuthTest.java).\n\n\n## Component Methods\n\nThe following methods are available:\n\n```js\nimport { subscribe,\n         unsubscribe,\n         publish,\n         unpublish,\n         swapCamera,\n         updateScaleMode,\n         setPlaybackVolume,\n         muteAudio,\n         unmuteAudio,\n         muteVideo,\n         unmuteVideo,\n         attach,\n         detach\n} from 'react-native-red5pro'\n```\n\n| Name | Arguments | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :--: | :--: |\n| subscribe | `\u003cref\u003e`, `streamName` | Request to start subscribing to stream. | | x |\n| unsubscribe | `\u003cref\u003e` | Request to stop playback of stream. | | x |\n| publish | `\u003cref\u003e`, `streamName`, `streamType` | Request to start broadcasting stream with unique name and type (0: `live`, 1: `record`, `2`: append). | x | |\n| unpublish | `\u003cref\u003e` | Request to stop broadcast. | x | |\n| swapCamera | `\u003cref\u003e` | Request to swap camera on device, from front-facing to back-facing and vice-versa. | x | |\n| updateScaleMode | `\u003cref\u003e`, `mode` | Request to change playback scalemode (0: `fill with aspect ratio`, 1: `fit, with letterboxing`, 2: `fill to view`). | | x |\n| setPlaybackVolume | `\u003cref\u003e`, `int` | Request to set playback volume. _From `0` to `100`._ | | | x |\n| muteAudio | `\u003cref\u003e` | Request to not send audio on broadcast during a publish session. | x | |\n| unmuteAudio | `\u003cref\u003e` | Request to send audio on broadcast during a publish session. | x | |\n| muteVideo | `\u003cref\u003e` | Request to not send video on broadcast during a publish session. | x | |\n| unmuteVideo | `\u003cref\u003e` | Request to send video on broadcast during a publish session. | x | |\n| attach | `\u003cref\u003e`, `stream-id` | Request to attach a stream to the view. | x | x |\n| detach | `\u003cref\u003e`, `stream-id` | Request to detach a stream from the view. | x | x |\n\n\u003e In the case of the `attach` and `detach` methods, a previously established stream will need to be available in the app which is associated with the `stream id`. As such, a previous call to `subscribe` or `publish` is required to register the stream for a Subscriber or Publisher client, respectively.\n\n## Component Event Callbacks\n\nThe following callbacks are available:\n\n| Name | Event Object | Description | Publisher | Subscriber |\n| :-- | :-- | :-- | :--: | :--: |\n| onConfigured | {`key`: `\u003cconfiguration.key provided\u003e`} | Notification of configuration being completed. | x | x |\n| onMetaData | {`metadata`: `\u003cserver provided info about stream\u003e`} | Notification of stream metadata. | | x |\n| onPublisherStreamStatus | {`status`: [refer to status section](#status-callback-objects)} | Notification of stream status for a Publisher. | x | |\n| onSubscriberStreamStatus | {`status`: [refer to status section](#status-callback-objects)} | Notification of stream status for a Subscriber. | | x |\n| onUnsubscribeNotification | none | Notification of stop of playback. | | x |\n| onUnpublishNotification | none | Notification of stop of broadcast. | x | |\n\n### Component Status Callback Objects\n\nThe Publishers and Subscribers receive status events during the lifecycle of broadcasting and consuming a stream, respectively. The following properties are available in the status object:\n\n| Key | Description |\n| :-- | :-- |\n| code | The enumerated code of the event. |\n| name | The associated name of the event. |\n| message | The human readable, optional, message associated with the event. |\n| streamName | The associated stream. |\n\n* The enumerated list of statuses on iOS [https://www.red5pro.com/docs/static/ios-streaming/protocol_r5_stream_delegate-p.html](https://www.red5pro.com/docs/static/ios-streaming/protocol_r5_stream_delegate-p.html)\n* The enumerated list of statuses on Android [https://www.red5pro.com/docs/static/android-streaming/enumcom_1_1red5pro_1_1streaming_1_1event_1_1_r5_connection_event.html](https://www.red5pro.com/docs/static/android-streaming/enumcom_1_1red5pro_1_1streaming_1_1event_1_1_r5_connection_event.html)\n\n## Component Publisher Example\n\nYou will need to have a Red5 Pro SDK license and access to a reployed Red5 Pro Server in order to use the following example.\n\n\u003e [Sign up for a free trial of Red5 Pro!](https://account.red5pro.com/register)\n\n```js\nimport React, { useState } from 'react'\nimport { findNodeHandle, View, Button, StyleSheet } from 'react-native'\n\nimport { R5VideoView } from 'react-native-red5pro'\nimport { R5LogLevel } from 'react-native-red5pro'\nimport {\n  publish,\n  unpublish,\n  swapCamera\n} from 'react-native-red5pro'\n\nconst streamConfig = {\n  configuration: {\n    host: 'your.red5pro.deploy', // IP or Fully Qualified Domain Name\n    port: 8554,\n    contextName: 'live',\n    bufferTime: 0.5,\n    streamBufferTime: 2,\n    key: Math.floor(Math.random() * 0x10000).toString(16),\n    bundleID: 'com.red5pro.example',\n    licenseKey: 'YOUR-LICENSE-KEY',\n    streamName: 'mystream'\n  },\n  showDebugView: true,\n  logLevel: R5LogLevel.DEBUG\n}\n\nexport default App = () =\u003e {\n\n  const [publisherRef, setPublisherRef] = useState(null)\n\n  const onMetaData = event =\u003e {\n    const { nativeEvent: { metadata } } = event\n    console.log(`Publisher:onMetadata :: ${metadata}`)\n  }\n\n  const onConfigured = event =\u003e {\n    const { configuration: { streamName } } = streamConfig\n    const { nativeEvent: { key } } = event\n    console.log(`Publisher:onConfigured :: ${key}`)\n    publish(findNodeHandle(publisherRef), streamName)\n  }\n\n  const onStop = () =\u003e {\n    unpublish(findNodeHandle(publisherRef))\n  }\n\n  const onSwapCamera = () =\u003e {\n    swapCamera(findNodeHandle(publisherRef))\n  }\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cR5VideoView\n        {...streamConfig}\n        ref={ref =\u003e setPublisherRef(ref)}\n        style={styles.videoView}\n        onMetaData={onMetaData}\n        onConfigured={onConfigured}\n        /\u003e\n      \u003cButton\n        style={styles.button}\n        onPress={this.onStop}\n        title='Stop'\n        accessibilityLabel='Stop'\n        /\u003e\n      \u003cButton\n        style={styles.button}\n        onPress={this.onSwapCamera}\n        title='Swap Camera'\n        accessibilityLabel='Swap Camera'\n        /\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: 'white',\n    justifyContent: 'center'\n  },\n  video: {\n    flex: 1,\n    flexDirection: 'row',\n    backgroundColor: 'black'\n  },\n  button: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    height: 40,\n    backgroundColor: 'blue',\n    color: 'white'\n  }\n})\n```\n\n## Component Subscriber Example\n\nYou will need to have a Red5 Pro SDK license and access to a deployed Red5 Pro Server in order to use the following example.\n\n\u003e [Sign up for a free trial of Red5 Pro!](https://account.red5pro.com/register)\n\n```js\nimport React, { useState } from 'react'\nimport { findNodeHandle, View, Button, StyleSheet } from 'react-native'\n\nimport { R5VideoView } from 'react-native-red5pro'\nimport { R5LogLevel, R5ScaleMode } from 'react-native-red5pro'\nimport {\n  subscribe,\n  unsubscribe,\n  updateScaleMode\n} from 'react-native-red5pro'\n\nconst streamConfig = {\n  configuration: {\n    host: 'your.red5pro.deploy', // IP or Fully Qualified Domain Name\n    port: 8554,\n    contextName: 'live',\n    bufferTime: 0.5,\n    streamBufferTime: 2,\n    key: Math.floor(Math.random() * 0x10000).toString(16),\n    bundleID: 'com.red5pro.example',\n    licenseKey: 'YOUR-LICENSE-KEY',\n    streamName: 'mystream'\n  },\n  showDebugView: true,\n  logLevel: R5LogLevel.DEBUG,\n  scaleMode: R5ScaleMode.SCALE_TO_FILL\n}\n\nexport default App = () =\u003e {\n\n  const [subscriberRef, setSubscriberRef] = useState(null)\n  const [scaleMode, setScaleMode] = useState(R5ScaleMode.SCALE_TO_FILL)\n\n  const onMetaData = event =\u003e {\n    const { nativeEvent: { metadata } } = event\n    console.log(`Subscriber:onMetadata :: ${metadata}`)\n  }\n\n  const onConfigured = event =\u003e {\n    const { configuration: { streamName } } = streamConfig\n    const { nativeEvent: { key } } = event\n    console.log(`Subscriber:onConfigured :: ${key}`)\n    subscribe(findNodeHandle(subscriberRef), streamName)\n  }\n\n  const onStop = () =\u003e {\n    unsubscribe(findNodeHandle(subscriberRef))\n  }\n\n  const onSwapScaleMode = () =\u003e {\n    let scale = scaleMode + 1\n    if (scale \u003e 2) {\n      scale = 0\n    }\n    updateScaleMode(findNodeHandle(subscriberRef), scale)\n    setScaleMode(scale)\n  }\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cR5VideoView\n        {...streamConfig}\n        ref={ref =\u003e setSubscriberRef(ref)}\n        style={styles.videoView}\n        onMetaData={onMetaData}\n        onConfigured={onConfigured}\n        /\u003e\n      \u003cButton\n        style={styles.button}\n        onPress={onStop}\n        title='Stop'\n        accessibilityLabel='Stop'\n        /\u003e\n      \u003cButton\n        style={styles.button}\n        onPress={onSwapScaleMode}\n        title='Swap Scale Mode'\n        accessibilityLabel='Swap Scale Mode'\n        /\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: 'white',\n    justifyContent: 'center'\n  },\n  video: {\n    flex: 1,\n    flexDirection: 'row',\n    backgroundColor: 'black'\n  },\n  button: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    height: 40,\n    backgroundColor: 'blue',\n    color: 'white'\n  }\n})\n```\n\n\u003e For more in-depth examples, please refer to the [example](example) included in this repository.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Freact-native-red5pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fred5pro%2Freact-native-red5pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Freact-native-red5pro/lists"}