Go to file
Marc Rousavy 02a0371c65
feat: V3 (#1466)
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
2023-09-01 20:22:51 +02:00
.github fix: Use pod install instead of bundle exec pod ... 2023-09-01 20:21:40 +02:00
docs docs: Add docs for Pause/Resume recording 2023-09-01 20:03:29 +02:00
package Update .gitignore 2023-09-01 20:19:02 +02:00
.gitignore Update .gitignore 2023-09-01 18:29:15 +02:00
CODE_OF_CONDUCT.md chore: Move everything into package/ (#1745) 2023-09-01 18:15:28 +02:00
CONTRIBUTING.md docs: Update CONTRIBUTING 2023-09-01 18:32:23 +02:00
LICENSE chore: Move to /mrousavy/ (#224) 2021-06-21 22:42:46 +02:00
README.md chore: Move everything into package/ (#1745) 2023-09-01 18:15:28 +02:00

VisionCamera

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

This library helped you? Consider sponsoring!

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