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.