Comments (18)
@robertyulisman I had the same problem. If you are using reanimated in your project, you need to add processNestedWorklets: true
in your babel configuration.
from react-native-vision-camera.
@mrousavy I made a little progress, at least my app is not crashing anymore...
I created a custom runAsync
method inside my function but using useWorklet
and useSharedValue
hookd from worklets core. With this change my app stop crashing and my custom runAsync
is called everytime.
This is my code at this moment.
Maybe there's a problem with Worklets.createContext
method because this is the only method that (I think) is not used in this workaround.
from react-native-vision-camera.
why would you create a reanimated component of the camera? This is AFAIK not something that should be needed
@chrfalch it is - that's for when you want to animate zoom
or exposure
using Reanimated :)
from react-native-vision-camera.
If you remove runAsync
it works as expected?
from react-native-vision-camera.
If yes, then this is related to #2579 and maybe also even #2153.
from react-native-vision-camera.
Yes, if I remove runAsync
there's no crash anymore but I need this runAsync
method to run heavy work without blocking preview frame rate.
But for me this crash only happens on production mode, on dev mode everything works really fine.
from react-native-vision-camera.
If the usage of runAsync
causes this behavior, then it could be the same problem with #2153.
I also observed that runAsync
caused the crash described in #2153 a few times.
from react-native-vision-camera.
@nonam4 can you test if @bglgwyng's PR (#2591) fixes the issue for you?
from react-native-vision-camera.
@mrousavy I tested it and no, #2591 PR doesn't fix the issue. I have cleared the project using clean.sh
script and rebuilt it but still crashing.
In this test I noticed an interestant thing: If camera preview is stretched when I open the app it doesn't crash but runAsync
is not called. If I reopen the app and preview is correct the app will crash on first atempt to call runAsync
event.
from react-native-vision-camera.
Hi, @nonam4 - you say "If I use any reanimated functions the app don't crash but nothing inside runAsync are called." - what does this mean? Could you describe the steps you use to use reanimated functions?
from react-native-vision-camera.
@chrfalch I mean that this code (without any reanimated method) works fine:
const frameProcessor = useFrameProcessor( ( frame ) => {
'worklet'
runAsync( frame, () => {
'worklet'
console.log( 'runAsync call' )
} )
}, [] )
...
return ( <Camera
frameProcessor={ frameProcessor }
/>)
But this (with reanimated methods) doesn't:
const ReanimatedCamera = Reanimated.createAnimatedComponent( Camera )
...
return (<ReanimatedCamera
frameProcessor={ frameProcessor }
/>)
Neither this:
return (<Reanimated.View>
<Camera
frameProcessor={ frameProcessor }
/>
</Reanimated.View>)
If I'm not using reanimated with vision camera (no matter if it's installed on my project) runAsync
is called in production (react-native run-android --variant=release) builds, but if I try to use anything of reanimated in same component as vison camera (even if reaniamted is inside another component that is imported and rendered with camera) sometimes the app crash with issue's error and sometimes there's no crash but runAsync
is simply not called.
Another thing that makes my app crash is adding react-native-svg
together with vision camera, doesn't matter if I use reaniamted or not.. but the real problem is that I need to use both together π
I need to create an animated svg to be rendered above my camera preview and this makes my app crash every time.
import Svg from 'react-native-svg'
...
return (
<Camera
frameProcessor={ frameProcessor }
/>
<Svg>
...
</Svg>
)
from react-native-vision-camera.
@nonam4 What versions of Reanimated / React Native SVG are you using?
from react-native-vision-camera.
@jonjamz In this issue I'm using reanimated version of example app but in my real app I'm using latest version of all dependencies (I always check for dependencies updates if anything is wrong before opening issues). Here's my whole package.json
:
{
"name": "myapp",
"version": "1",
"private": true,
"scripts": {
"lint": "yarn test && eslint --quiet --fix --ext .js,.ts,.tsx,.jsx .",
"test": "tsc",
"prebuild": "npx expo prebuild",
"prebuild:clean": "npx expo prebuild --clean",
"android": "yarn prebuild && npx expo run:android -d",
"android:prod": "yarn prebuild && npx expo run:android -d --variant release",
"ios": "yarn prebuild && npx expo run:ios -d",
"ios:prod": "yarn prebuild && npx expo run:ios -d --configuration Release",
"android:clean": "yarn prebuild:clean && npx expo run:android -d --no-build-cache",
"ios:clean": "yarn prebuild:clean && npx expo run:ios -d --no-build-cache",
"start": "expo start --dev-client"
},
"main": "index.js",
"dependencies": {
"@react-native-community/hooks": "^3.0.0",
"@react-navigation/native": "^6.1.9",
"expo": "~50.0.6",
"expo-application": "~5.8.3",
"expo-build-properties": "~0.11.1",
"expo-constants": "~15.4.5",
"expo-dev-client": "~3.3.8",
"react": "18.2.0",
"react-native": "0.73.4",
"react-native-gesture-handler": "~2.14.1",
"react-native-hole-view": "^3.0.0-alpha4",
"react-native-reanimated": "~3.7.1",
"react-native-safe-area-context": "4.8.2",
"react-native-svg": "^14.1.0",
"react-native-vector-icons": "^10.0.3",
"react-native-vision-camera": "3.9.0-beta.6",
"react-native-vision-camera-face-detector": "^1.2.3",
"react-native-worklets-core": "^0.3.0"
},
"devDependencies": {
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.22.10",
"@babel/runtime": "^7.23.9",
"@react-native/metro-config": "^0.72.9",
"@react-native/typescript-config": "^0.73.0",
"@types/react": "~18.2.48",
"@types/react-native-vector-icons": "^6.4.13",
"@typescript-eslint/eslint-plugin": "^6.19.1",
"@typescript-eslint/parser": "^6.19.1",
"babel-plugin-module-resolver": "^5.0.0",
"eslint": "^8.56.0",
"eslint-config-google": "^0.14.0",
"eslint-config-next": "^14.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-react": "^7.33.2",
"metro-react-native-babel-preset": "^0.77.0",
"typescript": "^5.3.3"
},
"resolutions": {
"@expo/config-plugins": "^7.8.0"
}
}
from react-native-vision-camera.
@mrousavy I made a little progress, at least my app is not crashing anymore... I created a custom
runAsync
method inside my function but usinguseWorklet
anduseSharedValue
hookd from worklets core. With this change my app stop crashing and my customrunAsync
is called everytime.This is my code at this moment.
Maybe there's a problem with
Worklets.createContext
method because this is the only method that (I think) is not used in this workaround.
hay @nonam4 i am using your lib react-native-vision-camera-face-detector, but still get error that say
"Frame Processor Error: Regular javascript function '' cannot be shared. Try decorating the function with the 'worklet' keyword to allow the javascript function to be used as a worklet., js engine: VisionCamera", i am following example from documentation, can you help me, btw its a great lib
this is the code :
const handleDetectionWorklet = Worklets.createRunInJsFn((result: DetectionResult) => {
console.log('detection result', result);
});
const frameProcessor = useFrameProcessor(
(frame) => {
'worklet';
console.log('frame.toString()', frame.toString());
runAsync(frame, () => {
'worklet';
detectFaces(frame, handleDetectionWorklet, {
performanceMode: 'accurate',
landmarkMode: 'all',
contourMode: 'all',
convertFrame: true,
});
});
},
[handleDetectionWorklet],
);
from react-native-vision-camera.
@bglgwyng still not working, my app get crashed
from react-native-vision-camera.
still not working, my app get crashed
Take a look into native logs and see if they are the same as those on this issue... if yes then wellcome to the club π
You can try my workaround in this comment and see if it works for you.
Also, take a look here, maybe you're just missing a cache reset
from react-native-vision-camera.
Sorry for the delay, @nonam4 - but why would you create a reanimated component of the camera? This is AFAIK not something that should be needed (wrap it in a parent animated view if you want to animate it) and might lead to undefined behaviors (as you are seeing):
const ReanimatedCamera = Reanimated.createAnimatedComponent( Camera )
if you donβt use the above and add react-native-svg - does your app still crash?
from react-native-vision-camera.
@chrfalch Iβm following example app and it have a reanimated camera.
About crashes, I found a workaround. I suppose my app was crashing because of Worklets.createContext
method. In my workaround itβs not crashing anymore
from react-native-vision-camera.
Related Issues (20)
- β¨ Is it possible to display the front and back cameras at the same time HOT 2
- π There is a NullPointerException here because CameraCharacteristics cannot get the SENSOR_INFO_PHYSICAL_SIZE value of the camera device HOT 1
- π§ 'react/bridging/CallbackWrapper.h' file not found HOT 5
- πHow to process the image captured for OCR scanning? HOT 2
- π How can I access iOS TrueDepth Camera? HOT 1
- Faccing Error While generating release apk
- Running out of options | Unable to detect QR code similar to the built-in camera app in the phone HOT 11
- π Samsung crashes when using flash HOT 7
- The codeType "codabar" is not supported by the Code Scanner! π HOT 3
- Programmatically deactivate codeScannerπ HOT 1
- π Error while trying to take a photo or use frame processors and using React Native New Renderer Interop Layer HOT 2
- β¨ Migrate to new-arch (react-native 0.74, Fabric/TurboModules/CodeGen/bridgeless) HOT 13
- π Exception in HostObject::get for prop 'CameraDevices'
- external webcam on iPad problemπ
- β¨ frames or not send to the flask server using axios
- π frame processing error frame not send to the flask server through axios HOT 2
- π Adding frameprocessor to camera causes error HOT 6
- π [ANDROID] I suddenly get app crash when I install it in the library HOT 1
- π iPhone 12 Front Camera returning that device does not support focus, when it works fine on the native iOS camera HOT 8
- π App Crashed While camRef.current.takePhoto() in React Native New Architechture HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-vision-camera.