mrousavy
commented
7 months ago If you remove runAsync it works as expected?
Closed luicfrr closed 5 months ago
mrousavy
commented
7 months ago If you remove runAsync it works as expected?
mrousavy
commented
7 months ago If yes, then this is related to https://github.com/mrousavy/react-native-vision-camera/issues/2579 and maybe also even https://github.com/mrousavy/react-native-vision-camera/issues/2153.
luicfrr
commented
7 months ago 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.
bglgwyng
commented
7 months ago 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.
mrousavy
commented
7 months ago @nonam4 can you test if @bglgwyng's PR (#2591) fixes the issue for you?
luicfrr
commented
7 months ago @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.
chrfalch
commented
7 months ago 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?
luicfrr
commented
7 months ago @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>
)
jonjamz
commented
7 months ago @nonam4 What versions of Reanimated / React Native SVG are you using?
luicfrr
commented
7 months ago @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"
}
}
@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.
robertyulisman
commented
7 months ago @mrousavy I made a little progress, at least my app is not crashing anymore... I created a custom
runAsyncmethod inside my function but usinguseWorkletanduseSharedValuehookd from worklets core. With this change my app stop crashing and my customrunAsyncis called everytime.This is my code at this moment.
Maybe there's a problem with
Worklets.createContextmethod 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],
);@robertyulisman I had the same problem. If you are using reanimated in your project, you need to add processNestedWorklets: true in your babel configuration.
robertyulisman
commented
7 months ago @bglgwyng still not working, my app get crashed
luicfrr
commented
7 months ago chrfalch
commented
7 months ago 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?
luicfrr
commented
7 months ago @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
mrousavy
commented
7 months ago 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 :)
mrousavy
commented
5 months ago I think this has been fixed in react-native-worklets-core 1.x.x.! 🎉
What's happening?
Trying to open the app on production mode
react-native run-android --variant=releasemakes app crash when opening camera view.I'm using example app, didn't add any new library but I removed some props in
CameraPage.tsxI don't need (capture photo button, etc...).IMPORTANT: This crash only happens if the app is fresh installed on the device or if you clean app data and open app. If you keep reopening app after some crashes (in my case 2 crashes) there's no crash anymore BUT
runAsyncis NOT called. Everything inside frame processor is called exceptrunAsync.EDIT:
Fatal signalcrash changes, they are not always the same, I tryed reinstalling the app right now and crash code error wasFatal signal 11 (SIGSEGV), code 2, fault addr 0xc87f3f60 in tid 27643 (ionCamera.video)Some notes in my real app: If I use any
reanimatedfunctions the app don't crash but nothing insiderunAsyncare called. If I try to add anysvgfromreact-native-svgin my app it crash with a similar error in this issue. Doesn't matter if is reaniamted creating a svg or if I just import and add it to screen, both ways crash with a similar error:Reproduceable Code
Relevant log output
Camera Device
Device
Galaxy J5 Android 8
VisionCamera Version
3.9.0
Can you reproduce this issue in the VisionCamera Example app?
Yes, I can reproduce the same issue in the Example app here
Additional information