Running out of options | Unable to detect QR code similar to the built-in camera app in the phone

[neilanthonyte]

Question

The QR code above can be detected using the camera built-in in the phone; however, when I use the react-native-vision-camera . . nothing is being detected although it can detect other QR codes but I need library to work with the QR code above as well. . please help thanks

What I tried

I already tried these configs but still not detecting the QR code above:

const device = useCameraDevice('back', {
    physicalDevices: [
      'ultra-wide-angle-camera',
      'wide-angle-camera',
      'telephoto-camera'
    ],
    supportsFocus: true,
    supportsLowLightBoost: true,
    supportsDepthCapture: true
  });
  const format = useCameraFormat(device, [
    {enableDepthData: true},
    {enableHighQualityPhotos: true},
    {enablePortraitEffectsMatteDelivery: true},
    {autoFocusSystem: true},
    {supportsFocus: true},
    {supportsLowLightBoost: true},
    {supportsDepthCapture: true},
    {videoStabilizationModes: 'cinematic-extended'},
    {supportsPhotoHdr: true}
  ]);

VisionCamera Version

3.9.0

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar questions in the issues page as well as in the discussions page and found none.

[Dingenis]

hey @neilanthonyte, did you follow the guide on the website regarding QR scanning? From your code I can't see if you pass in the codeScanner into the Camera component.

[neilanthonyte]

hi @Dingenis thanks for the response . . yes I did . . here is the component

const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned: (codes) => {
      onScanFinished({data: codes[0].value});
      onClose();
    }
  })

<Camera 
                  exposure={camera.current ? 1 : 0}
                  ref={camera}
                  focusable={true}
                  codeScanner={codeScanner} 
                  device={device} 
                  format={format}
                  enableDepthData={true}
                  enableHighQualityPhotos={true}
                  pixelFormat='native'
                  style={StyleSheet.absoluteFill}
                  isActive={show} />

[Dingenis]

Mhh weird! Maybe you could use a different QR/barcode to scan? Could be that this specific code doesn't work too well.

[neilanthonyte]

yeah that's what I thought @Dingenis the weird thing is that . . i tried QR code checker and it managed to scan the code and get the value.

the QR code also works when I scan it using the built-in camera app on the phone

[Dingenis]

Mhhh I get that 🤔 Maybe you could check if the QR scanner in your app works at all by just trying to scan a bunch of codes from the internet. That way, you could narrow down the cause.

[neilanthonyte]

hi @Dingenis yes upon testing several QR codes it works with the normal QR code design (white background) . . our current QR code design has black background

. . could that be the reason why the scanner can't detect the QR code? if so do you have an idea as to why the built-in camera app can detect the QR code with black background?

[Dingenis]

hey @neilanthonyte, I am not sure. This library uses Google MLKit for QR/barcodes, maybe it could be related to this: https://github.com/googlesamples/android-vision/issues/62

[xulihang]

There should be a white quiet zone around the QR code or the library may not be able to detect it.

You can also use other advanced barcode reader to read it like this one: https://github.com/tony-xlh/vision-camera-dynamsoft-barcode-reader/

[neilanthonyte]

@Dingenis yep definitely related . . :) thanks so much for the reference.

[neilanthonyte]

@xulihang thank you so much for the response . . I will definitely try your suggestion and post an update here on the result.

[mrousavy]

Hey - I use the MLKit library under the hood. If you enabled it in gradle.properties (as the guide in the docs suggests) and it still doesn't work, there is nothing I can do.

Maybe try using one of the Frame Processor plugins, those are more flexible and might detect more stuff or work in different environemnts - the goal of the CodeScanner is to be a simple easy to use installation.