react-native-vision-camera: 🐛 frame-processor/unavailable: Frame Processors are not enabled

Just close debugger mode on android

Finally, I resolved this by upgrading my emulator SDK version to 31.

I have finally solve this issue. For today the latest version of react-native-reanimated is “3.0.2”, this is not compatible with latest version of react-native-camera. Using version "react-native-reanimated": "^2.10.0" solved the issue for me after deleting yarn.lock file and then yarn install again.

any solutions so far , am still facing this issue in both IOS and Android

this is my package.json looks like :

still breaking in IOS 17. error saying “frameProcesssor not enabled”.

please help me to resolve this.

FYI : I have tried all the solutions provided by other folks

Please see if #691 fixes the issue for you guys 🙏

I’m getting this same error running in debug on Android emulator…

• “react-native-vision-camera”: “2.15.2”,
• “react-native-reanimated”: “2.13.0”,
• “vision-camera-code-scanner”: “0.2.0”,
• “react-native”: “0.68.2”,
• “react”: “17.0.2”,

import 'react-native-reanimated'
import React, { useEffect, useState } from 'react'
import { View, Alert, StyleSheet } from 'react-native'

import styles from './styles'

import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera'
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner'
import { runOnJS } from 'react-native-reanimated'

const QRReader: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false)
  const devices = useCameraDevices()
  const device = devices.back
  const [hasPermission, setHasPermission] = useState<boolean>(false)
  const [barcodes, setBarcodes] = useState<Barcode[]>()

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

    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true })
    runOnJS(setBarcodes)(detectedBarcodes)
  }, [])

  useEffect(() => {
    ;(async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')
    })()
  }, [])

  useEffect(() => {
    if (barcodes && barcodes.length) {
      console.log('barcodes', barcodes);
    }
  }, [barcodes])

  return (
    <View style={styles.container}>
      {device != null && hasPermission && (
        <>
          <Camera
            style={StyleSheet.absoluteFill}
            isActive={true}
            device={device}
            frameProcessor={frameProcessor}
            frameProcessorFps={1}
          />
        </>
      )}
    </View>
  )
}

export default QRReader

@mrousavy im using ubuntu, just installing the package and did changes in android manifest and other files given in docs.

VisionCamera: Frame Processors are disabled because REA v2 does not exist. C++ part will not be built.

> Task :app:checkDebugAarMetadata FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings
9 actionable tasks: 2 executed, 7 up-to-date

FAILURE: Build failed with an exception.

for Android It won’t work at all. To reproduce the issue just create one app and install the package. that’s all, one will get this error.

Hm, okay that’s a separate concurrency issue. will take a look soon

If anyone is still facing this issue after changing “react-native-reanimated” version to 2.10.0, it is most likely because you are using a package like Firebase that requires use_frameworks! :linkage => :static. You need specify the build types for RNReanimated and Vision camera. Add the block below to your pod file and it should work.

pre_install do |installer| installer.pod_targets.each do |pod| if pod.name.eql?(‘RNReanimated’) || pod.name.eql?(‘VisionCamera’) def pod.build_type Pod::BuildType.static_library end end end end

Facing the same issue, by when this PR will be merged?

Hi!

I’ve spent several hours working to resolve this issue with the react-native-vision-camera package 📷. I’d like to share the potential solution I’ve found. Here’s a step-by-step guide:

1. Ensure Package Versions: First and foremost, please ensure these versions are specified in your package.json:

react-native-vision-camera: 2.15.2 react-native-reanimated: 2.17.0 vision-camera-code-scanner: 0.2.0 react-dom: ^18.2.0 react-native: 0.70.6

1. Android Cleanup: Navigate to the Android directory and execute the cleaning command:

cd android && ./gradlew clean

1. Yarn Cache and Android Start: Clear the yarn cache and initiate the Android application with:

yarn cache clean && yarn run android

1. iOS Build Cleanup: For iOS concerns, please delete the build folder:

rm -rf ios/build

1. CocoaPods Cleanup: Refresh your CocoaPods configurations in the iOS directory:

cd ios/
pod cache clean --all
pod deintegrate
pod install

Additional Cleanup: For a thorough cleanup, consider these steps:

watchman watch-del-all
rm -rf node_modules/ && npm install
rm -rf /tmp/metro-*.lock

🧩 Frame Processors are now enabled with these changes!

