Closed jack828 closed 2 years ago
Interesting, does this work on iOS?
My colleagues on iOS tell me they haven't experienced the issue, but ill update this thread if they do today.
@mrousavy this also happens with me after navigating to the screen app crashes with this error, after restarting the app it works fine
this is the error `com.facebook.react.common.c: frame-processor/unavailable: Frame Processors are not enabled. See https://mrousavy.github.io/react-native-vision-camera/docs/guides/troubleshooting, js engine: hermes, stack: Wrapper@1:169960 _createSuperInternal@1:1606048 CameraError@1:1606491 _createSuperInternal@1:1606048 CameraRuntimeError@1:1606880 assertFrameProcessorsEnabled@1:1603699 setFrameProcessor@1:1603717 onViewReady@1:1603837 invokeGuardedCallbackImpl@1:106347 invokeGuardedCallback@1:106404 invokeGuardedCallbackAndCatchFirstError@1:106436 executeDispatch@1:106568 executeDispatchesAndReleaseTopLevel@1:109957 forEachAccumulated@1:108051 anonymous@1:110314 batchedUpdatesImpl@1:166405 batchedUpdates@1:109874 _receiveRootNodeIDEvent@1:110151 receiveEvent@1:160446 callFunction@1:93774 anonymous@1:92263 guard@1:93220 callFunctionReturnFlushedQueue@1:92221
at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:12)
at java.lang.reflect.Method.invoke(Method.java)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:18)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:13)
at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:1)
at android.os.Looper.loop(Looper.java:236)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:8)
at java.lang.Thread.run(Thread.java:923)`
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?
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:
react-native run-android
) on deviceyarn install && yarn start --reset-cache
Exception in HostFunction: com.mrousavy.camera.ViewNotFoundError: [system/view-not-found] The given view (ID 2559) was not found in the view manager.
frame processors are not enabled
Hope this helps somewhat!
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.
No worries. If you don't mind linking any relevant code, I will see if I can't obtain time myself to see what I can do.
Appreciate it all the same!
Facing the same issue, by when this PR will be merged?
Please see if #691 fixes the issue for you guys 🙏
@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.
Hm, okay that's a separate concurrency issue. will take a look soon
@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.
that's all, one will get this error.
@vikasacharya16 the output you shared is not an error.
Please read up on what errors are and how to identify them, this is a simple log output. The actual error is further up.
hey @mrousavy sorry for the delay. I've just upgraded the package in our project and it looks like the issue is completely resolved. I can interact with the camera as required with no issues.
Thanks so much!!
I re-built and re-ran the app while also restarting metro with --reset-cache and that seemed to fix my issue. I also ran npm update but it didn't appear to update much in package.json, just some deps of deps.
I'm getting this same error running in debug on Android emulator...
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
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.
Finally, I resolved this by upgrading my emulator SDK version to 31.
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
const cameraRef = useRef
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>
); } `
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)
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(); const [microphonePermission, setMicrophonePermission] = useState()
const cameraRef = useRef(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 ( {/ {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)
Hey, @Ankushpandey-ti - you need to ensure that your device is running Google Android API 31 or greater (Android 12 or greater).
Hey , @emaxedon , i tried the development build of my app on android 13, still getting same error. It starts camera for a second and then crashes with same error as before And it works on my android emulator which uses a dummy camera. Error :- rame-processor/unavailable: Frame Processors are not enabled. See https://mrousavy.github.io/react-native-vision-camera/docs/guides/troubleshooting
Anyidea why is it so?
@Ankushpandey-ti In this case, it is unlikely that it is tied to the android SDK version. I see in your error logs that "Frame processors are not enabled". This will definitely cause issues.
I also notice you are not directly importing the entire "react-native-reanimated" module...
import {useFrameCallback} from 'react-native-reanimated';
should be
import 'react-native-reanimated';
import {useFrameCallback} from 'react-native-reanimated';
Hey ,@emaxedon
I did a rebuild for android with no changes now the error is gone but the development app keeps crashing on starting the camera without any log or error.
It some times gives a pop up -> "APP keeps stopping."
One more thing that i noticed is if i keep the isActive = {false} , then the app doesn't closes.
It closes after i turn the isActive ={true}
Also its working fine on emulator as it was earlier.
Any solution for this? @mrousavy
Any solution for this? @mrousavy
@DeepikaSharma5 The solution that worked for me was.
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();
`
In my case what solved this was add the Processor plugin class package to the MainApplication.java
file in getPackages
method.
Like:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new VisionCameraFaceDetectorPluginPackage() // -> Frame processor
);
}
I got the same issue but on IOS. And i follow all the steps on https://mrousavy.com/react-native-vision-camera/docs/guides/troubleshooting/
do someone has some some idea ?
in my Podfile i have platform :ios, '13' and ... if pod.name.eql?('vision-camera-code-scanner') || pod.name.eql?('VisionCamera') def pod.build_type; Pod::BuildType.static_library end end
Just close debugger mode on android
¿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
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.
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 thenyarn install
again.
This works for me! Thankyou
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 thenyarn install
again.
Solved the issue for me too! I installed the 2.14.4 version. The site says: "If you want to use Frame Processors, you need to install react-native-reanimated 2.2.0 or higher." 3.0.2 is higher than 2.2.0 but not works, maybe you can fix this info on the site?
Tôi cuối cùng đã giải quyết vấn đề này. Hiện tại, phiên bản mới nhất của react-native-reanimated là "3.0.2", phiên bản này không tương thích với phiên bản mới nhất của react-native-camera. Việc sử dụng phiên bản
"react-native-reanimated": "^2.10.0"
đã giải quyết vấn đề cho tôi sau khi xóa tệp yarn.lock rồiyarn install
xóa lại.
my version is ^2.9.0. when update to 2.10.0 it work fine
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 thenyarn install
again.
thank you, its work for me
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
It worked for me, and I didn't need to update reanimated, just add this line in the Podfile
Hi. I had this issue when running my app on Android device:
LOG Running "viewfinder" with {"rootTag":11}
ERROR system/frame-processors-unavailable: Frame Processors are not enabled!, js engine: hermes
I've installed react-native-worklets-core as it is suggested in the docs (https://www.react-native-vision-camera.com/docs/guides/frame-processors), and I was no longer getting the error mentioned above.
However, my app started to crash / close when launching the camera.
There was no error output, just this:
LOG Running "viewfinder" with {"rootTag":11}
LOG Loading react-native-worklets-core...
LOG Worklets loaded successfully
Module versions:
"react-native": "0.72.4",
"react-native-vision-camera": "^3.0.0",
"react-native-worklets-core": "^0.2.0"
I've deleted node_modules
and package-lock.json
and did a clean re-install of the modules.
After that the app could no longer be launched or built, I was getting the following output:
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-vision-camera:buildCMakeDebug[arm64-v8a]'.
> com.android.ide.common.process.ProcessException: ninja: Entering directory `/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android/.cxx/Debug/4a1m2e2g/arm64-v8a'
[1/1] Linking CXX shared library ../../../../build/intermediates/cxx/Debug/4a1m2e2g/obj/arm64-v8a/libVisionCamera.so
FAILED: ../../../../build/intermediates/cxx/Debug/4a1m2e2g/obj/arm64-v8a/libVisionCamera.so
: && /Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/bin/clang++ --target=aarch64-none-linux-android21 --sysroot=/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot -fPIC -O2 -frtti -fexceptions -Wall -Wno-unused-variable -fstack-protector-all -g -fno-limit-debug-info -Wl,--build-id=sha1 -Wl,--no-rosegment -Wl,--fatal-warnings -Qunused-arguments -Wl,--no-undefined -shared -Wl,-soname,libVisionCamera.so -o ../../../../build/intermediates/cxx/Debug/4a1m2e2g/obj/arm64-v8a/libVisionCamera.so CMakeFiles/VisionCamera.dir/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/cpp/JSITypedArray.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/VisionCamera.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/VideoPipeline.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/PassThroughShader.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/OpenGLContext.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/OpenGLRenderer.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/FrameHostObject.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/FrameProcessorPluginHostObject.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/JSIJNIConversion.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/VisionCameraProxy.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrame.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessorPlugin.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraScheduler.cpp.o /Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/lib/aarch64-linux-android/21/liblog.so -landroid /Users/peter/.gradle/caches/transforms-3/6fe00d6361b0f0c55549aec89a7f6742/transformed/jetified-react-android-0.72.4-debug/prefab/modules/jsi/libs/android.arm64-v8a/libjsi.so /Users/peter/.gradle/caches/transforms-3/6fe00d6361b0f0c55549aec89a7f6742/transformed/jetified-react-android-0.72.4-debug/prefab/modules/reactnativejni/libs/android.arm64-v8a/libreactnativejni.so /Users/peter/.gradle/caches/transforms-3/34c2120d0d3cd8dc97826fc02c9e8fc4/transformed/jetified-fbjni-0.3.0/prefab/modules/fbjni/libs/android.arm64-v8a/libfbjni.so -lGLESv2 -lEGL -latomic -lm && :
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::getWorkletRuntime()
>>> referenced by JFrameProcessor.cpp:37 (/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp:37)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(vision::JFrameProcessor::callWithFrameHostObject(std::__ndk1::shared_ptr<vision::FrameHostObject> const&) const)
>>> referenced by JVisionCameraProxy.cpp:57 (/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp:57)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(vision::JVisionCameraProxy::~JVisionCameraProxy())
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::invokeOnJsThread(std::__ndk1::function<void (facebook::jsi::Runtime&)>&&)
>>> referenced by JFrameProcessor.cpp:50 (/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp:50)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(vision::JFrameProcessor::callWithFrameHostObject(std::__ndk1::shared_ptr<vision::FrameHostObject> const&) const)
>>> referenced by WKTJsiWorklet.h:358 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorklet.h:358)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::WorkletInvoker::~WorkletInvoker())
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::runtimeMappings
>>> referenced by __tree:0 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/__tree:0)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::WorkletInvoker::call(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long))
>>> referenced by __tree:0 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/__tree:0)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::WorkletInvoker::call(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long))
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::invokeOnWorkletThread(std::__ndk1::function<void (RNWorklet::JsiWorkletContext*, facebook::jsi::Runtime&)>&&)
>>> referenced by WKTJsiWorklet.h:361 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorklet.h:361)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::WorkletInvoker::~WorkletInvoker())
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::defaultInstance
>>> referenced by memory:3887 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/memory:3887)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::JsiWorkletContext::getDefaultInstance())
>>> referenced by memory:3887 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/memory:3887)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::JsiWorkletContext::getDefaultInstance())
ld: error: undefined symbol: RNWorklet::JsiHostObject::JsiHostObject()
>>> referenced by WKTJsiWorkletContext.h:31 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorkletContext.h:31)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::JsiWorkletContext::getDefaultInstance())
>>> referenced by WKTJsiWorklet.h:77 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorklet.h:77)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(RNWorklet::JsiWorklet::JsiWorklet(facebook::jsi::Runtime&, facebook::jsi::Value const&))
ld: error: undefined symbol: vtable for RNWorklet::JsiWorkletContext
>>> referenced by WKTJsiWorkletContext.h:31 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorkletContext.h:31)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::JsiWorkletContext::getDefaultInstance())
>>> referenced by WKTJsiWorkletContext.h:31 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorkletContext.h:31)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(RNWorklet::JsiWorkletContext::getDefaultInstance())
>>> the vtable symbol may be undefined because the class is missing its key function (see https://lld.llvm.org/missingkeyfunction)
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::~JsiWorkletContext()
>>> referenced by memory:2252 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/memory:2252)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(std::__ndk1::__shared_ptr_emplace<RNWorklet::JsiWorkletContext, std::__ndk1::allocator<RNWorklet::JsiWorkletContext> >::~__shared_ptr_emplace())
>>> referenced by memory:2252 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/memory:2252)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JFrameProcessor.cpp.o:(std::__ndk1::__shared_ptr_emplace<RNWorklet::JsiWorkletContext, std::__ndk1::allocator<RNWorklet::JsiWorkletContext> >::~__shared_ptr_emplace())
ld: error: undefined symbol: RNWorklet::JsiWorkletContext::JsiWorkletContext(std::__ndk1::basic_string<char, std::__ndk1::char_traits<char>, std::__ndk1::allocator<char> > const&, facebook::jsi::Runtime*, std::__ndk1::function<void (std::__ndk1::function<void ()>&&)>, std::__ndk1::function<void (std::__ndk1::function<void ()>&&)>)
>>> referenced by memory:2278 (/Users/peter/Library/Android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/include/c++/v1/memory:2278)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(vision::JVisionCameraProxy::JVisionCameraProxy(facebook::jni::alias_ref<facebook::jni::detail::JTypeFor<facebook::jni::HybridClass<vision::JVisionCameraProxy, facebook::jni::detail::BaseHybridClass>::JavaPart, facebook::jni::JObject, void>::_javaobject*> const&, facebook::jsi::Runtime*, std::__ndk1::shared_ptr<facebook::react::CallInvoker> const&, facebook::jni::basic_strong_ref<facebook::jni::detail::JTypeFor<facebook::jni::HybridClass<vision::JVisionCameraScheduler, facebook::jni::detail::BaseHybridClass>::JavaPart, facebook::jni::JObject, void>::_javaobject*, facebook::jni::GlobalReferenceAllocator> const&))
ld: error: undefined symbol: RNWorklet::JsiHostObject::~JsiHostObject()
>>> referenced by WKTJsiWorklet.h:79 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorklet.h:79)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(RNWorklet::JsiWorklet::JsiWorklet(facebook::jsi::Runtime&, facebook::jsi::Value const&))
>>> referenced by WKTJsiWorklet.h:74 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWorklet.h:74)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(RNWorklet::JsiWorklet::~JsiWorklet())
ld: error: undefined symbol: RNWorklet::JsiWrapper::wrap(facebook::jsi::Runtime&, facebook::jsi::Value const&, RNWorklet::JsiWrapper*)
>>> referenced by WKTJsiWrapper.h:62 (/Users/peter/Projects/viewfinder/node_modules/react-native-worklets-core/android/build/headers/rnworklets/react-native-worklets-core/WKTJsiWrapper.h:62)
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(RNWorklet::JsiWorklet::createWorklet(facebook::jsi::Runtime&, std::__ndk1::shared_ptr<facebook::jsi::Function>))
ld: error: undefined symbol: RNWorklet::JsiHostObject::get(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&)
>>> referenced by JVisionCameraProxy.cpp
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(vtable for RNWorklet::JsiWorklet)
ld: error: undefined symbol: RNWorklet::JsiHostObject::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)
>>> referenced by JVisionCameraProxy.cpp
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(vtable for RNWorklet::JsiWorklet)
ld: error: undefined symbol: RNWorklet::JsiHostObject::getPropertyNames(facebook::jsi::Runtime&)
>>> referenced by JVisionCameraProxy.cpp
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(vtable for RNWorklet::JsiWorklet)
ld: error: undefined symbol: typeinfo for RNWorklet::JsiHostObject
>>> referenced by JVisionCameraProxy.cpp
>>> CMakeFiles/VisionCamera.dir/src/main/cpp/frameprocessor/java-bindings/JVisionCameraProxy.cpp.o:(typeinfo for RNWorklet::JsiWorklet)
clang-12: error: linker command failed with exit code 1 (use -v to see invocation)
ninja: build stopped: subcommand failed.
C++ build system [build] failed while executing:
/Users/peter/Library/Android/sdk/cmake/3.22.1/bin/ninja \
-C \
/Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android/.cxx/Debug/4a1m2e2g/arm64-v8a \
VisionCamera
from /Users/peter/Projects/viewfinder/node_modules/react-native-vision-camera/android
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 14s
error Failed to install the app.
info Run CLI with --verbose flag for more details.
I uninstalled react-native-worklets-core
, removed react-native-worklets-core
from babel.config.js
, removed worklet
notation from useFrameProcessor()
handler and tried to launch the app, but I am back from where I started -
I get system/frame-processors-unavailable: Frame Processors are not enabled!, js engine: hermes
error.
I am not using Reanimated.
App and camera works fine if I am not using frameProcessor
property on <Camera />
.
I am testing this on a device with Android 10, I'll try to test on other Android versions.
any solutions so far , am still facing this issue in both IOS and Android
The same with w4t3r-45
"react-native": "0.72.5",
"react-native-vision-camera": "3.0.0",
"react-native-reanimated": "3.0.0",
guys the solution was , installing reanimated package and also :
@w4t3r-45 Hi. Could you please provide your package.json
file and Android version that you use for testing?
@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",
@w4t3r-45 Thank you, I will try your solution.
@peterdee just let me know if you have any issues.
@w4t3r-45 , I have tried your solution but I am still getting the same issue.
ReanimatedError: Property '__scanCodes' doesn't exist, js engine: reanimated
"react-native": "0.71.4", "react-native-reanimated": "^3.5.4", "react-native-vision-camera": "^2.16.1",
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
still breaking in IOS 17 The Camera is not ready yet! Wait for the onInitialized() callback!
Still breaking on iOS 17. Please help!
"react-native-vision-camera": "^2.16.4",
"react-native": "0.70.7",
The same issue after updating to iOS 17.
"react-native-vision-camera": "^2.15.2",
"react-native": "0.70.6",
"react-native-reanimated": "2.14.4"
What were you trying to do?
Using this + the QR scanner library for QR detection.
Reproduceable Code
What happened instead?
frame-processor/unavailable: Frame Processors are not enabled.
The app works perfectly after a completely clean start - and after code changes (or bundle refresh) I can't use the frameProcessors function at all.
I'm just guessing here - I disabled the
assertFrameProcessorsEnabled
call innode_modules/react-native-vision-camera/src/Camera.tsx
and I get the error:So, I can only guess (a proper guess) that this library perhaps is not tearing down views correctly, so next run they are not initialised correctly?
I've managed to find a temporary fix (it stopped working after a while) by making the following change:
Relevant log output
No response
Device
OnePlus 7 Pro (Android 12)
VisionCamera Version
2.9.4
Additional information