🐛 system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed! #2759

sekhuat · 2024-04-20T05:52:08Z

What's happening?

I tried to use the Frame Processors on both Expo and pure React Native app and both give me the error "system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed!" when the camera is displayed. However the react-native-worklets-core module is already installed and properly configured according to the documentation. Both expo and pure react native app is a blank app created to test the react-native-vision-camera.

When the app launch and the camera is loaded then the app will throw the above mentioned error. This happened on both iOS and Android device.

Reproduceable Code

Expo App Package.json:

{
  "name": "expo cam",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "ts:check": "tsc"
  },
  "dependencies": {
    "expo": "~50.0.14",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-vision-camera": "^3.9.2",
    "react-native-worklets-core": "^1.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "^5.1.3"
  },
  "private": true
}

Pure React Native Package.json:

{
  "name": "rncam",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.7",
    "react-native-vision-camera": "^3.9.2",
    "react-native-worklets-core": "^1.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Both app have the react-native-worklets-core/plugin in the babel.config.js as shown below.

Expo:

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: [
      ["react-native-worklets-core/plugin"]
    ],
    presets: ['babel-preset-expo'],
  };
};

Pure React Native:

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

I had reset the cache for both app:

Expo:

npx expo prebuild --clean
npx expo run:android --no-build-cache

Pure React Native:

nom start --reset-cache

Expo App Code:

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { 
  useCameraPermission, useCameraDevice, useFrameProcessor, Camera,
  useCameraFormat, Templates
} from 'react-native-vision-camera';