As a guiding note for future endeavors, for those starting new projects, I highly recommend using react-native-vision-camera version 3. This updated version offers enhanced features, better stability, and consistent support.

Furthermore, a special shoutout to mrousavy is essential. The development and enhancement of react-native-vision-camera have been monumental for the React Native community. Thank you, mrousavy, for your dedication and for arming developers with such invaluable tools.

Greetings!

I’m getting this same error running in debug on Android emulator…

• “react-native-vision-camera”: “2.15.2”,
• “react-native-reanimated”: “2.13.0”,
• “vision-camera-code-scanner”: “0.2.0”,
• “react-native”: “0.68.2”,
• “react”: “17.0.2”,

import 'react-native-reanimated'
import React, { useEffect, useState } from 'react'
import { View, Alert, StyleSheet } from 'react-native'

import styles from './styles'

import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera'
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner'
import { runOnJS } from 'react-native-reanimated'

const QRReader: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false)
  const devices = useCameraDevices()
  const device = devices.back
  const [hasPermission, setHasPermission] = useState<boolean>(false)
  const [barcodes, setBarcodes] = useState<Barcode[]>()

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

    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true })
    runOnJS(setBarcodes)(detectedBarcodes)
  }, [])

  useEffect(() => {
    ;(async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')
    })()
  }, [])

  useEffect(() => {
    if (barcodes && barcodes.length) {
      console.log('barcodes', barcodes);
    }
  }, [barcodes])

  return (
    <View style={styles.container}>
      {device != null && hasPermission && (
        <>
          <Camera
            style={StyleSheet.absoluteFill}
            isActive={true}
            device={device}
            frameProcessor={frameProcessor}
            frameProcessorFps={1}
          />
        </>
      )}
    </View>
  )
}

export default QRReader

After upgrade to “react-native”: “0.70.6”, the problem is still happening…

I can’t get away from this “frame-processor/unavailable: Frame Processors are not enabled” error.

While building, it seems to log that “frame processors are enabled!”

So I’m not sure why it is throwing this error. I cannot use the “frameProcessor” prop on Camera.

@mrousavy almost!

I no longer experience the original issue on reload, however navigating away from the screen that uses frame processors gives me

com.mrousavy.camera.ViewNotfoundError: [system/view-not-found] The given view (ID 12429) was not found in the view manager

I tried nuking node_modules & gradlew clean and no change.

Ah, this is a race condition in the C++ view finder part. (findViewById, called on JS Thread through JNI, so C++ -> JS -> C++)

I have tried several times to fix this issue, but all of those times turned into long nights of debugging and after the morning light started to shine through my window I didn’t want to spend more time on it. If you are interested in posting a bug bounty on the issue, let me know and me and my guys in my agency can look at this issue in greater detail to fix it once and for all.

Any solution for this? @mrousavy

@DeepikaSharma5 The solution that worked for me was.

1. I updated my android device to Andorid 13 as suggested by @emaxedon in above comments.
2. Insted of directly using true false for the isActive tag . I used isFocused.

Here is the sample code for better understanding

Not working code :- <Container> {isFocused && <Camera ref={cameraRef} photo={true} isActive={true} device={device} style={StyleSheet.absoluteFill} video={true} audio={true} enableZoomGesture={true} />} </Container>

Working Code part :- const isFocused = useIsFocused(); <Container> {isFocused && <Camera ref={cameraRef} photo={true} isActive={isFocused} device={device} style={StyleSheet.absoluteFill} video={true} audio={true} enableZoomGesture={true} />} </Container>

Not using Chrome debugger - doesn’t work with [insert package that I forget now] so I’ve been using flipper when required, but this occurs if flipper is connected or not.

Disabling fast refresh did not fix the issue if it already occurs. Tried this too:

• From a fresh app (react-native run-android) on device
• Disabling fast refresh (no option for hot-reload)
• Clean bundle yarn install && yarn start --reset-cache
• Navigate to page with camera, allow permission
• Works fine
• Navigate away from page
• Error Exception in HostFunction: com.mrousavy.camera.ViewNotFoundError: [system/view-not-found] The given view (ID 2559) was not found in the view manager.
• Reload app via metro bundler
• Navigate back to camera screen -> frame processors are not enabled

Hope this helps somewhat!

Are you sure that you’re not using some remote debugger such as Chrome? It makes me wonder that the JSI functions are missing. Or maybe you are using fast-refresh and that breaks?

