bug: QR Code scan doesn't work for qr codes with over ~1600 characters

[andyrooc23]

Plugin(s)

• [X] Barcode Scanning
• [ ] Face Detection
• [ ] Face Mesh Detection
• [ ] Selfie Segmentation
• [ ] Translation

Version

5.4.0

Platform(s)

• [X] Android
• [X] iOS
• [ ] Web

Current behavior

Scanner is working great up until a certain point where the density of the QR code becomes unreadable. That happens around the 1600 character mark

Expected behavior

Scans qr code

Reproduction

https://github.com/robingenz/capacitor-mlkit-plugin-demo

Steps to reproduce

Set zoom ratio to ANY value

Other information

No response

Capacitor doctor

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 6.1.2 @capacitor/core: 6.1.2 @capacitor/android: 6.1.2 @capacitor/ios: 6.1.2

Installed Dependencies:

@capacitor/cli: 5.0.0 @capacitor/android: 5.0.0 @capacitor/ios: 5.0.0 @capacitor/core: 5.0.0

[success] iOS looking great! 👌

Before submitting

• [X] I have read and followed the bug report guidelines.
• [X] I have attached links to possibly related issues and discussions.
• [X] I understand that incomplete issues (e.g. without reproduction) are closed.

[robingenz]

Please provide a sample barcode.

[andyrooc23]

[robingenz]

Unfortunately, I cannot reproduce your problem:

https://github.com/user-attachments/assets/886aa1a3-5729-4dca-a976-92e35315b938

[andyrooc23]

I can't share our actual code repo (ITAR issues) which is why I linked the sample one... Maybe you could take a look at this excerpt and try to explain why it isn't catching? Our app isn't even detecting qr codes at all after around 1640 characters.

 /**
   * Opens the barcode scanner to scan a qr code to add an instrument
   * @returns {void}
   */
  public async openAddInstrumentQr() {
    BarcodeScanner.isSupported().then((result) => {
      this.isSupported = result.supported;
      BarcodeScanner.setZoomRatio({ zoomRatio: 3 });
    });
    this.scan();
  }

/**
   * Parses the qr code and adds the instrument to the instruments array
   * Also displays an alert with the instrument information and prompts the user to add the instrument
   * @returns {void}
   */
  public async scan(): Promise<void> {
    const granted = await this.requestPermissions();
    if (!granted) {
      const alert = await this.alertController.create({
        header: 'Permission denied',
        message: 'Please grant camera permission to use the barcode scanner.',
        buttons: ['OK'],
      });
      await alert.present();
      return;
    }

    var barcodeScan = await BarcodeScanner.scan();

    var barcodeMap = this.parseCode(barcodeScan.barcodes);

    if (barcodeMap.size === 0) {
      const alert = await this.alertController.create({
        header: 'Qr Code Error',
        message:
          'Qr code not in the correct format.\n' +
          'Please scan a qr code from the Calibration Service Advisor Application.\n ' +
          'Qr code data was as follows:\n' +
          barcodeScan.barcodes[0].rawValue,
        buttons: [
          {
            text: 'Okay',
            role: 'confirm',
            handler: () => {
              console.log('Alert confirmed');
            },
          },
        ],
      });
      await alert.present();
    } else {
      const model = barcodeMap.get('Model');
      const serial = barcodeMap.get('Serial');
      const manufacturer = 'Keysight Technologies';

      const alert = await this.alertController.create({
        header: 'Found Following Instrument:',
        message: 'Model: ' + model + ' Serial: ' + serial,
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {
              console.log('Alert canceled');
            },
          },
          {
            text: 'Add Instrument',
            role: 'confirm',
            handler: () => {
              this.addInstrument({
                modelNumber: model || '',
                serialNumber: serial || '',
                manufacturer: manufacturer || '',
                imageURL: 'https://via.placeholder.com/150',
              });
              console.log('Alert confirmed');
            },
          },
        ],
      });
      await alert.present();
    }
  }

/**
   * Requests camera permissions
   * @returns {Promise<boolean>} - Returns a promise that resolves to a boolean indicating if the camera permission was granted
   */
  async requestPermissions(): Promise<boolean> {
    const { camera } = await BarcodeScanner.requestPermissions();
    return camera === 'granted' || camera === 'limited';
  }

Would love ANY help you could possibly give

[robingenz]

I have over 30 plugins to maintain and very limited time. Therefore I need a minimal, reproducible example to be able to help you. I can't see anything at first glance. Maybe it is because of the zoom ratio you are using.

[andyrooc23]

Using the example library I was able to reproduce this issue on my iPhone 13... Not catching the same qr code listed above.... is there something I'm missing compile time maybe? Or something that might hinder the performance of my build versus others?

https://github.com/user-attachments/assets/3815cec2-dda8-4391-b8e7-1939e4e8d38b

[robingenz]

I'll look at it again, but have you tried it for longer than 3 seconds? Maybe the screen of the MacBook is too reflective for such a large QR code.

[andyrooc23]

Yes sorry just took a really short video because of compression issues to upload it here. But tried it multiple ways in different lightings and zooms.

[robingenz]

I suspect that the problem lies with ML Kit. The plugin can only output the barcodes that ML Kit recognizes. Maybe there are ways to optimize the camera settings but so far I have no idea. Please try the official ML Kit Vision demo app and let me know if it works better there: https://github.com/googlesamples/mlkit/tree/master/ios/quickstarts/vision

[andyrooc23]

Wasn't able to get the quickstart vision project working. Couldn't find MlKit module... maybe I am missing something?

[andyrooc23]

I've also tried the plugin demo on multiple iphones, iphone 15 and iphone 13, without success. Just wanted to give you a heads up

[robingenz]

Wasn't able to get the quickstart vision project working. Couldn't find MlKit module... maybe I am missing something?

It's best to ask directly in https://github.com/googlesamples/mlkit.

[andyrooc23]

Yeah I've been poking them on an issue since May...https://github.com/googlesamples/mlkit/issues/817 Can't seem to figure anything out sadly. Tried every different settings camera setting that I can.

[andyrooc23]

One more piece of information I just gathered is that the scanning works on my iPad pro but not on any iPhone. Strange but potentially helpful

[andyrooc23]

Upgraded to the most recent version of angular and alloy and scanning is now fully functional