Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 #1833

fvalles · 2023-09-22T07:51:19Z

What's happening?

When using react native vision camera frameProcessor property in order to scan QR codes (combined with vision-camera-code-scanner), I get the following android error when navigating to the screen that renders the camera view (app builds correctly):

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)

and then the app dies.

Fun fact is that without using the frameProcessor prop, everything works fine.

This error happens without installing the library react-native-worklets-core and adding to babel.config.js: ['react-native-worklets-core/plugin']

On the other hand, If I add react-native-worklets-core and its babel config line, I get a different error and I can't even build the app:

What went wrong:
Could not determine the dependencies of task ':react-native-worklets-core:compileDebugAidl'.
> Could not resolve all task dependencies for configuration ':react-native-worklets-core:debugCompileClasspath'.
  > Could not find com.facebook.react:react-android:.
    Required by:
        project :react-native-worklets-core
  > Could not find com.facebook.react:hermes-android:.
    Required by:
        project :react-native-worklets-core

I have looked at this two similar bug reports and tried everything explained there but the issue persists and I am not finding a solution..
#1463
#1097

Reproduceable Code

import { useIsFocused } from '@react-navigation/native'
import { BarcodeFormat, Barcode, scanBarcodes } from 'vision-camera-code-scanner'

import React, { useEffect, useState } from 'react'
import { StyleSheet } from 'react-native'
import { runOnJS } from 'react-native-reanimated'
import { useCameraDevices, useFrameProcessor } from 'react-native-vision-camera'
import { Camera } from 'react-native-vision-camera'

import { LoaderComponent } from '#components/loader'

export const QRReader = () => {
  const [hasPermission, setHasPermission] = React.useState(false)
  const devices = useCameraDevices()
  const device = devices.back
  const [barcodes, setBarcodes] = useState<Barcode[]>([])
  const isFocused = useIsFocused()

  console.log('hasPermission', hasPermission)

  useEffect(() => {
    console.log('barcodes', barcodes)
  }, [barcodes])

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE])
    runOnJS(setBarcodes)(detectedBarcodes)
  }, [])

  useEffect(() => {
    const setCameraPermission = async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')

      const cameraPermission = await Camera.getCameraPermissionStatus()
      console.log('cameraPermission', cameraPermission)
    }

    setCameraPermission()
  }, [])

  if (device == null) {
    return <LoaderComponent />
  }

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={isFocused}
      frameProcessor={frameProcessor}
      frameProcessorFps={5}
    />
  )
}

Relevant log output

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)

FATAL EXCEPTION: pool-28-thread-1
Process: myApp.dev, PID: 22643
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)
	at com.mrousavy.camera.CameraView.frameProcessorCallback(Native Method)
	at com.mrousavy.camera.CameraView.configureSession$lambda-7$lambda-6(CameraView.kt:491)
	at com.mrousavy.camera.CameraView.$r8$lambda$cqtIchEZdTZaV3R0UUrDpVbB1Es(Unknown Source:0)
	at com.mrousavy.camera.CameraView$$ExternalSyntheticLambda1.analyze(Unknown Source:2)
	at androidx.camera.core.ImageAnalysis.lambda$setAnalyzer$2(ImageAnalysis.java:476)
	at androidx.camera.core.ImageAnalysis$$ExternalSyntheticLambda0.analyze(Unknown Source:2)
	at androidx.camera.core.ImageAnalysisAbstractAnalyzer.lambda$analyzeImage$0$androidx-camera-core-ImageAnalysisAbstractAnalyzer(ImageAnalysisAbstractAnalyzer.java:285)
	at androidx.camera.core.ImageAnalysisAbstractAnalyzer$$ExternalSyntheticLambda1.run(Unknown Source:14)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1137)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:637)
	at java.lang.Thread.run(Thread.java:1012)

Camera Device

{
  "formats": [],
  "maxZoom": 10,
  "minZoom": 1,
  "supportsLowLightBoost": false,
  "supportsDepthCapture": false,
  "neutralZoom": 1,
  "supportsFocus": true,
  "supportsRawCapture": false,
  "hasFlash": false,
  "name": "back (0)",
  "supportsParallelVideoProcessing": false,
  "isMultiCam": false,
  "hasTorch": false,
  "devices": [
    "telephoto-camera"
  ],
  "position": "back",
  "id": "0"
}

Package json dependencies:

