Ionic cordova camera is not available

Question

I want to use QrScanner in my application. So I installed

ionic cordova plugin add cordova-plugin-qrscanner
npm install --save @ionic-native/qr-scanner@beta

plugins, then I do ionic cordova run browser, then I access the produced url in my mobile. When ever I try to open the qr scanner it always shows camera is not available. Even though my mobile has camera, I tested in both android and in ios, but the results are same. Here is my code

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.sharedAlertService.presentBasicAlert('Authorized', '', JSON.stringify(text));

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

                } else if (status.denied) {
                    this.sharedAlertService.presentBasicAlert('Denied', '', 'No permission');
                    // 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
                } else {
                    // permission was denied, but not permanently. You can ask for permission again at a later time.
                }
            })
            .catch((e: any) => this.sharedAlertService.presentBasicAlert('Error', '', JSON.stringify(e)));

What is the solution to access qr scanner in the browsers? Thank you.

Answer 1

The Camera is not natively supported in the browser, so you're kind of out of luck using it natively. Your best bet is to create mock data for the browser, which will simulate using it, and return the dummy data.

Ionic has an article about it that explains it in more depth.