🐛 scanBarcodes returns undefined upon scanning a QR code

[SirFitz]

What were you trying to do?

I'm trying to scan a QR Code

Any assistance would be appreciated. Debugger mode is disabled, that solution was suggested in another issue but doesn't make any difference to the result.

Versions:
OS Version: Android
Android API Version: 33
react-native: 0.71.7
react-native-vision-camera: 2.15.4
vision-camera-code-scanner: 0.2.0
react-native-reanimated: 2.10.0

Hermes: disabled

Reproduceable Code

import React, { memo, useEffect, useState } from 'react';
import { runOnJS } from 'react-native-reanimated';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner';
import { Container } from './styles';

interface QRReaderProps {
  testID?: string;
}

const QRReader: React.FC<QRReaderProps> = ({ testID }) => {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;
  const [barcodes, setBarcodes] = useState<Barcode[]>([]);

  useEffect(() => {
    console.log('barcodesState', barcodes); // undefined
  }, [barcodes]);

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

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

  return (
    <Container testID={testID}>
      {device && hasPermission && (
        <Camera
          style={{ width: '100%', height: '100%', position: 'absolute' }}
          device={device}
          isActive
          frameProcessor={frameProcessor}
          frameProcessorFps={1}
        />
      )}
    </Container>
  );
};

export { QRReader };
export default memo(QRReader);

QRReader.defaultProps = {
  testID: 'qrreader-testID',
};

What happened instead?

Issue:
The return variable from the scanBarcodes function returns:

1. an empty array when no QR codes are in frame
2. undefined when a QR code is in frame

Relevant log output

barcodesState: undefined

Device

Google Pixel 6

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.

[myselfuser1]

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

[SohaibKtb]

+1

[metrix-hu]

Hi guys, for some reason the resulting objects are not transferable between the worklet and main thread in this way. I tried with the exact same code and also tried with the code scanner plugins included hook, but that looks like the same thing as this. The only thing that worked for me is using shared values from react native reanimated:

import {useSharedValue} from "react-native-reanimated";

const codes = useSharedValue<Barcode[]>([]);
const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    codes.value = scanBarcodes(frame, [BarcodeFormat.QR_CODE]);
  }, []);

[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.