How to limit Scan Area ~expo-barcode-scanner

I was creating an app for iOS using expo, where I had to scan multiple QR codes but the problem was the whole camera acted as a scanner so it scanned the first QR code that was visible in the camera. I tried different libraries such as react-native-vision-camera and react-native-camera-kit, but no luck. Then I came up with a different approach.

const isQrCodeAtDesiredDistance = (qrSize, minSize) => {
    return qrSize >= minSize;
  };

  const isQrCodeCentered = (cornerPoints, cameraViewSize) => {
    // Assuming cornerPoints is an array of {x, y} objects
    // and cameraViewSize is an object {width, height}

    const centerX = cameraViewSize.width / 2;
    const centerY = cameraViewSize.height / 2;

    // Determine the bounds of the QR code
    const qrBounds = {
      minX: Math.min(...cornerPoints.map((point) => point.x)),
      maxX: Math.max(...cornerPoints.map((point) => point.x)),
      minY: Math.min(...cornerPoints.map((point) => point.y)),
      maxY: Math.max(...cornerPoints.map((point) => point.y)),
    };

    // Check if the center of the QR code is within a certain range of the camera's center
    const qrCenterX = (qrBounds.minX + qrBounds.maxX) / 2;
    const qrCenterY = (qrBounds.minY + qrBounds.maxY) / 2;

    const tolerance = 40; // pixels - you can adjust this value
    return (
      Math.abs(centerX - qrCenterX) < tolerance &&
      Math.abs(centerY - qrCenterY) < tolerance
    );
  };

  const handleBarCodeScanned = async ({ type, data, cornerPoints }) => {
    const cameraViewSize = {
      width: Dimensions.get("window").width,
      height: Dimensions.get("window").height,
    };

    // Calculate the size of the QR code
    const qrWidth =
      Math.max(...cornerPoints.map((point) => point.x)) -
      Math.min(...cornerPoints.map((point) => point.x));
    const qrHeight =
      Math.max(...cornerPoints.map((point) => point.y)) -
      Math.min(...cornerPoints.map((point) => point.y));
    const qrSize = Math.sqrt(qrWidth * qrWidth + qrHeight * qrHeight); // Approximate size

    const minSize = 150;

    if (
      isQrCodeCentered(cornerPoints, cameraViewSize) &&
      isQrCodeAtDesiredDistance(qrSize, minSize)
    ) {
        // QR code is in center, scan the code and perform any task
       }
    else {
        //QR code is not centered, do nothing
         }
}

It contains functions to check if the QR code is at the desired size and properly centered within the camera's view. Let's break down the key parts:

1. isQrCodeAtDesiredDistance Function: This function determines if the QR code is large enough to be scanned. It compares the size of the QR code (qrSize) with a minimum size (minSize). If the QR code is equal to or larger than the minimum size, the function returns true, indicating it's big enough.

2. isQrCodeCentered Function: This function checks if the QR code is centered in the camera's view. It takes the corner points of the QR code and the size of the camera view as inputs. By calculating the center of the QR code and comparing it with the center of the camera view, the function determines if the QR code is within a certain range (tolerance) of the center. If it is, the function returns true.

3. handleBarCodeScanned Function: This is the main function that gets called when a QR code is scanned. It calculates the size of the QR code and then checks two things:

   • If the QR code is centered using the isQrCodeCentered function.

   • If the QR code is at the desired distance using the isQrCodeAtDesiredDistance function.

If both conditions are met, it means the QR code is in an ideal position for processing (like decoding its information). If not, the function does nothing, implying the QR code is either too small or not centered, and hence, not ready for processing.