{
  "dependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@casl/ability": "^6.1.1",
    "@casl/react": "^3.1.0",
    "@datadog/mobile-react-native": "^1.0.0",
    "@datadog/mobile-react-navigation": "^1.0.0",
    "@formatjs/intl-datetimeformat": "^6.2.0",
    "@formatjs/intl-getcanonicallocales": "^2.0.4",
    "@formatjs/intl-locale": "^3.0.6",
    "@formatjs/intl-numberformat": "^8.1.3",
    "@formatjs/intl-pluralrules": "^5.1.3",
    "@nunogois/proxy-client-react-native": "^0.0.28",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/netinfo": "^9.3.0",
    "@react-native-firebase/app": "^14.9.3",
    "@react-native-firebase/database": "^14.9.3",
    "@react-native-firebase/messaging": "^14.9.3",
    "@react-native-masked-view/masked-view": "0.2.0",
    "@react-native-picker/picker": "^2.4.4",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.4.4",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/native-stack": "^6.8.0",
    "@segment/analytics-react-native": "^2.7.1",
    "@segment/sovran-react-native": "^0.4.4",
    "@sentry/react-native": "^4.2.4",
    "consistencss": "^1.7.0",
    "date-fns-tz": "^1.3.6",
    "deprecated-react-native-prop-types": "2.2.0",
    "formik": "^2.2.9",
    "i18next": "^21.9.1",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.4",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.1.0",
    "react-i18next": "^11.18.5",
    "react-native": "0.70.9",
    "react-native-autolink": "^4.0.0",
    "react-native-calendars": "^1.1288.2",
    "react-native-code-push": "^7.0.5",
    "react-native-device-info": "^10.0.2",
    "react-native-dotenv": "^3.3.1",
    "react-native-email-link": "^1.14.1",
    "react-native-error-boundary": "^1.1.15",
    "react-native-eva-icons": "^1.3.1",
    "react-native-event-listeners": "^1.0.7",
    "react-native-fast-image": "^8.6.0",
    "react-native-flipper": "^0.162.0",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-image-picker": "^5.4.2",
    "react-native-keyboard-manager": "4.0.13-17",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-localize": "^2.2.3",
    "react-native-mmkv": "2.5.1",
    "react-native-mmkv-flipper-plugin": "^1.0.0",
    "react-native-modal": "^13.0.1",
    "react-native-offline": "^6.0.0",
    "react-native-pager-view": "^5.4.25",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^2.13.0",
    "react-native-restart": "^0.0.24",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-screens": "^3.17.0",
    "react-native-select-dropdown": "^3.3.3",
    "react-native-shadow-2": "6.0.5",
    "react-native-share": "^7.9.0",
    "react-native-snackbar": "^2.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.3.0",
    "react-native-switch-selector-fix": "^2.0.4",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-vision-camera": "^2.16.1",
    "react-native-walkthrough-tooltip": "^1.3.1",
    "react-native-webp-format": "^1.1.2",
    "react-native-webview": "^11.23.0",
    "react-query": "^3.39.2",
    "styled-components": "^5.3.6",
    "ts-jest": "^27",
    "unleash-proxy-client": "^2.3.0",
    "vision-camera-code-scanner": "0.2.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.18.9",
    "@commitlint/cli": "^17.1.2",
    "@commitlint/config-conventional": "^17.1.0",
    "@react-native-community/eslint-config": "^3.1.0",
    "@testing-library/react-native": "^11.1.0",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@types/jest": "^29.0.0",
    "@types/lodash": "^4.14.184",
    "@types/react": "^17.0.43",
    "@types/react-native": "^0.67.4",
    "@types/react-native-auth0": "^2.13.1",
    "@types/react-native-calendars": "^1.1264.3",
    "@types/react-native-restart": "^0.0.14",
    "@types/react-native-share": "^3.3.3",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components-react-native": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^5.36.0",
    "appcenter-cli": "^2.11.0",
    "babel-jest": "^27",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest": "^27.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.1",
    "jest": "^27",
    "metro-react-native-babel-preset": "0.72.3",
    "prettier": "^2.7.1",
    "react-native-flipper-performance-plugin": "^0.3.1",
    "react-test-renderer": "18.1.0",
    "standard-version": "^9.5.0",
    "typescript": "^4.8.2"
  },
}

Device

Android Pixel 4 api 31

VisionCamera Version

^2.16.1

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

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:

PranatoshRoy · 2023-09-22T12:01:36Z

I have the same issue while using vision-camera-code-scanner. need help

fvalles · 2023-09-24T12:23:07Z

Making following changes should fix the issue - #1307 (comment)

The thread you mentioned is for ios and mine is an issue with android devices

JorgeQuevedoC · 2023-09-27T13:44:54Z

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:

"react-native-vision-camera": "2.15.6"
"react-native-reanimated": "2.17.0"
"vision-camera-code-scanner": "github:jorgebrunetto/vision-camera-code-scanner"

You can try and see if this works for you too

fvalles · 2023-09-27T14:09:41Z

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:

"react-native-vision-camera": "2.15.6" "react-native-reanimated": "2.17.0" "vision-camera-code-scanner": "github:jorgebrunetto/vision-camera-code-scanner"

You can try and see if this works for you too

Ey Jorge! And what is the "vision-camera-code-scanner” version you are using? That field is empty in your previous response

JorgeQuevedoC · 2023-09-27T14:47:27Z

It is a fork that the team I am working with was using. Probably using the one you have right now won't impact. The breaking change is in "react-native-vision-camera" from 2.15.6 to 2.16.1 because they changed from CameraX to Camera2

fvalles · 2023-09-28T07:13:06Z

