Frame Processor threw an error: Can't find variable: __scanFaces

[allangaldinosilva]

I'm facing an error when I try to run the app on Android

error Frame Processor threw an error: Can't find variable: __scanFaces

My environment:

    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-device-info": "^8.0.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-reanimated": "2.9.1",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "^3.17.0",
    "react-native-svg": "^12.1.0",
    "react-native-vision-camera": "^2.14.1",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2",
    "react-router-dom": "^6.3.0",
    "vision-camera-face-detector": "^0.1.8"

babel.config.js

Metro

I'm using the FrameProcessor

const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const scannedFaces = scanFaces(frame);
    if (scannedFaces.length) {
      runOnJS(setFace)(scannedFaces.at(0));
    }
  }, []);

[DeepikaSharma5]

Can you clear the cache and try again. It worked for me.

npx react-native start --reset-cache
or
yarn start --reset-cache
or
npm start --reset-cache

[ducgiang2701]

I can't fix this error. I need you help me !!!!

[allangaldinosilva]

@DeepikaSharma5 your suggestion doesn't work to me :(

[DeepikaSharma5]

@allangaldinosilva Why are you using as runOnJS(setValues)(scannedFaces.at(0));
Can you try passing just as runOnJS(setValues)(scannedFaces);

Also have you added import Reanimated from 'react-native-reanimated'; in your file where you are using FrameProcessor?

If that doesn't work can you try this too,
In your build.gradel (in android/app) check if the enableHermes is false. If not change it to false and try. You need to rebuild the project completely. (Better if you do ./gradlew clean to android folder before build)

[HorbachAndrii]

The same issue for IOS. On android works fine.

"react": "17.0.2",
"react-native": "0.68.3",
"react-native-reanimated": "2.10.0",
"react-native-vision-camera": "2.14.1",
"vision-camera-face-detector": "0.1.8"
....

Xcode 14.0
IOS 16
Iphone 8

---

Also, the same issue has an example from this project

---

It seems that problem in the main react-native-vision-camera library

@rodgomesc Do you have any idea?

[kheinhtoo]

I am facing this issue too, in android. Is there a fix yet?

[YuriOlepir]

Faced today with this error after updating ios to 16 and Xcode to 14

[mohanagy]

For me, I had two bable config files, and I was updating the incorrect file.
Updating the correct bable file and re-run the metro was enough

[HorbachAndrii]

For me, I had two bable config files, and I was updating the incorrect file. Updating the correct bable file and re-run the metro was enough

Could you send to us the correct bable file?

[mohanagy]

For me, I had two bable config files, and I was updating the incorrect file. Updating the correct bable file and re-run the metro was enough

Could you send to us the correct bable file?
the file is .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": [
          { "@shared-components": "./src/shared/components" },
          { "@shared-constants": "./src/shared/constants" },
          { "@font-size": "./src/shared/theme/font-size" },
          { "@api": "./src/services/api/index" },
          { "@fonts": "./src/shared/theme/fonts" },
          { "@colors": "./src/shared/theme/colors" },
          { "@theme": "./src/shared/theme" },
          { "@models": "./src/services/models" },
          { "@services": "./src/services" },
          { "@screens": "./src/screens" },
          { "@utils": "./src/utils/" },
          { "@assets": "./src/assets/" },
          { "@event-emitter": "./src/services/event-emitter" },
          { "@local-storage": "./src/services/local-storage" }
        ],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ],
    [
      "react-native-reanimated/plugin",
      {
        "globals": ["__scanFaces"]
      }
    ]
  ]
}

[Talkwondo]

had the same issue on IOS... I saw the exception in the xcode and saw that the babel config was wrong.
this solved the problem to me:

"plugins": [
  ["react-native-reanimated/plugin", {
  "globals": [
    "__scanFaces"
  ]
}]
]

[Dhruv2110]

have you imported ...'import 'react-native-reanimated';...on top of your index file??

[HorbachAndrii]

Also, the same issue has an example from this project

Also, the same issue has an example from this project. So I don't think that problem with imports...

[ducdh-dev]

Bug with ios 16 and xcode 14.
This solved the problem:
mrousavy/react-native-vision-camera#1244 (comment)

[HorbachAndrii]

Bug with ios 16 and xcode 14. This solved the problem: mrousavy/react-native-vision-camera#1244 (comment)

Thanks, it helps

[allangaldinosilva]

Bug with ios 16 and xcode 14. This solved the problem: mrousavy/react-native-vision-camera#1244 (comment)

It solves the error for while 👍 thanks

[iskezil]

does not work in release build

[nhatnguyen95]

I resolved the issue by add this line declare function __scanCodes(): void; to global.d.ts then start with cache reset

[iskezil]

does not work in release build

I solved the problem with the release build, added to my root file index.tsx - import 'react-native-reanimated'; on 1 line

[nadir-ib]

Instead of "__scanFaces", you can use "scanFace" from 'vision-camera-face-detector'.
import { scanFaces, Face } from 'vision-camera-face-detector';
After you import "scanFaces" and Face from the above package in Typescript, you can use the bellow code to get the detected face.

const face = scanFaces(frame)[0] as Face

Also, you can use the bellow repository for more detail and example.

https://github.com/rodgomesc/vision-camera-face-detector

[xts-bit]

nothing works in my case can anyone can please help me to do that?

[geek-ibrar]

I fixed my issue after upgrading react-native-vision-camera to ^2.15.4

[jessiemblack]

I was able to get it working.

"react-native-vision-camera": "^2.16.1",
"react-native-worklets-core": "^0.2.4",
"vision-camera-face-detector": "^0.1.8"

Import the following:
import {scanFaces} from 'vision-camera-face-detector';

Inside your component:

const [faces, setFaces] = useState(null);

  const frameProcessor = useFrameProcessor(frame => {
    'worklet';
    const scannedFaces = scanFaces(frame);
    runOnJS(setFaces)(scannedFaces);
  }, []);

Hope this helps