See https://github.com/mrousavy/react-native-vision-camera/issues/1376 ## Breaking Changes * Frame Processors are now **synchronous**. Previously they ran on a separate Thread. If you want to run something on a separate Thread now, use `runAsync` inside a Frame Processor * Frame Processor Plugins are no longer in the global object with the `__` prefix, but rather stored directly in the `FrameProcessorPlugins` object exported by react-native-vision-camera. (e.g. replace `__scanQRCodes(frame)` with `FrameProcessorPlugins.scanQRCodes(frame)`) * `frameProcessorFps` no longer exists. Use `runAtTargetFps` inside a Frame Processor to throttle some calls. * `onFrameProcessorPerformanceSuggestionAvailable` no longer exists. Use the FPS display (`enableFpsGraph={true}`) to see how your Frame Processor performs over time. This is more in-line with how React Native works (Dev Tools / Perf Monitor) * VisionCamera V3 will not work on RN 0.70 or below. You need to use RN 0.71. This is because the build script got way simpler and smaller, making it faster to build and way less error prone. Backwards compatibility is just too complex here. * Reanimated is no longer used as a Worklet Runtime. Instead, VisionCamera now uses [react-native-worklets-core](https://github.com/margelo/react-native-worklets-core). ## Progress You can test the latest V3 release by creating a new RN project with RN 0.71 and installing VisionCamera + RNWorklets: ```sh yarn add react-native-vision-camera@3.0.0-rc.5 yarn add react-native-worklets-core yarn add @shopify/react-native-skia ``` Things to test: * TensorFlow Lite plugin to load any `.tflite` model!! ✨ (see [this PR for more info](https://github.com/mrousavy/react-native-vision-camera/pull/1633), will be a separate library soon) * Drawing onto a Frame using Skia!! 🎉 * Using `frame.toArrayBuffer()` to get the Frame's byte content in JS * New Android build script. This should drastically speed up the build time! 💨 * New Worklet library. This replaces Reanimated Worklets. Should be faster and more stable :) * New synchronous Frame Processors. Should be faster :) * `runAtTargetFps` and `runAsync` in Frame Processors * Using HostObjects or HostFunctions (like models from PyTorch) inside a Frame Processor. This will probably require a few native bindings on PyTorch's end to make the integration work (cc @raedle) Overall V3 is close to completion. I have a few things to do the coming days so not sure how much work I can put into this. **If anyone wants to support the development of v3, I'd appreciate donations / sponsors: https://github.com/sponsors/mrousavy** ❤️ :) ## Related issues features - resolves https://github.com/mrousavy/react-native-vision-camera/issues/1376 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/281 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/211 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/130 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/117 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/76 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/75 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/562 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/565 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/570 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/287 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/311 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/315 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/323 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/340 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/354 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/420 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/434 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/452 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/496 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/497 - resolves https://github.com/mrousavy/react-native-vision-camera/issues/499 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/516 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/527 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/542 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/548 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/561 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/740 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/770 ...and then pretty much every Android issue lol - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1675 (**maybe**, please test @PrernaBudhraja) - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1671 .. maybe also (not tested): - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1698 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1687 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1685 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1681 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1650 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1646 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1635 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1631 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1621 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1615 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1612 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1605 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1599 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1585 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1581 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1569 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1568 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1565 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1561 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1558 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1554 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1551 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1547 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1543 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1538 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1536 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1534 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1528 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1520 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1498 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1489 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1477 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1474 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1463 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1462 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1449 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1443 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1437 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1431 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1429 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1427 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1423 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1416 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1407 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1403 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1402 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1398 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1396 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1395 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1379 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1377 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1374 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1373 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1365 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1356 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1353 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1352 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1351 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1343 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1340 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1334 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1330 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1322 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1296 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1283 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1260 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1253 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1251 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1245 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1238 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1227 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1226 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1225 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1222 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1211 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1208 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1193 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1191 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1184 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1164 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1143 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1128 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1122 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1120 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1110 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1097 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1081 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1080 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1064 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1053 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1047 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1044 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1032 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1026 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1023 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1015 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/1012 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/997 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/960 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/959 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/954 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/946 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/945 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/922 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/908 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/907 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/868 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/855 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/834 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/793 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/779 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/746 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/740 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/727 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/671 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/613 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/595 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/588 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/570 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/569 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/542 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/516 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/515 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/434 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/354 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/323 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/315 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/281 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/211 - fixes https://github.com/mrousavy/react-native-vision-camera/issues/76

Features
VisionCamera is a powerful and fast Camera component for React Native. It features:
- Photo and Video capture
- Customizable devices and multi-cameras ("fish-eye" zoom)
- Customizable resolutions and aspect-ratios (4k/8k images)
- Customizable FPS (30..240 FPS)
- Frame Processors (JS worklets to run QR-Code scanning, facial recognition, AI object detection, realtime video chats, ...)
- Smooth zooming (Reanimated)
- Fast pause and resume
- HDR & Night modes
- Custom C++/GPU accelerated video pipeline (OpenGL)
Install VisionCamera from npm:
yarn add react-native-vision-camera
cd ios && pod install
..and get started by setting up permissions!
Documentation
Example
function App() {
const devices = useCameraDevices('wide-angle-camera')
const device = devices.back
if (device == null) return <LoadingView />
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
)
}
See the example app
Adopting at scale
VisionCamera is provided as is, I work on it in my free time.
If you're integrating VisionCamera in a production app, consider funding this project and contact me to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.
Socials
- 🐦 Follow me on Twitter for updates
- 📝 Check out my blog for examples and experiments
- 💖 Sponsor me on GitHub to support my work
- 🍪 Buy me a Ko-Fi to support my work
Description
Languages
Swift
29.9%
Kotlin
26.7%
TypeScript
17.6%
C++
11.2%
Objective-C++
7%
Other
7.6%