issue using Ionic QRScanner on Android browser: zoom in too much

Question

I use https://ionicframework.com/docs/native/qr-scanner in an Ionic 4/Angular application for browsers.

The application works fine on laptop browsers and it's possible to have the camera preview and read QR codes.

However, when trying on Android browsers the camera zooms in too much and it's impossible to scan codes.

On the internet there's not much (just people asking to add the zoom in/out feature to the plugin) and I tried to control the camera zoom via another plugin (https://ionicframework.com/docs/native/camera-preview) but it didn't work.

Does anyone have any idea on how to fix this?

For reference, I append my code at the end of this message.

Thanks,

  scanCode() {
    console.log('entering scan function');
    this.qrScanner.prepare()
    .then((status: QRScannerStatus) => {
      console.log('checking status');
       if (status.authorized) {
         this.statusScanning=true;
         // camera permission was granted
         console.log('camera permission granted');
         // start scanning
         this.scanSub = this.qrScanner.scan().subscribe( (scanRes: string) => {
          let object:any=scanRes;
          if(isDefined(object.result))
          {
            let text: string=""+object.result;
            this.myfunction(text);
            this.qrScanner.hide(); // hide camera preview
            this.scanSub.unsubscribe(); // stop scanning
          }
         });
       } else if (status.denied) {
         // camera permission was permanently denied
         // you must use QRScanner.openSettings() method to guide the user to the settings page
         // then they can grant the permission from there
         console.log('status denied');
       } else {
        console.log('permissions denied for now');
         // permission was denied, but not permanently. You can ask for permission again at a later time.
       }
    })
    .catch((e: any) => console.log('Error:', e));
  }

Answer 1

in case anyone gets the same issue I had, the best option I found was to just give up the QRScanner component and use jsQR. I followed the principles in the tutorial in this page (https://devdactic.com/pwa-qr-scanner-ionic/) and everything ended-up working fine. Cheers,