Build a QR Scanner for Ionic React Capacitor app

400 Views Asked by At

I want to build a QR Scanner for my project using Ionic React ver 7. But I cannot find the library that suits my needs. Also, I'm pretty confused by this Capacitor. Have anyone tried to build this? I need a camera preview, and when it recognizes the QR code, it will show a tooltip or something similar of the link or the text. Thanks.

I've tried multiple libraries, but can't seem to find the one that works.

1

There are 1 best solutions below

0
On

I have tried on 2 plugins Capacitor v5 and up works pretty fine on both Andorid and Ios.

This package will be depricated but working ok anyay, @capacitor-community/barcode-scanner

This package is recommended for use. https://www.npmjs.com/package/@capacitor-mlkit/barcode-scanning

Below is a working demo. https://github.com/robingenz/capacitor-mlkit-plugin-demo

Displaying a tooltip or modal or logs, you just wait for the scanner to finish the listening and intercept the results. On the second plugin you can implement a listener and intercept whenever you want.