Property 🐛 __scanQRCodes doesn't exist!

[michealChin]

What were you trying to do?

I follow the tutorial on how to create custom frame processor plugins from the docs/guides but I got the Property __scanQRCodes doesn't exist error. I was trying to implement the plugin for the frame processor inside the same project code, so I try to follow the code from Colorwaver where the __getColorPalette frame processor plugin also inside the same project code. However I still end up with the same error message.

Reproduceable Code

babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [    
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanQRCodes'],
      },
   ],
  ],
};

index.ts
import type { Frame } from 'react-native-vision-camera'

declare global {
    var __scanQRCodes: (
      frame: Frame,
    ) => string[];
  }
/**
 * Scans QR codes.
 */
export function scanQRCodes (frame: Frame): string[] {
  'worklet'
  return __scanQRCodes(frame)
}

App.tsx
import { scanQRCodes } from '../../../scanCard/src/index'
const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
     const qrCode =scanQRCodes (frame);
 }, [])

What happened instead?

It pop up the Property '__scanQRCodes doesn't exist error message!

Relevant log output

Property '__scanQRCodes' doesn't exist, js engine: hermes

Device

Android 12

VisionCamera Version

2.15.4

Additional information

• I am using Expo
• 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.

[zzz08900]

I was trying to implement the plugin for the frame processor inside the same project code
From my experience, don't do that if you are not an Android + js developer. For rookies a better approach would be, create a new react native project folder for testing and use local dependency to install your WIP frame processor plugin, and you could setup rsync or something similar to sync the files.

A few hacks were needed to make things work if you put both in same project folder and you probably don't want to dive into that while building your frame processor plugin.

[fukemy]

hi did u solved this?

[fukemy]

ok I found solution, instead of __beautifulFace just write FrameProcessorPlugins.beautifulFace(frame)

[rafaelmotta]

ok I found solution, instead of __beautifulFace just write FrameProcessorPlugins.beautifulFace(frame)

where did you import FrameProcessorPlugins? I tried importing from react-native-vision-camera, but isn't defined.

[fukemy]

which version you using? I am using v3

[rafaelmotta]

ah okay, i'm using v2

[myselfuser1]

Try this https://www.youtube.com/playlist?list=PLQhQEGkwKZUrempLnmxjt7ZCZJu1W3p2i

[mrousavy]

Hey! I've rewritten the entire Android codebase of VisionCamera from CameraX to Camera2 in the efforts of ✨ VisionCamera V3.

I just now completed the Camera2 rewrite and I believe the core structure is running, but there might be some edge cases to iron out. Can you try and test the PR #1674 for me to see if you can still reproduce this issue here?

Here's an instruction on how you can test that: #1674 (comment)

If the issue cannot be reproduced with that version/PR anymore, then hoorayy, I fixed it! 🎉
Otherwise please let me know and I'll keep this issue open to keep track of it.

Thank you!

[mrousavy]

Hey!

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

Try upgrading to V3 if you can, it has a much more stable yet flexible foundation.

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.