javascript - Cordova cordova-plugin-qrscanner : Opaque camera view

Question

我正在使用 quasar-framework 并使用 cordova 为 android 平台做包装。

扫描仪工作正常但盲目。

当 QRScanner.show() 启动时，我得到的是完全不透明的 View 。我尝试在 QRScanner.show() 调用之后和之前使所有 html 元素透明，隐藏甚至删除其中的一些元素，但我总是看到不透明的 View 。有人知道如何解决这个问题吗？

<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();
                }
            }
        }
    }
}

还有我调用 goScan 函数的 html:

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

资源:https://github.com/bitpay/cordova-plugin-qrscanner

正如我所说，扫描工作正常，但完全不透明的相机 View 盲目。

谢谢。

Answer 1

如果扫描已经开始工作，那么您就快完成了。确保视频预览可见基本上需要遍历应用程序的各个层并确认该层没有遮挡预览。

首先检查您的应用在设备上运行时的 DOM。尝试在覆盖 View 的每个元素上设置 background 为 none transparent，包括 body 和 html 元素。在几乎所有情况下，您都会在应用层的某处找到一个带有白色背景的流氓容器。

如果您完全相信整个 WebView 是透明的(注意:这很不寻常)，您将需要检查应用的原生层以确定是否有其他插件或配置设置干扰了可见性。此步骤的说明将非常特定于平台，因此最好查阅相关平台的文档/论坛。