Cordova cordova-plugin-qrscanner：不透明的相机视图 [英] Cordova cordova-plugin-qrscanner: Opaque camera view
问题描述
我正在通过quasar-framework工作，我使用cordova for android平台进行包装。
I am working through quasar-framework and I do the wrap with cordova for android platform.
扫描仪工作正常但是盲目。
The scanner works fine but blindly.
当QRScanner.show（）启动时，我得到完全不透明的视图。我尝试将所有html元素透明化，隐藏甚至删除其中一些在QRScanner.show（）调用之后和之前，但总是看到不透明视图。有人知道如何解决这个问题吗？
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();
}
}
}
}
}
我称之为goScan的html功能：
And the html where I call the goScan function:
<button v-if="authorized" class="secondary push" @click="goScan()">Go Scan</button>
资源： https://github.com/bitpay/cordova-plugin-qrscanner
正如我所说，扫描工作正常，但盲目地使用完全不透明的相机视图。
As I said the scan works fine but blindly with the full opaque camera view.
谢谢。
推荐答案
如果扫描已经有效，那么你几乎就在那里。确保视频预览可见基本上需要单步执行应用程序层并确认图层不会遮挡预览。
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.
Star通过检查应用程序在设备上运行时的DOM。尝试在视图的每个元素上设置背景 无透明，包括 body 和 html 元素。在几乎所有情况下，您都会在应用层的某个位置找到一个带有白色背景的流氓容器。
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.
这篇关于Cordova cordova-plugin-qrscanner：不透明的相机视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
