Capacitor + QRScanner

From what I understand I cannot use ionic-native if I’m using capacitor and not Cordova, even though I tried it anyways.

What is the best way to integrate QRscanner into capacitor apps on iOS? Im using a package for angular to scan which works fine on any browser, but I don’t want to use browser. Don’t know if capacitor will ever have api for qrscanner.

I believe Capacitor supports cordova (and hence ionic native) for many plugins. Some may conflict.
Haven’t tried QR but I would defintely give it a try.

There is a list of community plugins for Capacitor. And no one knows of course when the QR will arrive, unless you build it yourself.

I’m not sure you need a native scanner anymore as browsers support QR code scanning??

Do a Google search for JS QR Scanner, there are several on Github.

1 Like

why use browser scanning? Then user would need to switch back and forth app and browser.

I don’t think so, Ionic apps run within a browser, you just don’t see it.

Exactly the route i will be taken as the process starts with qr and the users will be more used to open the camera app then something else

With deeplink and pwa, we have lift off!

Thx!

Okay, well I’m like I said I tried it and it doesn’t work on iOS.

Sorry, I missed that you had tried a JS solution.

There is nothing stopping you from using a Cordova plugin with Capacitor, although I see you said you had tried that too?

https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/

The BarcodeScanner plugin

  • reads QR codes
  • works with Capacitor (at least on Android)

Thanks. Will give it a try

I took the QR js code of this package and injected it separately in the app, so I can use it in PWA and test without having to run ionic cordova run browser.

And works fine. No camera preview of course, but that is a web issue I believe.

1 Like

I have a similar component for display purposes. Does yours work for scanning as well?

Yup, here the code that does the scanning, but no Preview though;

In index.html, stripped from the dist folder in browser plugin (the js lib)

<script src="assets/lib/cordova-plugin-qrscanner-lib.min.js"></script>

The ts part:

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

this.qrScanner = new QRScanner();

 // start scanning - as seen in the documentation.....
 const scanSub = this.qrScanner.scan().subscribe((text: any) => {
        
            console.log('Scanned something', text);

              // here the result
              if (text.result) {

              }

              this.qrScanner.hide(); // hide camera preview
              scanSub.unsubscribe(); // stop scanning
            });
          } 

You know the drill…

1 Like

Yeah I’ve done this. It doesn’t work. Just a blank screen, I guess it’s the no preview. Works fine on browser, on iOS doesn’t do what I need it to do. sigh

This post was flagged by the community and is temporarily hidden.

This post was flagged by the community and is temporarily hidden.