{"_id":"@amityco/video-broadcaster-react-native","_rev":"6-58e6dde311433e8d0eb623a0703ceac0","name":"@amityco/video-broadcaster-react-native","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@amityco/video-broadcaster-react-native","version":"1.0.0","_id":"@amityco/video-broadcaster-react-native@1.0.0","maintainers":[{"name":"pakkawat","email":"pakkawat@amity.co"},{"name":"touchaponk","email":"touchaponk@gmail.com"},{"name":"ekoapp","email":"developers@amity.co"}],"dist":{"shasum":"3a883673d236e5c793d2037561eabab6a89ceba3","tarball":"https://registry.npmjs.org/@amityco/video-broadcaster-react-native/-/video-broadcaster-react-native-1.0.0.tgz","fileCount":21,"integrity":"sha512-vVCRIMWK/AckM5g8FKu4tOVAJsA3Gybh9JJL1gD8/x1E33E7EW6aEX+JsSDhMxjirsDlpfKVBIh2o2Z2/YOCOg==","signatures":[{"sig":"MEUCIQC9krDmX/jDPMm14PAbp1sr2m4A9+CTeLyMtuYAHPYhEwIgXBH7jmXg4cRfQmqu/zyyDEdV3/8Muu3RUxJ9e3B4tJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24325},"main":"lib/commonjs/index","types":"lib/typescript/index.d.ts","module":"lib/module/index","source":"index.ts","engines":{"node":">=18"},"gitHead":"d0d8d4c2b3b8900b69bfc33aa3bba2745e6efbfe","scripts":{"ios":"react-native run-ios","lint":"eslint .","test":"jest","build":"bob build","start":"react-native start","android":"react-native run-android"},"_npmUser":{"name":"ekoapp","email":"developers@amity.co"},"_npmVersion":"10.7.0","description":"This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).","directories":{},"_nodeVersion":"20.14.0","react-native":"src/index","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","react":"18.2.0","eslint":"^8.19.0","prettier":"2.8.8","babel-jest":"^29.6.3","typescript":"5.0.4","@babel/core":"^7.20.0","@types/react":"^18.2.6","react-native":"0.74.1","@babel/runtime":"^7.20.0","@babel/preset-env":"^7.20.0","react-test-renderer":"18.2.0","react-native-builder-bob":"^0.23.2","@react-native/babel-preset":"0.74.83","@react-native/metro-config":"0.74.83","@types/react-test-renderer":"^18.0.0","@react-native/eslint-config":"0.74.83","@amityco/ts-sdk-react-native":"^6.25.0","@react-native/typescript-config":"0.74.83","@api.video/react-native-livestream":"^2.0.0"},"peerDependencies":{"react":"*","react-native":"*","@amityco/ts-sdk-react-native":"^6.25.0"},"_npmOperationalInternal":{"tmp":"tmp/video-broadcaster-react-native_1.0.0_1718194442183_0.8494750666431794","host":"s3://npm-registry-packages"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module","typescript"]}},"1.1.0":{"name":"@amityco/video-broadcaster-react-native","version":"1.1.0","_id":"@amityco/video-broadcaster-react-native@1.1.0","maintainers":[{"name":"ekoapp","email":"developers@amity.co"},{"name":"touchaponk","email":"touchaponk@gmail.com"},{"name":"pakkawat","email":"pakkawat@amity.co"}],"dist":{"shasum":"e7a385322cc599d0675de9d8fe2fdefea6157040","tarball":"https://registry.npmjs.org/@amityco/video-broadcaster-react-native/-/video-broadcaster-react-native-1.1.0.tgz","fileCount":21,"integrity":"sha512-osF0dQWCZjUwmmOfrJplrwGx6dK4DDAnYWNjNggHTcp/ncteZwo27o8HYVizDSz0oT10VGtNQivCRJRnc1m43Q==","signatures":[{"sig":"MEYCIQDvr2BPSlqAVMu+xugpwFf7SSIYFXvw5VuqlYRq1/HAoQIhAO3FypMRezopOfCw/Du4MtGs3O0yNRtjCNkkDhjsmRho","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24795},"main":"lib/commonjs/index","types":"lib/typescript/index.d.ts","module":"lib/module/index","source":"index.ts","engines":{"node":">=18"},"gitHead":"69c13ee4e4d9dc676d73b3f2cfada60bcf786fed","scripts":{"ios":"react-native run-ios","lint":"eslint .","test":"jest","build":"bob build","start":"react-native start","android":"react-native run-android"},"_npmUser":{"name":"ekoapp","email":"developers@amity.co"},"_npmVersion":"10.8.2","description":"A react native components used to broadcast livestream","directories":{},"_nodeVersion":"20.19.0","react-native":"src/index","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","react":"18.2.0","eslint":"^8.19.0","prettier":"2.8.8","babel-jest":"^29.6.3","typescript":"5.0.4","@babel/core":"^7.20.0","@types/react":"^18.2.6","react-native":"0.74.1","@babel/runtime":"^7.20.0","@babel/preset-env":"^7.20.0","react-test-renderer":"18.2.0","@rnx-kit/metro-config":"^2.0.1","react-native-builder-bob":"^0.23.2","@react-native/babel-preset":"0.74.83","@react-native/metro-config":"0.74.83","@types/react-test-renderer":"^18.0.0","@react-native/eslint-config":"0.74.83","@amityco/ts-sdk-react-native":"^7.1.0","@react-native/typescript-config":"0.74.83","@api.video/react-native-livestream":"^2.0.0"},"peerDependencies":{"react":"*","react-native":"*","@amityco/ts-sdk-react-native":"^7.1.0","@api.video/react-native-livestream":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-broadcaster-react-native_1.1.0_1744369547234_0.3272002844741517","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module","typescript"]}},"2.0.0":{"name":"@amityco/video-broadcaster-react-native","version":"2.0.0","_id":"@amityco/video-broadcaster-react-native@2.0.0","maintainers":[{"name":"ekoapp","email":"developers@amity.co"},{"name":"touchaponk","email":"touchaponk@gmail.com"},{"name":"pakkawat","email":"pakkawat@amity.co"}],"dist":{"shasum":"f87cc5fb22c8ccdc568055204100c2e430a6a711","tarball":"https://registry.npmjs.org/@amityco/video-broadcaster-react-native/-/video-broadcaster-react-native-2.0.0.tgz","fileCount":21,"integrity":"sha512-iz61X6eNsAI7aH6FeMBjrHdk1AGOksiKIFuumY/cwRDlEJ7j5j5rGhfwRPYl7FrBSdi76axzGOzykyNANjzICw==","signatures":[{"sig":"MEUCIQD410tPlGnWal7QGcyWlvHrtoYw/9FJ/X2e57eosuYn1AIgIzhB4NVq6i0ZCC8EXL4q1asWJoUt1PSLgB7VlHj4xqA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24654},"main":"lib/commonjs/index","types":"lib/typescript/index.d.ts","module":"lib/module/index","source":"index.ts","engines":{"node":">=18"},"gitHead":"03ba0c9bb7b5d8d45c68a7ffa1c380d8aedc5a9f","scripts":{"ios":"react-native run-ios","lint":"eslint .","test":"jest","build":"bob build","start":"react-native start","android":"react-native run-android"},"_npmUser":{"name":"ekoapp","email":"developers@amity.co"},"_npmVersion":"10.8.2","description":"A react native components used to broadcast livestream","directories":{},"_nodeVersion":"20.19.5","react-native":"src/index","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","react":"18.3.1","eslint":"^8.19.0","prettier":"2.8.8","babel-jest":"^29.6.3","typescript":"5.0.4","@babel/core":"^7.25.2","@types/react":"^18.2.6","react-native":"0.76.9","@babel/runtime":"^7.25.0","@babel/preset-env":"^7.25.3","react-test-renderer":"18.3.1","@rnx-kit/metro-config":"^2.0.1","react-native-builder-bob":"^0.23.2","@react-native/babel-preset":"0.76.9","@react-native/metro-config":"0.76.9","@types/react-test-renderer":"^18.0.0","@react-native-community/cli":"15.0.1","@react-native/eslint-config":"0.76.9","@amityco/ts-sdk-react-native":"^7.9.2","@react-native/typescript-config":"0.76.9","@api.video/react-native-livestream":"^2.0.2","@react-native-community/cli-platform-ios":"15.0.1","@react-native-community/cli-platform-android":"15.0.1"},"peerDependencies":{"react":"*","react-native":"*","@amityco/ts-sdk-react-native":"^7.9.2","@api.video/react-native-livestream":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-broadcaster-react-native_2.0.0_1758877670841_0.570812901822082","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module","typescript"]}}},"time":{"created":"2024-06-12T12:14:02.069Z","modified":"2026-02-11T13:13:04.980Z","1.0.0":"2024-06-12T12:14:02.386Z","1.1.0":"2025-04-11T11:05:47.397Z","2.0.0":"2025-09-26T09:07:51.009Z"},"description":"A react native components used to broadcast livestream","maintainers":[{"email":"developers@amity.co","name":"ekoapp"},{"email":"touchaponk@gmail.com","name":"touchaponk"},{"email":"pakkawat@amity.co","name":"pakkawat"},{"email":"platform@social.plus","name":"platform-butler"},{"email":"phongnarin@social.plus","name":"phongnarin-anan"},{"email":"pasut@social.plus","name":"pasut"}],"readme":"# Amity Livesteram Broadcaster\n\nA react native components used to broadcast livestream\n\n## Getting start\n\nTo use the broadcaster, install these peer dependencies including typescript SDK for react native app.\n\n```sh\nyarn add \\\n@amityco/ts-sdk-react-native \\\n@api.video/react-native-livestream\n```\n\n## Additional Configuration\n\n### IOS\n\n1. Install pods\n\n```sh\ncd ios && pod install\n```\n\n2. Add following permissions to `info.plist` file\n\n```xml\n<key>NSCameraUsageDescription</key>\n<string>Your own description of the purpose</string>\n\n<key>NSMicrophoneUsageDescription</key>\n<string>Your own description of the purpose</string>\n```\n\n### Android\n\n1. config kotlinVersion and compileSdkVersion in android/build.gradle, add kotlinVersion above 1.7.0 and compileSdkVersion above 34 in buildscript > ext\n\n![image](https://github.com/AmityCo/Amity-Social-UIKit-React-Native-CLI-OpenSource/assets/33589608/37f5a5a8-2c2c-4354-897f-1dbf77c9d2e9)\n\n2. Add following permissions to `AndroidManifest.xml` file\n\n```xml\n<manifest>\n    <uses-feature android:name=\"android.hardware.camera\" android:required=\"true\" />\n    <uses-feature android:name=\"android.hardware.camera.autofocus\" android:required=\"false\" />\n</manifest>\n```\n\n## Usage\n\n`AmityVideoBroadcaster` component can be imported and configured for the resolution and bitrate. And also accept `onBroadcastStateChange` function that is called when broadcaster state is changed.\n\nThe broadcaster state can be `idle`, `connecting`, `connected` and `disconnected`.\nThe states are provided as `AmityStreamBroadcasterState` enum.\n\nTo manage the broadcasting, please use these following methods.\n\n- startPublish(streamId)\n- stopPublish()\n- switchCamera()\n\n`startPublish` required streamId. So, Amity.Stream object should be create before publish the livestream.\n\n```ts\nimport {AmityVideoBroadcaster} from '@amityco/video-broadcaster-react-native';\nimport {useRef} from 'react';\n\nconst Component = () => {\n  const ref = useRef();\n\n  const startPublish = () => {\n   // Create Amity.Stream to get streamId\n    const { data: newStream } = await StreamRepository.createStream(params);\n    ref?.current.startPublish(newStream.streamId);\n  };\n\n  const stopPublish = () => {\n    ref?.current.stopPublish();\n  };\n\n  const switchCamera = () => {\n   ref?.current.switchCamera();\n  };\n\n  const onBroadcastStateChange = (state: AmityStreamBroadcasterState) => {\n   ...\n  }\n\n  return (\n    <View>\n      <AmityVideoBroadcaster\n        onBroadcastStateChange={onBroadcastStateChange}\n        resolution={{\n          width: 1280,\n          height: 720,\n        }}\n        ref={ref}\n        bitrate={2 * 1024 * 1024}\n      />\n      <YourOtherComponents>\n    </View>\n  );\n};\n\nexport default Components;\n```\n","readmeFilename":"README.md"}