❓ How to create frame for scanning QR code?

[nobodyzzz01]

Question

React native Version: 0.72.7

What I tried

I tried using frame processor but it didn't work And I tried to calculate the coordinates of the frame to receive the correct QR code but failed!!!

const codeScanner = useCodeScanner({ codeTypes: ['qr', 'ean-13'], onCodeScanned: (codes: Code[]) => { const pxDiff = Math.max(PixelRatio.get() - 1, 1);

  const qrCodeX = codes[0]?.frame?.x ?? 0;
  const qrCodeY = codes[0]?.frame?.y ?? 0;

  const qrCodeWidth = codes[0]?.frame?.width ?? 0;
  const qrCodeHeight = codes[0]?.frame?.height ?? 0;

  const isQRCodeInsideOverlay =
    qrCodeX >= PosX &&
    qrCodeY >= PosY &&
    qrCodeX + qrCodeWidth <= widthHole + PosX &&
    qrCodeY + qrCodeHeight <= heightHole + PosY;
  setIsFrame(isQRCodeInsideOverlay);
  if (isScannerActive) {
    scannerQRRef.current = codes.map(itemQR => itemQR.value).toString();
    console.log(`Scanned ${codes.length} codes!\n Data Scanned: ${codes}`);
    console.log(`Scanned ${scannerQRRef.current}`);
    setScannerActive(false);
    if (scannerQRRef.current) {
      makeQRScannerRequest(scannerQRRef.current);
    }
    scannerQRRef.current = null;
  } else {
    setScannerActive(false);
    console.log('Scanner can only be started within the frame area.');
    if (isScannerActive && !isQRCodeInsideOverlay) {
      Alert.alert(
        'ERROR',
        'Scanner can only be started within the frame area.',
      );
    }
  }
},

});

<ReanimatedCamera style={[StyleSheet.absoluteFill]} device={device} onError={onError} isActive={isActive} format={format} fps={fps} zoom={0} codeScanner={codeScanner} exposure={0} />

VisionCamera Version

3.6.8

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.

[xulihang]

I use react-native-svg to draw the overlay and pass a scan region argument to the frame processor to crop the image before processing. You can find an example here: https://github.com/tony-xlh/react-native-mrz-scanner/blob/main/src/screens/Scanner.tsx

[nobodyzzz01]

I tried using regionOfInterest with coordinates taken from frame but it seems regionOfInterest doesn't work

[abdelhakimrafik]

@xulihang @mrousavy After investigating the Android codebase, I couldn't find any part where you handle the regionOfInterest for the CodeScanner

[mrousavy]

I documented this wrong - regionOfInterest in the built-in CodeScanner only works on iOS. On Android, this is not available. https://github.com/mrousavy/react-native-vision-camera/commit/9ecc09cfe46033aca410891e51058e82ee081b1f

If you want this behaviour on Android, use Frame Processors instead with a custom Frame Processor Plugin for QR code scanning, then crop the Frame before using some Frame Processor Plugin to resize/crop it.

[mrousavy]

Btw., if you use Frame Processors and need to resize the Frame, I just now released vision-camera-resize-plugin - a plugin to resize Frames to any size and convert them to any RGB layout (RGB, BGR, ARGB, BGRA, ...)! 🥳

[thuydao]

Btw., if you use Frame Processors and need to resize the Frame, I just now released vision-camera-resize-plugin - a plugin to resize Frames to any size and convert them to any RGB layout (RGB, BGR, ARGB, BGRA, ...)! 🥳

Which is type of resized? is it frame?