{"id":15910543,"url":"https://github.com/apivideo/api.video-reactnative-live-stream","last_synced_at":"2025-04-05T06:03:51.340Z","repository":{"id":37370141,"uuid":"363916176","full_name":"apivideo/api.video-reactnative-live-stream","owner":"apivideo","description":"React Native RTMP live stream client. Made with ♥ by api.video","archived":false,"fork":false,"pushed_at":"2024-05-29T08:10:56.000Z","size":3717,"stargazers_count":170,"open_issues_count":8,"forks_count":33,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-05-29T20:49:31.896Z","etag":null,"topics":["android","ios","live-streaming","react-native","rtmp","video"],"latest_commit_sha":null,"homepage":"https://api.video","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apivideo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2021-05-03T12:05:33.000Z","updated_at":"2024-06-10T14:58:31.947Z","dependencies_parsed_at":"2024-01-02T12:30:25.518Z","dependency_job_id":"e466ec4a-fca1-4c6a-b5b4-52151ae3b2a4","html_url":"https://github.com/apivideo/api.video-reactnative-live-stream","commit_stats":{"total_commits":178,"total_committers":14,"mean_commits":"12.714285714285714","dds":0.7865168539325843,"last_synced_commit":"0c3eb2efc736323de59f72e116255bf831e891ea"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-live-stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-live-stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-live-stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apivideo%2Fapi.video-reactnative-live-stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apivideo","download_url":"https://codeload.github.com/apivideo/api.video-reactnative-live-stream/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294516,"owners_count":20915340,"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","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":["android","ios","live-streaming","react-native","rtmp","video"],"created_at":"2024-10-06T15:08:25.059Z","updated_at":"2025-04-05T06:03:51.318Z","avatar_url":"https://github.com/apivideo.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\u003cdocumentation_excluded\u003e--\u003e\n[![badge](https://img.shields.io/twitter/follow/api_video?style=social)](https://twitter.com/intent/follow?screen_name=api_video) \u0026nbsp; [![badge](https://img.shields.io/github/stars/apivideo/api.video-reactnative-live-stream?style=social)](https://github.com/apivideo/api.video-reactnative-live-stream) \u0026nbsp; [![badge](https://img.shields.io/discourse/topics?server=https%3A%2F%2Fcommunity.api.video)](https://community.api.video)\n![](https://github.com/apivideo/.github/blob/main/assets/apivideo_banner.png)\n\n![npm](https://img.shields.io/npm/v/@api.video/react-native-livestream)\n![ts](https://badgen.net/badge/-/TypeScript/blue?icon=typescript\u0026label)\n\n\u003ch1 align=\"center\"\u003eReact Native RTMP live stream client\u003c/h1\u003e\n\n[api.video](https://api.video) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n\n## Table of contents\n\n- [Table of contents](#table-of-contents)\n- [Project description](#project-description)\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n  - [Permissions](#permissions)\n    - [Android](#android)\n    - [iOS](#ios)\n  - [Code sample](#code-sample)\n- [Documentation](#documentation)\n  - [Props \\\u0026 Methods](#props--methods)\n- [Example App](#example-app)\n  - [Setup](#setup)\n    - [Android](#android-1)\n    - [iOS](#ios-1)\n- [Plugins](#plugins)\n- [FAQ](#faq)\n\n\u003c!--\u003c/documentation_excluded\u003e--\u003e\n\u003c!--\u003cdocumentation_only\u003e\n---\ntitle: React Native live stream component\nmeta: \n  description: The official React Native live stream component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n---\n\n# React Native Livestream Component\n\n[api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand \u0026 low latency live streaming features in your app.\n\n\u003c/documentation_only\u003e--\u003e\n## Project description\n\nThis module is made for broadcasting RTMP live stream from smartphone camera\n\n## Getting started\n\n### Installation\n\n```sh\nnpm install @api.video/react-native-livestream\n```\n\nor\n\n```sh\nyarn add @api.video/react-native-livestream\n```\n\n### Permissions\n\n#### Android\n\nPermissions `android.permission.RECORD_AUDIO`, `android.permission.CAMERA` and `android.permission.INTERNET` are in the library manifest and will be requested by this library at runtime. You don't have to request them in your application.\n\nFor the PlayStore, your application might declare this in its `AndroidManifest.xml`\n\n```xml\n\n\u003cmanifest\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera\" android:required=\"true\" /\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera.autofocus\" android:required=\"false\" /\u003e\n\u003c/manifest\u003e\n```\n\n#### iOS\n\nUpdate `Info.plist` with a usage description for camera and microphone\n\n```xml\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eYour own description of the purpose\u003c/string\u003e\n\n\u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n\u003cstring\u003eYour own description of the purpose\u003c/string\u003e\n```\n\n### Code sample\n\n```jsx\nimport React, { useRef, useState } from 'react';\nimport { View, TouchableOpacity } from 'react-native';\nimport { ApiVideoLiveStreamView } from '@api.video/react-native-livestream';\n\nconst App = () =\u003e {\n  const ref = useRef(null);\n  const [streaming, setStreaming] = useState(false);\n\n  return (\n    \u003cView style={{ flex: 1, alignItems: 'center' }}\u003e\n      \u003cApiVideoLiveStreamView\n        style={{ flex: 1, backgroundColor: 'black', alignSelf: 'stretch' }}\n        ref={ref}\n        camera=\"back\"\n        enablePinchedZoom={true}\n        video={{\n          fps: 30,\n          resolution: '720p', // Alternatively, you can specify the resolution in pixels: { width: 1280, height: 720 }\n          bitrate: 2*1024*1024, // # 2 Mbps\n          gopDuration: 1, // 1 second\n        }}\n        audio={{\n          bitrate: 128000,\n          sampleRate: 44100,\n          isStereo: true,\n        }}\n        isMuted={false}\n        onConnectionSuccess={() =\u003e {\n          //do what you want\n        }}\n        onConnectionFailed={(e) =\u003e {\n          //do what you want\n        }}\n        onDisconnect={() =\u003e {\n          //do what you want\n        }}\n      /\u003e\n      \u003cView style={{ position: 'absolute', bottom: 40 }}\u003e\n        \u003cTouchableOpacity\n          style={{\n            borderRadius: 50,\n            backgroundColor: streaming ? 'red' : 'white',\n            width: 50,\n            height: 50,\n          }}\n          onPress={() =\u003e {\n            if (streaming) {\n              ref.current?.stopStreaming();\n              setStreaming(false);\n            } else {\n              ref.current?.startStreaming('YOUR_STREAM_KEY');\n              setStreaming(true);\n            }\n          }}\n        /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n\nexport default App;\n```\n\n## Documentation\n\n### Props \u0026 Methods\n\n```ts\ntype ApiVideoLiveStreamProps = {\n  // Styles for the view containing the preview\n  style: ViewStyle;\n  // camera facing orientation\n  camera?: 'front' | 'back';\n  video: {\n    // frame rate\n    fps: number;\n    // resolution.\n    resolution: Resolution | PredefinedResolution; \n    // video bitrate. depends on resolutions.\n    bitrate: number;\n    // duration between 2 key frames in seconds\n    gopDuration: number;\n  };\n  audio: {\n    // sample rate. Only for Android. Recommended: 44100\n    sampleRate: 44100;\n    // true for stereo, false for mono. Only for Android. Recommended: true\n    isStereo: true;\n    // audio bitrate. Recommended: 128000\n    bitrate: number;\n  };\n  // Mute/unmute microphone\n  isMuted: false;\n  // Enables/disables the zoom gesture handled natively\n  enablePinchedZoom?: boolean;\n  // will be called when the connection is successful\n  onConnectionSuccess?: () =\u003e void;\n  // will be called when connection failed\n  onConnectionFailed?: (code: string) =\u003e void;\n  // will be called when the live-stream is stopped\n  onDisconnect?: () =\u003e void;\n};\n\ntype ApiVideoLiveStreamMethods = {\n  // Start the stream\n  // streamKey: your live stream RTMP key\n  // url: RTMP server url, default: rtmp://broadcast.api.video/s\n  startStreaming: (streamKey: string, url?: string) =\u003e void;\n  // Stops the stream\n  stopStreaming: () =\u003e void;\n  // Sets the zoomRatio\n  // Intended for use with React Native Gesture Handler, a slider or similar.\n  setZoomRatio: (zoomRatio) =\u003e void;\n};\n```\n\n## Example App\n\nYou can try our [example app](https://github.com/apivideo/api.video-reactnative-live-stream/tree/main/example), feel free to test it.\n\n### Setup\n\nBe sure to follow the [React Native installation steps](https://reactnative.dev/docs/environment-setup) before anything.\n\n1. Open a new terminal\n2. Clone the repository and go into it\n\n```shell\ngit clone https://github.com/apivideo/api.video-reactnative-live-stream.git livestream_example_app \u0026\u0026 cd livestream_example_app\n```\n\n#### Android\n\nInstall the packages and launch the application\n\n```shell\nyarn \u0026\u0026 yarn example android\n```\n\n#### iOS\n\n1. Sign your application\n\nOpen Xcode, click on \"Open a project or file\" and open the `Example.xcworkspace` file.\n\u003cbr /\u003eYou can find it in `YOUR_PROJECT_NAME/example/ios`.\n\u003cbr /\u003eClick on Example, go in `Signin \u0026 Capabilities` tab, add your team and create a unique\nbundle identifier.\n\n2. Install the packages and launch the application\n\n```shell\nyarn \u0026\u0026 yarn example ios\n```\n\n## Plugins\n\napi.video live stream library is using external native library for broadcasting\n\n| Plugin     | README       |\n| ---------- | ------------ |\n| StreamPack | [StreamPack] |\n| HaishinKit | [HaishinKit] |\n\n## FAQ\n\nIf you have any questions, ask us here: https://community.api.video .\nOr use [Issues].\n\n[//]: # \"These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax\"\n[streampack]: https://github.com/ThibaultBee/StreamPack\n[haishinkit]: https://github.com/shogo4405/HaishinKit.swift\n[issues]: https://github.com/apivideo/api.video-reactnative-live-stream/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapivideo%2Fapi.video-reactnative-live-stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapivideo%2Fapi.video-reactnative-live-stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapivideo%2Fapi.video-reactnative-live-stream/lists"}