export default function App() {
  const { hasPermission, requestPermission } = useCameraPermission()
  const device = useCameraDevice('back');
  const [showCam, setShowCam] = React.useState(false);
  const format = useCameraFormat(device, Templates.FrameProcessingYUV);

  React.useEffect(() => {
    if(!hasPermission) {
      requestPermission();
    }
  }, [hasPermission, requestPermission]);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    console.log(`frameProcessor...`);
    
  }, [hasPermission, showCam, device]);

  return (
    <View style={styles.container}>
      <Text>{hasPermission ? 'Have Permission' : 'No Permission'}</Text>
      {
        hasPermission && device && showCam &&
        <>
          <Camera
            style={StyleSheet.absoluteFill}
            device={device}
            isActive={true}
            frameProcessor={frameProcessor}
            format={format}
            pixelFormat='yuv'
            photo={true}
            fps={format?.minFps}
          />
          <View style={{
            position: 'absolute',
            top: 20,
            right: 20
          }}>
            <Button 
              onPress={() => setShowCam(false)} 
              title='X' 
            />
          </View>
        </>
      }

      {
        !showCam &&
        <Button onPress={() => setShowCam(true)} title='Show Camera' />
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Pure React Native App Code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

import { 
  useCameraPermission, useCameraDevice, useFrameProcessor, Camera,
  useCameraFormat, Templates
} from 'react-native-vision-camera';


function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
  };

  const { hasPermission, requestPermission } = useCameraPermission()
  const device = useCameraDevice('back');
  const [showCam, setShowCam] = React.useState(false);
  const format = useCameraFormat(device, Templates.FrameProcessingYUV);

  React.useEffect(() => {
    if(!hasPermission) {
      console.log(`Requesting permission...`);  
      requestPermission();
    }
  }, [hasPermission, requestPermission]);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    console.log(`frameProcessor...`);
    
  }, [hasPermission, showCam, device]);


  return (
    <SafeAreaView style={[backgroundStyle, StyleSheet.absoluteFill, {justifyContent: 'center', alignItems: 'center'}]}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Text>{hasPermission ? 'Have Permission' : 'No Permission'}</Text>
      {
        hasPermission && device && showCam &&
        <>
          <Camera
            style={StyleSheet.absoluteFill}
            device={device}
            isActive={true}
            frameProcessor={frameProcessor}
            format={format}
            pixelFormat='yuv'
            photo={true}
            fps={format?.minFps}
          />
          <View style={{
            position: 'absolute',
            top: 20,
            right: 20
          }}>
            <Button 
              onPress={() => setShowCam(false)} 
              title='X' 
            />
          </View>
        </>
      }

      {
        !showCam &&
        <Button onPress={() => setShowCam(true)} title='Show Camera' />
      }
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Relevant log output

iOS Log (Pure React Native App):

2024-04-20 11:54:00.108774+0800 rncam[1393:81130] [javascript] Loading react-native-worklets-core...
2024-04-20 11:54:00.111366+0800 rncam[1393:81130] [javascript] Worklets loaded successfully
2024-04-20 11:54:00.313230+0800 rncam[1393:81114] [connection] nw_socket_handle_socket_event [C1.1:1] Socket SO_ERROR [54: Connection reset by peer]
2024-04-20 11:54:03.334608+0800 rncam[1393:81110] SocketStream read error [0x281efa260]: 1 54
2024-04-20 11:54:06.356600+0800 rncam[1393:81115] [connection] nw_socket_handle_socket_event [C9.1:1] Socket SO_ERROR [54: Connection reset by peer]
2024-04-20 11:54:09.425557+0800 rncam[1393:81111] SocketStream read error [0x281e900b0]: 1 54
2024-04-20 11:54:10.889559+0800 rncam[1393:80892] [native] VisionCamera.didSetProps(_:): Updating 19 props: [top, fps, onViewReady, right, cameraId, position, left, onError, onStarted, onInitialized, enableBufferCompression, format, onStopped, onCodeScanned, enableFrameProcessor, pixelFormat, bottom, photo, isActive]
2024-04-20 11:54:10.889606+0800 rncam[1393:80892] [native] VisionCamera.configure(_:): configure { ... }: Waiting for lock...
2024-04-20 11:54:10.891998+0800 rncam[1393:81115] [native] VisionCamera.configure(_:): configure { ... }: Updating CameraSession Configuration... Difference(inputChanged: true, outputsChanged: true, videoStabilizationChanged: true, orientationChanged: true, formatChanged: true, sidePropsChanged: true, torchChanged: true, zoomChanged: true, exposureChanged: true, audioSessionChanged: true)
2024-04-20 11:54:10.892055+0800 rncam[1393:81115] [native] VisionCamera.configureDevice(configuration:): Configuring Input Device...
2024-04-20 11:54:10.892100+0800 rncam[1393:81115] [native] VisionCamera.configureDevice(configuration:): Configuring Camera com.apple.avfoundation.avcapturedevice.built-in_video:0...
2024-04-20 11:54:10.899614+0800 rncam[1393:81130] [javascript] system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed!, js engine: hermes
2024-04-20 11:54:10.903225+0800 rncam[1393:81115] [native] VisionCamera.configureDevice(configuration:): Successfully configured Input Device!
2024-04-20 11:54:10.903252+0800 rncam[1393:81115] [native] VisionCamera.configureOutputs(configuration:): Configuring Outputs...
2024-04-20 11:54:10.903315+0800 rncam[1393:81115] [native] VisionCamera.configureOutputs(configuration:): Adding Photo output...

Android Log (Pure React Native App):

2024-04-20 12:01:57.724 14361-14734 Persistent...ureSession com.rncam                            D  --> setIsActive(false)
2024-04-20 12:01:57.724 14361-14734 Persistent...ureSession com.rncam                            D  Configure() with isActive: false, ID: 2, device: null, session: null
2024-04-20 12:01:57.725 14361-14734 Persistent...ureSession com.rncam                            I  Creating new device...
2024-04-20 12:01:57.727 14361-14361 DecorView[]             com.rncam                            I  pkgName:com.rncam old windowMode:1 new windoMode:1, isFixedSize:false
2024-04-20 12:01:57.727 14361-14734 CameraManager           com.rncam                            I  Camera #2: Opening...
2024-04-20 12:01:57.729 14361-14734 CameraManager           com.rncam                            I  open camera: 2, package name: com.rncam
2024-04-20 12:01:57.730  1049-5284  CameraService           cameraserver                         I  CameraService::connectDevice E (pid 14361 "com.rncam", id 2)
2024-04-20 12:01:57.730  1049-5284  CameraService           cameraserver                         I  CameraService::connect call (PID -1 "com.rncam", camera ID 2) for HAL version default and Camera API version 2
2024-04-20 12:01:57.731  1049-5284  Camera2ClientBase       cameraserver                         I  Camera 2: Opened. Client: com.rncam (PID 14361, UID 10158)
2024-04-20 12:01:57.731  1049-5284  CameraService           cameraserver                         I  connectHelper(), make client for 'com.rncam'.
2024-04-20 12:01:57.733  1665-2243  DebugKeepScreenOn       system_server                        I  Acquiring screen wakelock due to Window{9a5d436 u0 com.rncam/com.rncam.MainActivity}
2024-04-20 12:01:57.733 14361-14744 CameraDevices           com.rncam                            I  Camera #2 is now unavailable.
2024-04-20 12:01:57.734  3010-3672  HwMediaAssistantService com.huawei.systemserver              I  sendCameraChangeBroadcast to com.huawei.harmonyos.foundation cameraId(2), facing(0), newCameraState(0), clientName(com.rncam)
2024-04-20 12:01:57.736  1665-2241  HwCameraServiceProxy    system_server                        I  notifyCameraStateChangeForSarService begin cameraId 2, newCameraState 0, clientName com.rncam
2024-04-20 12:01:57.737 14361-14741 ReactNativeJS           com.rncam                            E  system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed!, js engine: hermes
2024-04-20 12:01:57.739 14361-14361 RenderService           com.rncam                            D  RCS is disable
2024-04-20 12:01:57.741 14361-14361 CameraSession           com.rncam                            I  PreviewView Surface created! Surface(name=null)/@0xaa350b1
2024-04-20 12:01:57.741 14361-14361 CameraSession           com.rncam                            I  Setting Preview Output...
2024-04-20 12:01:57.742 14361-14361 CameraSession           com.rncam                            I  PreviewView Surface updated! Surface(name=null)/@0xaa350b1 1920 x 1080
2024-04-20 12:01:57.744 14361-14361 HwViewRootImpl          com.rncam                            I  removeInvalidNode all the node in jank list is out of time
2024-04-20 12:01:57.752  1665-2243  HwCameraServiceProxy    system_server                        I  notifyCameraStateChangeForSarService begin cameraId 2, newCameraState 101, clientName com.rncam
2024-04-20 12:01:57.753 14361-14734 CameraSession           com.rncam                            I  configure { ... }: Waiting for lock...
2024-04-20 12:01:57.753 14361-14737 CameraManager           com.rncam                            I  Camera #2: Opened!
2024-04-20 12:01:57.757 14361-14734 CameraSession           com.rncam                            I  configure { ... }: Waiting for lock...
2024-04-20 12:01:57.758 14361-14734 Persistent...ureSession com.rncam                            I  Creating new session...
2024-04-20 12:01:57.760 14361-14734 CreateCaptureSession    com.rncam                            I  Camera #2: Creating Capture Session #1... (Hardware Level: 0 | Outputs: [PHOTO (3648x2736 in JPEG), VIDEO (960x720 in YUV)])

Camera Device

Android:

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "limited",
  "maxZoom": 10,
  "minZoom": 1,
  "maxExposure": 4,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 8.500000162124637,
  "minExposure": -4,
  "name": "BACK (2)",
  "hasFlash": false,
  "hasTorch": false,
  "position": "back",
  "id": "2"
}

