Cordova cordova-plugin-qrscanner: Opaque camera view

Question

I am working through quasar-framework and I do the wrap with cordova for android platform.

The scanner works fine but blindly.

When QRScanner.show() starts I am getting full opaque view. I try to do all html elements transparent, hide and even remove some of them after and before QRScanner.show() call but always I see the opaque view. Someone knows how to fix this?

<script>

export default {
    /*
        Fuentes:

        camera
        https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html#takePicture

        qrscanner
        https://github.com/bitpay/cordova-plugin-qrscanner#prepare

    */
    mounted () {
        this.prepDevice()
    },
    data () {
        return {
            imageURI: '',
            authorized: false,
            selection: 'standard',
            selectOptions: [
                {
                    label: 'Camera-thumbnail',
                    value: 'camera-thmb'
                },
                {
                    label: 'Standard',
                    value: 'standard'
                }
            ],
            enableVisibility: 'hidden',
            backColor: 'transparent'
        }
    },
    methods: {
        prepDevice () {
            QRScanner.prepare(this.onDone)
        },
        onDone: function (err, status) {
            if(err) {
                alert("preparing: error code = " + err.code)
            }
            if(status.authorized) {
                this.authorized = true
            } else if (status.denied || !status.authorized) {
                this.openSettings()
            } else {
                //No se obtuvo permiso
            }
        },
        goScan: function () {
            //--->>> Funciona pero el escaneo es a ciegas (vista en negro) <<<---

            this.authorized = false

            QRScanner.show()

            /*
                var html = document.getElementsByTagName("*")
                for (var i=0; i<html.length; i++) {
                    html[i].style.backgroundColor = "transparent"
                }
            */


            //QRScanner.enableLight()
            QRScanner.scan(this.displayContents)
        },
        displayContents: function (err, text) {
            if(err){
                alert("scanning: error code = " + err.code)
                if(err.name === 'SCAN_CANCELED') {
                    alert("The scan was canceled before a QR code was found.")
                }
            } else {
                alert(text)
            }
            //QRScanner.hide()
            //QRScanner.disableLight()
            QRScanner.destroy() // hide, cancelScan...
            this.authorized = true
        },
        cancelScan() {
            QRScanner.cancelScan()
            this.authorized = true
        },
        openSettings() {
            if(status.canOpenSettings){
                if(confirm("Would you like to enable QR code scanning? You can allow camera access in your settings.")){
                    QRScanner.openSettings();
                }
            }
        }
    }
}

And the html where I call the goScan function:

<button v-if="authorized" class="secondary push" @click="goScan()">Go Scan</button>

Resource: https://github.com/bitpay/cordova-plugin-qrscanner

As I said the scan works fine but blindly with the full opaque camera view.

Thanks.

Answer 1

If scanning is already working, you're nearly there. Ensuring the video preview is visible basically requires stepping through the layers of your application and confirming that the layer isn't obscuring the preview.

Start by inspecting the DOM of your app while it's running on the device. Try setting a background of none transparent on each element covering the view, including the body and html elements. In almost all cases, you'll find a rogue container with a white background somewhere in the layers of your app.

If you're entirely convinced the entire web view is transparent (note: this is very unusual), you'll need to inspect the native layers of your app to determine if another plugin or configuration setting is interfering with visibility. Instructions for this step would be very platform specific, so it's best to consult documentation/forums for the platform in question.