It is a fork that the team I am working with was using. Probably using the one you have right now won't impact. The breaking change is in "react-native-vision-camera" from 2.15.6 to 2.16.1 because they changed from CameraX to Camera2

you just rock it man! With those libraries versions everything is working well in my android device!! 😁

Thanks a lot for your help! 🫶

Now I will check if everything works on the iOS side but I am confident that it will!

drastus · 2023-09-29T13:28:52Z

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:

"react-native-vision-camera": "2.15.6" "react-native-reanimated": "2.17.0" "vision-camera-code-scanner": "github:jorgebrunetto/vision-camera-code-scanner"

You can try and see if this works for you too

@JorgeQuevedoC what version of React Native are you using?

fvalles · 2023-09-29T13:44:35Z

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:
"react-native-vision-camera": "2.15.6" "react-native-reanimated": "2.17.0" "vision-camera-code-scanner": "github:jorgebrunetto/vision-camera-code-scanner"
You can try and see if this works for you too

@JorgeQuevedoC what version of React Native are you using?

Ey @drastus! In my case I am using the version 0.70.9 and with the libraries versions that @JorgeQuevedoC suggested everything is working now! 😄

JorgeQuevedoC · 2023-09-29T14:33:00Z

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:
"react-native-vision-camera": "2.15.6" "react-native-reanimated": "2.17.0" "vision-camera-code-scanner": "github:jorgebrunetto/vision-camera-code-scanner"
You can try and see if this works for you too

@JorgeQuevedoC what version of React Native are you using?

"react-native": "0.69.7",

mrousavy · 2023-09-30T10:24:01Z

Hey this should be fixed in V3

mrousavy · 2023-10-06T10:14:24Z

Hey!

JFYI; VisionCamera V3 now includes a QR/Barcode Scanner! 😍 Check out the CodeScanner Documentation 🚀

If you appreciate me dedicating my free time to improving VisionCamera and implementing features like the Code Scanner, please consider sponsoring me on GitHub 💖 to show your support.

hardik-javascript · 2023-10-17T09:24:17Z

@mrousavy VisionCamera V3 doesn't work with react-native: 0.70.1 as android build fails.

mrousavy · 2023-10-17T09:25:07Z

okay 👍

qamarcloud · 2023-12-12T10:05:17Z

I want to perform all of the functions, perform OCR, do the barcode scanning and take a photo when I open a camera. Is it possible in vision-camera-3?

nc-hung · 2023-12-21T07:56:59Z

[V3] What you need can be found here:
https://www.react-native-vision-camera.com/docs/guides/frame-processor-plugin-list

[V3] I resolved the frameProcessor error through this note. Hope someone will need it
#1776 (comment)

arazaq917 · 2024-09-02T11:35:17Z

vision-camera-code-scanner

Hi @qamarcloud
did you find any solution to perform all at one place?

fvalles added the 🐛 bug Something isn't working label Sep 22, 2023

fvalles changed the title 🐛 Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 Sep 22, 2023

mrousavy closed this as completed Sep 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 #1833

Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 #1833

fvalles commented Sep 22, 2023 •

edited

Loading

PranatoshRoy commented Sep 22, 2023

fvalles commented Sep 24, 2023

JorgeQuevedoC commented Sep 27, 2023 •

edited

Loading

fvalles commented Sep 27, 2023

JorgeQuevedoC commented Sep 27, 2023

fvalles commented Sep 28, 2023

drastus commented Sep 29, 2023

fvalles commented Sep 29, 2023

JorgeQuevedoC commented Sep 29, 2023

mrousavy commented Sep 30, 2023

mrousavy commented Oct 6, 2023

hardik-javascript commented Oct 17, 2023 •

edited

Loading

mrousavy commented Oct 17, 2023

qamarcloud commented Dec 12, 2023 •

edited

Loading

nc-hung commented Dec 21, 2023

arazaq917 commented Sep 2, 2024

Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 #1833

Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛 #1833

Comments

fvalles commented Sep 22, 2023 • 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

PranatoshRoy commented Sep 22, 2023

fvalles commented Sep 24, 2023

JorgeQuevedoC commented Sep 27, 2023 • edited Loading

fvalles commented Sep 27, 2023

JorgeQuevedoC commented Sep 27, 2023

fvalles commented Sep 28, 2023

drastus commented Sep 29, 2023

fvalles commented Sep 29, 2023

JorgeQuevedoC commented Sep 29, 2023

mrousavy commented Sep 30, 2023

mrousavy commented Oct 6, 2023

hardik-javascript commented Oct 17, 2023 • edited Loading

mrousavy commented Oct 17, 2023

qamarcloud commented Dec 12, 2023 • edited Loading

nc-hung commented Dec 21, 2023

arazaq917 commented Sep 2, 2024

fvalles commented Sep 22, 2023 •

edited

Loading

JorgeQuevedoC commented Sep 27, 2023 •

edited

Loading

hardik-javascript commented Oct 17, 2023 •

edited

Loading

qamarcloud commented Dec 12, 2023 •

edited

Loading