Can you reproduce the error if you simply open the app on your phone, without any debugger attached, and navigate through screens without fast-refresh or hot-reload?

Still breaking on iOS 17. Please help!

  "react-native-vision-camera": "^2.16.4",
  "react-native": "0.70.7",

@w4t3r-45 Thank you, I will try your solution.

@w4t3r-45 Hi. Could you please provide your package.json file and Android version that you use for testing? this are the versions of packages am using , besides that i tested on Android 10 physical device and on IOS 16.6 also physical device.

“react-native”: “0.71.13”, “react-native-reanimated”: “^3.5.4”, “react-native-vision-camera”: “^2.16.1”,

It worked for me, and I didn’t need to update reanimated, just add this line in the Podfile

¿Estás seguro de que no estás usando algún depurador remoto como Chrome? Me pregunto si faltan las funciones JSI. ¿O tal vez estás usando una actualización rápida y eso se rompe?

¿Puede reproducir el error si simplemente abre la aplicación en su teléfono, sin ningún depurador adjunto, y navega por las pantallas sin una actualización rápida o una recarga en caliente?

I stopped debugging by chrome and instantly the error went away so it worked for me

Hey @emaxedon I am facing same issue on the development build on my device (One Plus 9r). Surprisingly its working on my emulator . How do i solve this problem? PS - I am relatively new to react-native

My camerascreen code - `import { Button, StyleSheet, Text, View ,TouchableOpacity} from “react-native”; import { StatusBar } from “expo-status-bar”; import * as MediaLibrary from “expo-media-library”; import * as Permissions from “expo-permissions”; import { useRef, useState, useEffect } from “react”; import styles from “…/styles”; import { Ionicons } from “@expo/vector-icons”; import { useIsFocused } from “@react-navigation/native”; import {useCameraDevices,Camera,CameraPermissionStatus,frameRateIncluded,useFrameProcessor} from ‘react-native-vision-camera’; import { examplePlugin } from ‘./frame-Processors/ExamplePlugin’; import {useFrameCallback} from ‘react-native-reanimated’;

export default function CameraScreen({ navigation }) { const [cameraDevice, setCameraDevice] = useState(‘back’); const [recording, setRecording] = useState(false); const [flash, setFlash] = useState(‘off’); const [cameraPermission, setCameraPermission] = useState<CameraPermissionStatus>(); const [microphonePermission, setMicrophonePermission] = useState<CameraPermissionStatus>()

const cameraRef = useRef<typeof Camera>(Camera) const isFocused = useIsFocused(); const devices = useCameraDevices();

var device = devices[cameraDevice];

const frameProcessor = useFrameProcessor((frame) => { ‘worklet’; const values = examplePlugin(frame); console.log(Return Values: ${JSON.stringify(values)}); }, []);

useEffect(() => { Camera.getCameraPermissionStatus().then(setCameraPermission); Camera.getMicrophonePermissionStatus().then(setMicrophonePermission); if (cameraPermission!=‘authorized’){ Camera.requestCameraPermission().then(setCameraPermission); } if (microphonePermission!=‘authorized’){ Camera.requestMicrophonePermission().then(setMicrophonePermission); } }, [setCameraPermission,setMicrophonePermission]);

console.log(Re-rendering Navigator. Camera: ${cameraPermission} | Microphone: ${microphonePermission});

if (!device) { return null; }

async function toggleCameraType(){ await setCameraDevice(cameraDevice => (cameraDevice==‘back’?‘front’:‘back’)) device = devices[cameraDevice]; }

function startRecording(){ try { if (cameraRef.current == null) throw new Error(‘Camera ref is null!’);

  console.log('calling startRecording()...');
  cameraRef.current.startRecording({
    flash: flash,
    onRecordingError: (error) => {
      console.error('Recording failed!', error);
      stopRecording();
    },
    onRecordingFinished: (video) => {
      console.log(`Recording successfully finished! ${video.path}`);
      navigation.navigate('ReelPreview',{videoURI:video.path});
      stopRecording();
    },
  });
  // TODO: wait until startRecording returns to actually find out if the recording has successfully started
  console.log('called startRecording()!');
  setRecording(true);
} catch (e) {
  console.error('failed to start recording!', e);
}
// alert('Starting Recording')
// console.log("Lets Record")
// cameraRef.current?.startRecording({
//   flash: 'on',
//   onRecoringFinished: (video) => {alert(video);console.log(video)},
//   onRecordingError: (error) => {alert(error);console.log(error)}
// })

} async function stopRecording (){ console.log(‘Recording Stopped!’) await cameraRef.current?.stopRecording() } function manageFlash(){ if(!device.hasFlash){ alert(‘Camera does not has flash’); } console.log(flash) setFlash(flash => (flash===‘on’?flash=‘off’:flash=‘on’)) }

return ( <View style={{flex:1}}> {/* {isFocused && hasPermission && ( */} <Camera ref = {cameraRef} photo={true} isActive={isFocused} device={device} whiteBalance=“auto” type=“back” style={StyleSheet.absoluteFill} video ={true} audio ={true} enableZoomGesture={true} frameProcessor={device.supportsParallelVideoProcessing ? frameProcessor : undefined} frameProcessorFps={60}

    />
    <View style={{ flex: 9 }} />
      <View
        style={{
          flex: 1,
          justifyContent: "space-around",
          alignItems: "center",
          backgroundColor: "#1c1c1c",
          flexDirection: 'row'
        }}
        >
        <Ionicons
          name={recording ? "stop-circle" : "play-circle"}
          size={60}
          color={recording ? "red" : "white"}
          onPress={async () => {
            console.log("btn clicked");
            if (!recording) {
              startRecording();
              setRecording(true);
            } else {
              setRecording(false);
              stopRecording();
            }
          }}
        />
        <Ionicons
          name={"camera-reverse"}
          size={60}
          color ={"white"}
          onPress={toggleCameraType}
        />
        <Ionicons
          name={"flash"}
          size={50}
          color ={(device.hasFlash && flash == 'on')?"yellow":"white"}
          onPress={manageFlash}
        />
      </View>
    
  {/* )} */}
</View>

); } `

