Skip to content

QR Code scanner cordova plugin not working on android with capacitor #1213

@coffeymatt

Description

@coffeymatt

I've followed the steps to add the QR code cordova plugin to my Ionic4/Angular/Capacitor app, but can't get it to work (in a web/pwa context, or on device on android).

After adding the cordova plugin and associated angular package/import and running 'npx capacitor sync', I can see the plugin in the list:

√ Copying capacitor.config.json in 1.91ms
Found 7 Cordova plugins for android
CordovaPluginDevice (2.0.2)
CordovaPluginFile (6.0.1)
CordovaPluginFileTransfer (1.7.1)
CordovaPluginIonic (5.2.10)
CordovaPluginQrscanner (2.6.0)
CordovaPluginWhitelist (1.3.3)
CordovaSqliteStorage (2.6.0)
√ copy in 1.48s

And my code is a copy and paste from the docs, I'm importing the QR scanner:

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';

Injecting it into my angular component:

constructor(private qrScanner: QRScanner)

And I've got got a button that calls this function:

` qrScan() {
// Optionally request the permission early
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted

      // start scanning
      const scanSub = this.qrScanner.scan().subscribe((text: string) => {
        console.log('Scanned something', text);

        this.qrScanResult = text;

        this.qrScanner.hide(); // hide camera preview
        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('denied');
    } else {
      // permission was denied, but not permanently. You can ask for permission again at a later time.
    }
  })
  .catch((e: any) => console.log('Error is', e));

}`

But after an ionic build and an npx sync, this doesn't work. Clicking the button does nothing.
In a browser with 'npx cap serve' the error is that it can't find Cordova. Do cordova plugins that support 'browser' work in a capacitor context?

With 'npx cap open android' in android studio running debug on the phone, the button also does nothing, but I'm too much of a n00b to know where error output would appear, but happy to follow instructions to give more detail.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions