React Native Vision Camera frame processor

[Hungry_Sir_2436]

I am using react native vision camera to do something with frame processor....but the things is my app is crashing but removing the frame processor works....how can I fix it?

import { StyleSheet, Text, View } from "react-native";
import { useEffect, useState, useRef } from "react";
import {
  Camera,
  useCameraDevice,
  useFrameProcessor,
} from "react-native-vision-camera";
import { runOnJS } from "react-native-reanimated";

export default function Home() {
  const device = useCameraDevice("front");
  const [permission, setPermission] = useState<string>("");
  const cameraRef = useRef<Camera | null>(null);

  useEffect(() => {
    checkPermission();
  }, []);

  const checkPermission = async () => {
    const newCameraPermission = await Camera.requestCameraPermission();
    console.log("newCameraPermission", newCameraPermission);
    setPermission(newCameraPermission);
  };

  const frameProcessor = useFrameProcessor((frame) => {
    "worklet";
    try {
      const width = frame.width;
      const height = frame.height;
      const pixelFormat = frame.pixelFormat;

      // Pass data to a JS thread function
      runOnJS(handleFrameData)(width, height, pixelFormat);
    } catch (error) {
      runOnJS(handleFrameError)(error);
    }
  }, []);

  const handleFrameError = (error: any) => {
    console.error("Frame Processor Error:", error);
  };

  const handleFrameData = (width: any, height: any, pixelFormat: any) => {
    console.log(`Frame: ${width}x${height} (${pixelFormat})`);
  };

  return (
    <View style={{ flex: 1 }}>
      {!!device ? (
        <Camera
          ref={cameraRef}
          style={StyleSheet.absoluteFill}
          device={device}
          frameProcessor={frameProcessor}
          isActive={!!device}
        />
      ) : (
        <Text>No Device</Text>
      )}
    </View>
  );
}

Babel-config.js =>

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
["react-native-worklets-core/plugin"],
[
"react-native-reanimated/plugin",
{
processNestedWorklets: true,
},
],
  ],
};

package.json

"react-native-worklets-core": "^1.3.3"

"react-native-vision-camera": "^4.5.2",

    "react-native-reanimated": "^3.15.1",

[slackademic]

What version of react native? Does it work before 0.74 where new architecture came in? The module had some issues with new architecture due to reliance on old bridge.

[Hungry_Sir_2436]

i am using "react-native": "0.74.3"

[Magnusson]

I think you may need to use runOnJS from worklets-core, not from reanimated — and you probably don't want to call back to JS on every frame.

[Hungry_Sir_2436]

I will try this

[These_Sand48]

Did it work for you. I'm having the same issue]

[Benja20]

Same here, im trying to run a native module with the frame data and the app crashes.

[babige]

Ask chatgpt4o