🐛 Frame Processors - "runAsync" doesn't work in RN 0.76

[nuagoz]

What's happening?

Hey, I just noticed that the function runAsync of Frame Processors doesn't work if the dependencies are updated to version 0.76 of React Native.

If I follow the example in the documentation, the part with the log console.log("I'm running synchronously at 60 FPS!") displays correctly and works, but the part inside runAsync doesn't work and throws an error.

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log("I'm running synchronously at 60 FPS!")

  runAsync(frame, () => {
    'worklet'
    console.log("I'm running asynchronously, possibly at a lower FPS rate!")
  })
}, [])

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 can't reproduce the error in the example app because it's not using version 0.76 of React Native

"react-native-vision-camera": "4.6.3"
"react-native-worklets-core": "1.5.0"

Reproduceable Code

import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera, runAsync, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';

const CameraComponent = () => {
  const { hasPermission, requestPermission } = useCameraPermission();
  const [isActive, setIsActive] = useState(false);
  const device = useCameraDevice('back');

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

  const checkPermission = async () => {
    if (!hasPermission) {
      await requestPermission();
    }
    setIsActive(true);
  };

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'

    runAsync(frame, () => {
      'worklet'
      console.log("I'm running asynchronously, possibly at a lower FPS rate!")
    })
  }, [])

  if (!device) {
    return <View style={styles.container}></View>;
  }

  if (!hasPermission) {
    return <View style={styles.container}></View>;
  }

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={isActive}
        frameProcessor={frameProcessor}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default CameraComponent;

Relevant log output

2024-12-04 03:01:42.840 13151-13205 ReactNativeJS E  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
2024-12-04 03:01:42.863 13151-13205 ReactNativeJS E  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
2024-12-04 03:01:42.898 13151-13296 ReactNativeJS E  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

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "limited",
  "maxZoom": 10,
  "minZoom": 1,
  "maxExposure": 9,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "telephoto-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 0,
  "minExposure": -9,
  "name": "0 (BACK) androidx.camera.camera2",
  "hasFlash": false,
  "hasTorch": false,
  "position": "back",
  "id": "0"
}

Device

Pixel 6 Pro API 33 (Android 13.0)

VisionCamera Version

4.6.3

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• I am using Expo
• I have enabled Frame Processors (react-native-worklets-core)
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[maintenance-hans]

Guten Tag, Hans here! 🍻

Thanks for your detailed report. It looks like you're experiencing an issue with runAsync in React Native 0.76. I see you've included relevant logs, aber can you please test it in the VisionCamera example app as well? It's important to ensure this is not an environment-specific issue. If you don't try that, it might be difficult to get this issue resolved.

Feel free to update the issue with your findings from the example app, and we'll take it from there. Also, if you find this project helpful, consider supporting it by sponsoring mrousavy!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[nuagoz]

Hi @mrousavy, if you have time to take a look, that would be awesome.
Thanks

[CarterSnich]

@nuagoz have you fixed this issue? can you tell how?

[ronickg]

Same as #3255
Can be fixed as explained here: margelo/react-native-worklets-core#136

[FieldMarshallVague]

@ronickg Did this work for you? I've read through many issues on this and the (somewhat) related repos (resize and reanimated plugins).

I'm still getting this error with 0.76.7.

[ronickg]

@FieldMarshallVague

I did get it to work with "react-native": "0.76.6", haven't tried 0.76.7, but think it should still work

[ronickg]

Maybe this helps:

"react-native-reanimated": "~3.16.1",
"react-native-worklets-core": "1.5.0",
"react-native-vision-camera": "^4.6.3",
"vision-camera-resize-plugin": "^3.2.0",

bable.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      "@babel/plugin-transform-async-generator-functions",
      ["react-native-worklets-core/plugin"],
      ["react-native-reanimated/plugin", { processNestedWorklets: true }],
    ],
  };
};

[FieldMarshallVague]

@ronickg Doh! I t looks like I had a bug in my simplified test code. Hasty copy/paste and tired eyes from looking at this all day.

Thanks, that's useful to confirm, that's almost exactly my setup. My app is now crashing out when it tries to run the async method (inner), rather than complaining, but that's progress! :)

[ronickg]

@FieldMarshallVague Thats great to hear. I also tried using async but just had more issues as well. So i just opted to using runAtTargetFps() for the time being.

[Lipdk]

@ronickg thx bro, it solved the issue for me.