Example plugin -

`/* global __example_plugin __example_plugin_swift */ import type { Frame } from ‘react-native-vision-camera’;

declare let _WORKLET: true | undefined;

export function examplePluginSwift(frame: Frame): string[] { ‘worklet’; if (!_WORKLET) throw new Error(‘examplePluginSwift must be called from a frame processor!’);

// @ts-expect-error because this function is dynamically injected by VisionCamera return __example_plugin_swift(frame, ‘hello!’, ‘parameter2’, true, 42, { test: 0, second: ‘test’ }, [‘another test’, 5]); }

export function examplePlugin(frame: Frame): string[] { ‘worklet’; if (!_WORKLET) throw new Error(‘examplePlugin must be called from a frame processor!’);

// @ts-expect-error because this function is dynamically injected by VisionCamera return __example_plugin(frame, ‘hello!’, ‘parameter2’, true, 42, { test: 0, second: ‘test’ }, [‘another test’, 5]); }`

Bable.config.json -

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

Error that i get on console is

ERROR frame-processor/unavailable: Frame Processors are not enabled. See https://mrousavy.github.io/react-native-vision-camera/docs/guides/troubleshooting ERROR Your app just crashed. See the error below. java.lang.UnsatisfiedLinkError: No implementation found for void com.mrousavy.camera.CameraView.frameProcessorCallback(androidx.camera.core.ImageProxy) (tried Java_com_mrousavy_camera_CameraView_frameProcessorCallback and Java_com_mrousavy_camera_CameraView_frameProcessorCallback__Landroidx_camera_core_ImageProxy_2) com.mrousavy.camera.CameraView.frameProcessorCallback(Native Method) com.mrousavy.camera.CameraView.configureSession$lambda-7$lambda-6(CameraView.kt:491) com.mrousavy.camera.CameraView.$r8$lambda$cqtIchEZdTZaV3R0UUrDpVbB1Es(Unknown Source:0) com.mrousavy.camera.CameraView$$ExternalSyntheticLambda1.analyze(Unknown Source:2) androidx.camera.core.ImageAnalysis.lambda$setAnalyzer$2(ImageAnalysis.java:463) androidx.camera.core.ImageAnalysis$$ExternalSyntheticLambda0.analyze(Unknown Source:2) androidx.camera.core.ImageAnalysisAbstractAnalyzer.lambda$analyzeImage$0$androidx-camera-core-ImageAnalysisAbstractAnalyzer(ImageAnalysisAbstractAnalyzer.java:283) androidx.camera.core.ImageAnalysisAbstractAnalyzer$$ExternalSyntheticLambda1.run(Unknown Source:14) java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167) java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641) java.lang.Thread.run(Thread.java:923)