iOS:
{
  "sensorOrientation": "landscape-right",
  "maxZoom": 16,
  "position": "back",
  "maxExposure": 8,
  "supportsLowLightBoost": false,
  "minZoom": 1,
  "isMultiCam": false,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "neutralZoom": 1,
  "minFocusDistance": 10,
  "formats": [],
  "name": "Back Camera",
  "hasFlash": true,
  "minExposure": -8,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:0",
  "hardwareLevel": "full",
  "hasTorch": true
}

Device

iPhone 7 iOS 15.8.2, Huawei Mate30 Pro Android 12

VisionCamera Version

3.9.2

Can you reproduce this issue in the VisionCamera Example app?

No, I cannot reproduce the issue in the Example app

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.

The text was updated successfully, but these errors were encountered:

alized559 · 2024-04-20T11:06:26Z

same issue for me

ExoticCoder16 · 2024-04-21T15:04:45Z

same issue, while my Frame Processor was still working few days ago, it logged some frames ; then starting from yesterday, it said it’s not installed ; I tried to upgrade to RNVC v.4 but it said it is not compatible with VC resize plugin which I need for AI detection

sahinboga · 2024-04-21T17:07:08Z

same issue for me
"react-native": "0.73.6",
"react-native-vision-camera": "^3.9.2",
"react-native-worklets-core": "^1.1.1",

