scanFaces in worklet crashes app

[mxmzb]

i'm getting this - any idea how to debug this best (or maybe it's a library bug)?

fresh app, these are my deps:

{
"dependencies": {
    "react": "18.2.0",
    "react-native": "0.69.3",
    "react-native-reanimated": "^2.9.1",
    "react-native-vision-camera": "^2.14.0",
    "vision-camera-face-detector": "^0.1.8",
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "babel-jest": "^28.1.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "concurrently": "^7.3.0",
    "metro-react-native-babel-preset": "^0.72.0",
    "react-test-renderer": "18.2.0",
  }
}

my code:

import React from "react";
import { StyleSheet } from "react-native";
import { Camera, useCameraDevices, useFrameProcessor } from "react-native-vision-camera";
import { runOnJS } from "react-native-reanimated";

import { Ratio } from "@happycam/shared/atomic-components";

import { scanFaces, Face } from "vision-camera-face-detector";

const StreamCapture = React.memo(() => {
  const devices = useCameraDevices();
  const [cameraDevice, setCameraDevice] = React.useState("front");
  const [hasVideoPermission, setHasVideoPermissions] = React.useState(false);
  const [faces, setFaces] = React.useState<Face[]>();

  React.useEffect(() => {
    const requestCameraPermission = async () => {
      const cameraPermission = await Camera.getCameraPermissionStatus();

      if (cameraPermission !== "authorized") {
        const newCameraPermission = await Camera.requestCameraPermission();

        if (newCameraPermission === "authorized") {
          setHasVideoPermissions(true);
        }
      } else {
        setHasVideoPermissions(true);
      }
    };

    requestCameraPermission();
  }, []);

  const frameProcessor = useFrameProcessor(frame => {
    "worklet";

    const scannedFaces = scanFaces(frame);
    runOnJS(setFaces)(scannedFaces);
  }, []);

  const device = cameraDevice === "front" ? devices.front : devices.back;

  if (device !== null && hasVideoPermission) {
    return (
      <Ratio ratio={4 / 3}>
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          video={true}
          audio={false}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
        />
      </Ratio>
    );
  }

  // TODO show message that there is no device
  return null;
});

export default StreamCapture;

[Rikirhenaldi]

@mxmzb Have you found a way to solve this problem ? I'm having the same issue.

[eloisasmorais]

I was able to fix this by adding the following lines to babel.config.js

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

restart metro-bundler, if it doesn't work run yarn start --reset-cache

[mxmzb]

@Rikirhenaldi no, sorry

I was able to fix this by adding the following lines to babel.config.js

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

restart metro-bundler, if it doesn't work run yarn start --reset-cache

doesn't work for me

[adamdavareln]

@Rikirhenaldi no, sorry

I was able to fix this by adding the following lines to babel.config.js

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

restart metro-bundler, if it doesn't work run yarn start --reset-cache

doesn't work for me

same for me

[mat2718]

can you try adding setFaces to the array in your frame processor and see if that works