How to use this with Ionic 3

[Srijan1702]

Hi , I've been looking for a full screen QRScanner, which must use entire camera footage to scan qr and not just a part of the camera footage. Can I use this plugin with ionic 3 if no can you suggest me any other plugin that meets my requirement.

Thanks in advance...

[mslourens]

Yes, you can (I'm doing it in a project of mine, which uses Ionic 3 and Angular 5).

[srijanDubey]

@mslourens ,

can you please share your code?

[mslourens]

import {Injectable} from '@angular/core';
import {QRScanner, QRScannerStatus} from '@ionic-native/qr-scanner';
import {NotificationService} from '../notification/notification.service';

@Injectable()
export class ScanService {
    constructor(
        private qrScanner: QRScanner,
        private notification:NotificationService) {
    }

    async scanPatient():Promise<string> {
        let hash:string = '';
        try {
            hash = await this._startScanner();
        }
        catch(err) {
            throw err;
        }

        return hash;
    }

    private _startScanner():Promise<any> {
        // Optionally request the permission early
        return this.qrScanner.prepare()
            .then((status: QRScannerStatus) => {
                return new Promise((resolve, reject) => {
                    if (status.authorized) {
                        // camera permission was granted

                        const ionApp = <HTMLElement>document.getElementsByTagName("ion-app")[0];
                        // start scanning
                        let scanSub = this.qrScanner.scan().subscribe((text: string) => {

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

                            // hack to hide the app and show the preview
                            ionApp.style.display = "block";

                            resolve(text);
                        });

                        // show camera preview
                        ionApp.style.display = "none";
                        this.qrScanner.show();
                    } 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
                        this.qrScanner.openSettings();
                        reject(new Error('MESSAGES.QRSCANNER.CHANGE_SETTINGS_ERROR'));
                    } else {
                        // permission was denied, but not permanently. You can ask for permission again at a later time.
                        reject(new Error('MESSAGES.QRSCANNER.PERMISSION_DENIED_ERROR'));
                    }
                })
            })
    }

}

[srijanDubey]

@mslourens

thanks A lot. I'll try this and comeback if I'll have any doubts. Thanks again for helping.

[ramkrishna70]

I have taken references from all of the issues, and merged to make it work properly. Hope this will help more. And big thanks for those who given some idea about the use of it. https://github.com/bitpay/cordova-plugin-qrscanner/issues/156

[lim-enhui]

i am receiving a blank screen without camera preview. i thought it might be css issue... i am running on android 9 device... i applied the style as the code above and nothing change.

[ipehimanshu]

If denied then it give this type error