matheuscaet · 2024-04-21T19:26:15Z

Same issue here

"react-native-vision-camera": "^3.9.2",
"react-native-vision-camera-face-detector": "^1.5.0",
"react-native-worklets-core": "^1.1.1"
"react-native": "0.72.4",

ndkVersion = "25.1.8937393"
kotlinVersion = "1.8.10"
gradleVersion = "7.4.2"

mrousavy · 2024-04-21T21:49:02Z

Hey - react-native-worklets-core 1.1.1 introduced a breaking change. You need to stay on 0.x.x for VisionCamera V3, or upgrade to VisionCamera V4 to use 1.x.x of react-native-worklets-core.

sekhuat · 2024-04-22T08:13:28Z

Hi @mrousavy , I had uninstall the react-native-worklets-core 1.1.1 and install 0.5.0. I had performed clear cache including delete the watchman but I got another error. Please see below.

 LOG  Loading react-native-worklets-core...
 LOG  Worklets loaded successfully
 ERROR  Camera.onError(unknown/unknown): [unknown/unknown] Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 and has protection mode(s): rw-p [unknown/unknown: [unknown/unknown] Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 and has protection mode(s): rw-p]

sekhuat · 2024-04-25T11:27:30Z

Finally get it work! For those who faced the same issue, you need to install the react-native-reanimated for it to work.

Here are the packages I installed. Make sure the react-native-worklets-core is 0.x.x if you using VisionCamera V3.

"dependencies": {
    "expo": "~50.0.14",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-vision-camera": "^3.9.2",
    "react-native-worklets-core": "0.5.0",
    "react-native-reanimated": "~3.6.2"
  },

And here is my babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: [
      ["react-native-worklets-core/plugin"],
      'react-native-reanimated/plugin'
    ],
    presets: ['babel-preset-expo'],
  };
};

Good luck!!

mrousavy · 2024-04-25T12:45:05Z

You don't need Reanimated for Frame Processors, only Worklets Core (which is a much lighter / smaller dependency).
Of course it doesn't hurt if you already have Reanimated installed, but you don't need it for frame processors.

Maybe you just forgot to add Worklets to the babel config or didn't clear cache?

sekhuat · 2024-04-25T13:25:42Z

You don't need Reanimated for Frame Processors, only Worklets Core (which is a much lighter / smaller dependency). Of course it doesn't hurt if you already have Reanimated installed, but you don't need it for frame processors.

Maybe you just forgot to add Worklets to the babel config or didn't clear cache?

