This tutorial will implement the Ionic Native QR Scanner, which uses cordova-plugin-qrscanner, and add a Frame to the camera view to guide the user to position the QR code correctly so that it can be scanned.
1. Install the QR Scanner
$ ionic cordova plugin add cordova-plugin-qrscanner $ npm install --save @ionic-native/qr-scanner
- In app.module.ts, import QRScanner and add it to the providers
import { QRScanner } from '@ionic-native/qr-scanner'; providers: [ QRScanner, … ],
2. Create a custom CSS class
When the scanner is active the camera feed will be displayed behind the app. The ion-app and ion-content elements will need to be transparent so that camera feed can be shown in the app.
In some cases, such as when the scanner is on a tabbed page, there is .nav-decor div, which also needs to be made transparent. This is an issue that has been discussed in the Ionic Framework forum.
ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor { background: transparent none !important; }
I have created a cameraView class that can be applied to ion-app to make the 3 elements transparent.
3. Implement the QR Scanner
- Create a page
$ ionic generate page qr-scanner
- Import QRScanner and QRScannerStatus
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
- Create a scanSubscription variable to store the subscription to the scanner
- Create a scan function to start scanning, which will do the following:
- Apply the cameraView css class to make the backgrounds transparent
- All the QRScanner prepare() function, which will request camera permission and prepare for scanning
- Show the camera feed
- Subscribe to the scanner results, using the scanSubscription variable to store the subscription
- Display a toast containing the text from a scanned qr code
- If camera access was not authorised, output the camera status to the console
- If any error occurs when scanning, output the error to the console
scanSubscription; scan() { (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView'); this.qrScanner.prepare() .then((status: QRScannerStatus) => { if (status.authorized) { this.qrScanner.show(); this.scanSubscription = this.qrScanner.scan().subscribe((text:string) => { let toast = this.toastCtrl.create({ message: `${text}`, position: 'top', duration: 3000, closeButtonText: 'OK' }); toast.present(); }); } else { console.error('Permission Denied', status); } }) .catch((e: any) => { console.error('Error', e); }); }
- Create a stopScanning function to stop scanning, which will do the following:
- Unsubscribe from scanSubscription and set it to null
- Remove the cameraView css class to put the backgrounds back to their original style
- Hide the camera feed
- Stop using the camera. destroy() function was added in ionic-native 4.3.0
stopScanning() { (this.scanSubscription) ? this.scanSubscription.unsubscribe() : null; this.scanSubscription=null; (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView'); this.qrScanner.hide(); this.qrScanner.destroy(); }
- Call scan() when you go to the qr-scanner page
- Call stopScanning() function you leave the qr-scanner page
ionViewWillEnter() { this.scan(); } ionViewWillLeave() { this.stopScanning(); }
- Add the page to your app
4. Add a scanner frame to the camera
- Download this image of a QR Scanner frame
- Import the image into the project in the assets/img/ directory
- Add the image to the page content
<ion-content> <img src="assets/img/softwarb_qr_scanner_white.png" alt=""> </ion-content>
- Add some styling to the image to centrally align it and reduce the opacity of the frame
page-qr-scanner { img { opacity: 0.5; max-width: 95%; max-height: calc(98% - 100px); position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); } }
5. Result
You will be able to use the QR Scanner in your Ionic app

Any git source for qr-scan ?
No, I did this as part of a larger project that was not open source.