Skip to content

Commit

Permalink
feat: ✨ V3 ✨ (#1466)
Browse files Browse the repository at this point in the history
See mrousavy/react-native-vision-camera#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 [email protected]
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](mrousavy/react-native-vision-camera#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
mrousavy/react-native-vision-camera#1376
- fixes
mrousavy/react-native-vision-camera#281
- resolves
mrousavy/react-native-vision-camera#211
- resolves
mrousavy/react-native-vision-camera#130
- resolves
mrousavy/react-native-vision-camera#117
- fixes mrousavy/react-native-vision-camera#76
- resolves
mrousavy/react-native-vision-camera#75
- resolves
mrousavy/react-native-vision-camera#562
- resolves
mrousavy/react-native-vision-camera#565
- fixes
mrousavy/react-native-vision-camera#570
- fixes
mrousavy/react-native-vision-camera#287
- resolves
mrousavy/react-native-vision-camera#311
- fixes
mrousavy/react-native-vision-camera#315
- resolves
mrousavy/react-native-vision-camera#323
- fixes
mrousavy/react-native-vision-camera#340
- fixes
mrousavy/react-native-vision-camera#354
- resolves
mrousavy/react-native-vision-camera#420
- fixes
mrousavy/react-native-vision-camera#434
- fixes
mrousavy/react-native-vision-camera#452
- fixes
mrousavy/react-native-vision-camera#496
- fixes
mrousavy/react-native-vision-camera#497
- resolves
mrousavy/react-native-vision-camera#499
- fixes
mrousavy/react-native-vision-camera#516
- fixes
mrousavy/react-native-vision-camera#527
- fixes
mrousavy/react-native-vision-camera#542
- fixes
mrousavy/react-native-vision-camera#548
- fixes
mrousavy/react-native-vision-camera#561
- fixes
mrousavy/react-native-vision-camera#740
- fixes
mrousavy/react-native-vision-camera#770


...and then pretty much every Android issue lol

- fixes
mrousavy/react-native-vision-camera#1675
(**maybe**, please test @PrernaBudhraja)
- fixes
mrousavy/react-native-vision-camera#1671

.. maybe also (not tested):

- fixes
mrousavy/react-native-vision-camera#1698
- fixes
mrousavy/react-native-vision-camera#1687
- fixes
mrousavy/react-native-vision-camera#1685
- fixes
mrousavy/react-native-vision-camera#1681
- fixes
mrousavy/react-native-vision-camera#1650
- fixes
mrousavy/react-native-vision-camera#1646
- fixes
mrousavy/react-native-vision-camera#1635
- fixes
mrousavy/react-native-vision-camera#1631
- fixes
mrousavy/react-native-vision-camera#1621
- fixes
mrousavy/react-native-vision-camera#1615
- fixes
mrousavy/react-native-vision-camera#1612
- fixes
mrousavy/react-native-vision-camera#1605
- fixes
mrousavy/react-native-vision-camera#1599
- fixes
mrousavy/react-native-vision-camera#1585
- fixes
mrousavy/react-native-vision-camera#1581
- fixes
mrousavy/react-native-vision-camera#1569
- fixes
mrousavy/react-native-vision-camera#1568
- fixes
mrousavy/react-native-vision-camera#1565
- fixes
mrousavy/react-native-vision-camera#1561
- fixes
mrousavy/react-native-vision-camera#1558
- fixes
mrousavy/react-native-vision-camera#1554
- fixes
mrousavy/react-native-vision-camera#1551
- fixes
mrousavy/react-native-vision-camera#1547
- fixes
mrousavy/react-native-vision-camera#1543
- fixes
mrousavy/react-native-vision-camera#1538
- fixes
mrousavy/react-native-vision-camera#1536
- fixes
mrousavy/react-native-vision-camera#1534
- fixes
mrousavy/react-native-vision-camera#1528
- fixes
mrousavy/react-native-vision-camera#1520
- fixes
mrousavy/react-native-vision-camera#1498
- fixes
mrousavy/react-native-vision-camera#1489
- fixes
mrousavy/react-native-vision-camera#1477
- fixes
mrousavy/react-native-vision-camera#1474
- fixes
mrousavy/react-native-vision-camera#1463
- fixes
mrousavy/react-native-vision-camera#1462
- fixes
mrousavy/react-native-vision-camera#1449
- fixes
mrousavy/react-native-vision-camera#1443
- fixes
mrousavy/react-native-vision-camera#1437
- fixes
mrousavy/react-native-vision-camera#1431
- fixes
mrousavy/react-native-vision-camera#1429
- fixes
mrousavy/react-native-vision-camera#1427
- fixes
mrousavy/react-native-vision-camera#1423
- fixes
mrousavy/react-native-vision-camera#1416
- fixes
mrousavy/react-native-vision-camera#1407
- fixes
mrousavy/react-native-vision-camera#1403
- fixes
mrousavy/react-native-vision-camera#1402
- fixes
mrousavy/react-native-vision-camera#1398
- fixes
mrousavy/react-native-vision-camera#1396
- fixes
mrousavy/react-native-vision-camera#1395
- fixes
mrousavy/react-native-vision-camera#1379
- fixes
mrousavy/react-native-vision-camera#1377
- fixes
mrousavy/react-native-vision-camera#1374
- fixes
mrousavy/react-native-vision-camera#1373
- fixes
mrousavy/react-native-vision-camera#1365
- fixes
mrousavy/react-native-vision-camera#1356
- fixes
mrousavy/react-native-vision-camera#1353
- fixes
mrousavy/react-native-vision-camera#1352
- fixes
mrousavy/react-native-vision-camera#1351
- fixes
mrousavy/react-native-vision-camera#1343
- fixes
mrousavy/react-native-vision-camera#1340
- fixes
mrousavy/react-native-vision-camera#1334
- fixes
mrousavy/react-native-vision-camera#1330
- fixes
mrousavy/react-native-vision-camera#1322
- fixes
mrousavy/react-native-vision-camera#1296
- fixes
mrousavy/react-native-vision-camera#1283
- fixes
mrousavy/react-native-vision-camera#1260
- fixes
mrousavy/react-native-vision-camera#1253
- fixes
mrousavy/react-native-vision-camera#1251
- fixes
mrousavy/react-native-vision-camera#1245
- fixes
mrousavy/react-native-vision-camera#1238
- fixes
mrousavy/react-native-vision-camera#1227
- fixes
mrousavy/react-native-vision-camera#1226
- fixes
mrousavy/react-native-vision-camera#1225
- fixes
mrousavy/react-native-vision-camera#1222
- fixes
mrousavy/react-native-vision-camera#1211
- fixes
mrousavy/react-native-vision-camera#1208
- fixes
mrousavy/react-native-vision-camera#1193
- fixes
mrousavy/react-native-vision-camera#1191
- fixes
mrousavy/react-native-vision-camera#1184
- fixes
mrousavy/react-native-vision-camera#1164
- fixes
mrousavy/react-native-vision-camera#1143
- fixes
mrousavy/react-native-vision-camera#1128
- fixes
mrousavy/react-native-vision-camera#1122
- fixes
mrousavy/react-native-vision-camera#1120
- fixes
mrousavy/react-native-vision-camera#1110
- fixes
mrousavy/react-native-vision-camera#1097
- fixes
mrousavy/react-native-vision-camera#1081
- fixes
mrousavy/react-native-vision-camera#1080
- fixes
mrousavy/react-native-vision-camera#1064
- fixes
mrousavy/react-native-vision-camera#1053
- fixes
mrousavy/react-native-vision-camera#1047
- fixes
mrousavy/react-native-vision-camera#1044
- fixes
mrousavy/react-native-vision-camera#1032
- fixes
mrousavy/react-native-vision-camera#1026
- fixes
mrousavy/react-native-vision-camera#1023
- fixes
mrousavy/react-native-vision-camera#1015
- fixes
mrousavy/react-native-vision-camera#1012
- fixes
mrousavy/react-native-vision-camera#997
- fixes
mrousavy/react-native-vision-camera#960
- fixes
mrousavy/react-native-vision-camera#959
- fixes
mrousavy/react-native-vision-camera#954
- fixes
mrousavy/react-native-vision-camera#946
- fixes
mrousavy/react-native-vision-camera#945
- fixes
mrousavy/react-native-vision-camera#922
- fixes
mrousavy/react-native-vision-camera#908
- fixes
mrousavy/react-native-vision-camera#907
- fixes
mrousavy/react-native-vision-camera#868
- fixes
mrousavy/react-native-vision-camera#855
- fixes
mrousavy/react-native-vision-camera#834
- fixes
mrousavy/react-native-vision-camera#793
- fixes
mrousavy/react-native-vision-camera#779
- fixes
mrousavy/react-native-vision-camera#746
- fixes
mrousavy/react-native-vision-camera#740
- fixes
mrousavy/react-native-vision-camera#727
- fixes
mrousavy/react-native-vision-camera#671
- fixes
mrousavy/react-native-vision-camera#613
- fixes
mrousavy/react-native-vision-camera#595
- fixes
mrousavy/react-native-vision-camera#588
- fixes
mrousavy/react-native-vision-camera#570
- fixes
mrousavy/react-native-vision-camera#569
- fixes
mrousavy/react-native-vision-camera#542
- fixes
mrousavy/react-native-vision-camera#516
- fixes
mrousavy/react-native-vision-camera#515
- fixes
mrousavy/react-native-vision-camera#434
- fixes
mrousavy/react-native-vision-camera#354
- fixes
mrousavy/react-native-vision-camera#323
- fixes
mrousavy/react-native-vision-camera#315
- fixes
mrousavy/react-native-vision-camera#281
- fixes
mrousavy/react-native-vision-camera#211
- fixes mrousavy/react-native-vision-camera#76
  • Loading branch information
rr-robert committed Sep 1, 2023
2 parents 230817c + 95cd6d5 commit ce25b63
Show file tree
Hide file tree
Showing 466 changed files with 29,070 additions and 22,651 deletions.
27 changes: 16 additions & 11 deletions .github/ISSUE_TEMPLATE/BUG_REPORT.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,26 @@ labels: [🐛 bug]
body:
- type: textarea
attributes:
label: What were you trying to do?
description: Explain what you are trying to do.
placeholder: I wanted to take a picture.
label: What's happening?
description: Explain what you are trying to do and what happened instead. Be as precise as possible, I can't help you if I don't understand your issue.
placeholder: I wanted to take a picture, but the method failed with this error "[capture/photo-not-enabled] Failed to take photo, photo is not enabled!"
validations:
required: true
- type: textarea
attributes:
label: Reproduceable Code
description: Share a small reproduceable code snippet here (or the entire file if necessary). This will be automatically formatted into code, so no need for backticks.
render: tsx
- type: textarea
attributes:
label: What happened instead?
description: Explain what happened instead of the desired outcome. Did something crash?
placeholder: The app crashes with an `InvalidPhotoCodec` error.
validations:
required: true
- type: textarea
attributes:
label: Relevant log output
description: Please copy and paste any relevant log output (Xcode Logs/Android Studio Logcat). This will be automatically formatted into code, so no need for backticks.
render: shell
- type: textarea
attributes:
label: Camera Device
description: Please paste the JSON Camera `device` that was used here. (`console.log(JSON.stringify(device, null, 2))`) This will be automatically formatted into code, so no need for backticks.
render: shell
- type: input
attributes:
label: Device
Expand All @@ -38,15 +36,22 @@ body:
attributes:
label: VisionCamera Version
description: Which version of react-native-vision-camera are you using?
placeholder: ex. 2.0.1-beta.1
placeholder: ex. 3.1.6
validations:
required: true
- type: checkboxes
attributes:
label: Can you reproduce this issue in the VisionCamera Example app?
description: Run the example app (`package/example/`) and see if the issue is reproduceable here.
options:
- label: I can reproduce the issue in the VisionCamera Example app.
- type: checkboxes
attributes:
label: Additional information
description: Please check all the boxes that apply
options:
- label: I am using Expo
- label: I have enabled Frame Processors (react-native-worklets-core)
- label: I have read the [Troubleshooting Guide](https://react-native-vision-camera.com/docs/guides/troubleshooting)
required: true
- label: I agree to follow this project's [Code of Conduct](https://github.com/mrousavy/react-native-vision-camera/blob/main/CODE_OF_CONDUCT.md)
Expand Down
64 changes: 64 additions & 0 deletions .github/ISSUE_TEMPLATE/BUILD_ERROR.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
name: 🔧 Build Error
description: File a build error bug report
title: "🔧 "
labels: [🔧 build error]
body:
- type: textarea
attributes:
label: How were you trying to build the app?
description: Explain how you tried to build the app, through Xcode, `yarn ios`, a CI, or other. Be as precise as possible, I can't help you if I don't understand your issue.
placeholder: I tried to build my app with react-native-vision-camera using the `yarn ios` command, and it failed.
validations:
required: true
- type: textarea
attributes:
label: Full build logs
description: Share the full build logs that appear in the console. Make sure you don't just paste the last few lines here, but rather everything from start to end.
render: tsx
- type: textarea
attributes:
label: Project dependencies
description: Share all of your project's dependencies including their versions from `package.json`. This is useful if there are any other conflicting libraries.
render: tsx
validations:
required: true
- type: dropdown
attributes:
label: Target platforms
description: Select the platforms where the build error occurs.
multiple: true
options:
- iOS
- Android
validations:
required: true
- type: dropdown
attributes:
label: Operating system
description: Select your operating system that you are trying to build on.
multiple: true
options:
- MacOS
- Windows
- Linux
validations:
required: true
- type: checkboxes
attributes:
label: Can you build the VisionCamera Example app?
description: Try to build the example app (`package/example/`) and see if the issue is reproduceable here.
options:
- label: I can build the VisionCamera Example app.
- type: checkboxes
attributes:
label: Additional information
description: Please check all the boxes that apply
options:
- label: I am using Expo
- label: I have enabled Frame Processors (react-native-worklets-core)
- label: I have read the [Troubleshooting Guide](https://react-native-vision-camera.com/docs/guides/troubleshooting)
required: true
- label: I agree to follow this project's [Code of Conduct](https://github.com/mrousavy/react-native-vision-camera/blob/main/CODE_OF_CONDUCT.md)
required: true
- label: I searched for [similar issues in this repository](https://github.com/mrousavy/react-native-vision-camera/issues) and found none.
required: true
57 changes: 52 additions & 5 deletions .github/workflows/build-android.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,34 @@ on:
- main
paths:
- '.github/workflows/build-android.yml'
- 'cpp/**'
- 'android/**'
- 'example/android/**'
- 'yarn.lock'
- 'example/yarn.lock'
pull_request:
paths:
- '.github/workflows/build-android.yml'
- 'cpp/**'
- 'android/**'
- 'example/android/**'
- 'yarn.lock'
- 'example/yarn.lock'

jobs:
build_example:
build:
name: Build Android Example App
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./package
steps:
- uses: actions/checkout@v2

- name: Setup JDK 1.8
- name: Setup JDK 11
uses: actions/setup-java@v1
with:
java-version: 1.8
java-version: 11

- name: Get yarn cache directory path
id: yarn-cache-dir-path
Expand All @@ -55,7 +60,49 @@ jobs:
key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
restore-keys: |
${{ runner.os }}-gradle-
- name: Run Gradle Build for android/
run: cd android && ./gradlew assembleDebug --build-cache && cd ..
- name: Run Gradle Build for example/android/
run: cd example/android && ./gradlew assembleDebug --build-cache && cd ../..

build-no-frame-processors:
name: Build Android Example App (without Frame Processors)
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./package
steps:
- uses: actions/checkout@v2

- name: Setup JDK 11
uses: actions/setup-java@v1
with:
java-version: 11

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Restore node_modules from cache
uses: actions/cache@v2
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install node_modules
run: yarn install --frozen-lockfile
- name: Install node_modules for example/
run: yarn install --frozen-lockfile --cwd example
- name: Remove react-native-worklets-core
run: yarn remove react-native-worklets-core --cwd example

- name: Restore Gradle cache
uses: actions/cache@v2
with:
path: |
~/.gradle/caches
~/.gradle/wrapper
key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
restore-keys: |
${{ runner.os }}-gradle-
- name: Run Gradle Build for example/android/
run: cd example/android && ./gradlew assembleDebug --build-cache && cd ../..
70 changes: 66 additions & 4 deletions .github/workflows/build-ios.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ on:
- main
paths:
- '.github/workflows/build-ios.yml'
- 'cpp/**'
- 'ios/**'
- '*.podspec'
- 'example/ios/**'
pull_request:
paths:
- '.github/workflows/build-ios.yml'
- 'cpp/**'
- 'ios/**'
- '*.podspec'
- 'example/ios/**'
Expand All @@ -22,7 +24,7 @@ jobs:
runs-on: macOS-latest
defaults:
run:
working-directory: example/ios
working-directory: package/example/ios
steps:
- uses: actions/checkout@v2

Expand All @@ -47,9 +49,8 @@ jobs:
- name: Setup Ruby (bundle)
uses: ruby/setup-ruby@v1
with:
ruby-version: 2.6
ruby-version: 2.6.10
bundler-cache: true
working-directory: example/ios

- name: Restore Pods cache
uses: actions/cache@v2
Expand All @@ -62,7 +63,68 @@ jobs:
restore-keys: |
${{ runner.os }}-pods-
- name: Install Pods
run: bundle exec pod check || bundle exec pod install
run: pod install
- name: Install xcpretty
run: gem install xcpretty
- name: Build App
run: "set -o pipefail && xcodebuild \
CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ \
-derivedDataPath build -UseModernBuildSystem=YES \
-workspace VisionCameraExample.xcworkspace \
-scheme VisionCameraExample \
-sdk iphonesimulator \
-configuration Debug \
-destination 'platform=iOS Simulator,name=iPhone 11 Pro' \
build \
CODE_SIGNING_ALLOWED=NO | xcpretty"

build-no-frame-processors:
name: Build iOS Example App without Frame Processors
runs-on: macOS-latest
defaults:
run:
working-directory: package/example/ios
steps:
- uses: actions/checkout@v2

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Restore node_modules from cache
uses: actions/cache@v2
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install node_modules for example/
run: yarn install --frozen-lockfile --cwd ..
- name: Remove react-native-worklets-core
run: yarn remove react-native-worklets-core --cwd ..

- name: Restore buildcache
uses: mikehardy/buildcache-action@v1
continue-on-error: true

- name: Setup Ruby (bundle)
uses: ruby/setup-ruby@v1
with:
ruby-version: 2.6.10
bundler-cache: true

- name: Restore Pods cache
uses: actions/cache@v2
with:
path: |
example/ios/Pods
~/Library/Caches/CocoaPods
~/.cocoapods
key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
restore-keys: |
${{ runner.os }}-pods-
- name: Install Pods
run: pod install
- name: Install xcpretty
run: gem install xcpretty
- name: Build App
Expand Down
19 changes: 0 additions & 19 deletions .github/workflows/notice-yarn-changes.yml

This file was deleted.

6 changes: 3 additions & 3 deletions .github/workflows/validate-android.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ jobs:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./android
working-directory: ./package/android
steps:
- uses: actions/checkout@v2
- name: Setup JDK 1.8
- name: Setup JDK 11
uses: actions/setup-java@v1
with:
java-version: 1.8
java-version: 11

- name: Get yarn cache directory path
id: yarn-cache-dir-path
Expand Down
Loading

0 comments on commit ce25b63

Please sign in to comment.