If I didn't install the react-native-reanimated module, I will get the ERROR Camera.onError(unknown/unknown): [unknown/unknown] Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 and has protection mode(s): rw-p [unknown/unknown: [unknown/unknown] Compiling JS failed: 1:1:invalid empty parentheses '( )' Buffer size 3 starts with: 280a29 and has protection mode(s): rw-p] error. After I installed the react-native-reanimated module, everything works fine.

mrousavy · 2024-05-03T09:56:40Z

try upgrading to react-native-vision-camera V4 and react-native-worklets-core 1.x.x.

lin826 · 2024-05-27T21:32:27Z

Here is a combination works!

  "dependencies": {
    "@react-native-camera-roll/camera-roll": "^7.4.0",
    "@react-native-community/blur": "^4.4.0",
    "@react-navigation/core": "^6.4.10",
    "@react-navigation/native-stack": "^6.9.17",
    "@shopify/react-native-skia": "0.1.221",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-fast-image": "^8.6.3",
    "react-native-fast-tflite": "^1.2.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-mmkv": "^2.11.0",
    "react-native-pressable-opacity": "^1.0.10",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-static-safe-area-insets": "^2.2.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-video": "^5.2.1",
    "react-native-vision-camera": "^4.0.5",
    "react-native-worklets-core": "^1.3.3",
    "vision-camera-resize-plugin": "^3.1.0",
    "expo": "~50.0.17"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.79",
    "eas-cli": "^9.1.0",
    "expo": "^50.0.18",
    "expo-dev-client": "~3.3.11",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.4",
    "tsd": "^0.31.0",
    "typescript": "~5.3.3"
  },

imvedanshmehra · 2024-05-31T19:10:44Z

I am still having issues with this combination; I am not sure, but is "vision-camera-resize-plugin" also required to make it work?

sekhuat added the 🐛 bug Something isn't working label Apr 20, 2024

mrousavy closed this as completed Apr 21, 2024

This comment was marked as spam.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed! #2759

🐛 system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed! #2759

sekhuat commented Apr 20, 2024 •

edited

Loading

alized559 commented Apr 20, 2024 •

edited

Loading

ExoticCoder16 commented Apr 21, 2024 •

edited

Loading

sahinboga commented Apr 21, 2024

matheuscaet commented Apr 21, 2024 •

edited

Loading

mrousavy commented Apr 21, 2024

sekhuat commented Apr 22, 2024

sekhuat commented Apr 25, 2024

mrousavy commented Apr 25, 2024

sekhuat commented Apr 25, 2024

mrousavy commented May 3, 2024

This comment was marked as spam.

lin826 commented May 27, 2024

imvedanshmehra commented May 31, 2024

🐛 system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed! #2759

🐛 system/frame-processors-unavailable: Frame Processors are not available, react-native-worklets-core is not installed! #2759

Comments

sekhuat commented Apr 20, 2024 • edited Loading

What's happening?

Reproduceable Code

Relevant log output

Camera Device

Device

VisionCamera Version

Can you reproduce this issue in the VisionCamera Example app?

Additional information

alized559 commented Apr 20, 2024 • edited Loading

ExoticCoder16 commented Apr 21, 2024 • edited Loading

sahinboga commented Apr 21, 2024

matheuscaet commented Apr 21, 2024 • edited Loading

mrousavy commented Apr 21, 2024

sekhuat commented Apr 22, 2024

sekhuat commented Apr 25, 2024

mrousavy commented Apr 25, 2024

sekhuat commented Apr 25, 2024

mrousavy commented May 3, 2024

This comment was marked as spam.

lin826 commented May 27, 2024

imvedanshmehra commented May 31, 2024

sekhuat commented Apr 20, 2024 •

edited

Loading

alized559 commented Apr 20, 2024 •

edited

Loading

ExoticCoder16 commented Apr 21, 2024 •

edited

Loading

matheuscaet commented Apr 21, 2024 •

edited

Loading