Cordova cordova-plugin-qrscanner plugin preview not showing

paragonHex

Hey guys!

I am wrapping my application with cordova, and want to use the cordova-plugin-qrscanner plugin.

I added the prepare fn in their docs to the mounted lifecycle hook, and at one buttons @click calling a method, which executes the QRScanner.scan and the QRScanner.show functions.

Now the functionality is there, it scans with the camera, i get back my QRs decoded value, but I cant see the preview.
I tried making my whole app (<html>, <body> and all children) transparent, opaque, but that didn’t help either.
After I trigger the .scan(), the background of my layout-content tag gets removed, and I have a black (transparent until <html>?) background until I call the .hide(), which restores the colors. I guess that black is where I should see the video.

I am using crosswalk, but tried without too, the behavior remained the same.

Using: quasar-framework@^0.13.4

I read somewhere, that the plugin should add an underlying video tag, which should be seeable on the DOM (couldn’t spot that with inspect).

I tested it on different Android devices. (Huawei P8 Lite, Google Pixel), same behavior.

I found these also, indicating there is a problem between vue/quasar and the plugin:
https://stackoverflow.com/questions/43225506/cordova-cordova-plugin-qrscanner-opaque-camera-view#
https://stackoverflow.com/questions/43907710/cordova-plugin-qrscanner-no-video-preview
http://android.wekeepcoding.com/article/10037418/Cordova+plugin-qrscanner+no+video+preview

Any of you guys have any idea about what I should do to make this plugin work?
Or can you recommending me another one (this seems to be the “best practice” one).

( I got the functionality working with the barcode scanner, but thats not the UI that has been sold to our client, and they are quite adamant on it :S )

paragonHex

So in the end I solved it with the phonegap-plugin-barcodescanner, which is very similar to the cordova-plugin-barcodescanner, but you can configure it, so it feels more like a QR scanner.

Be aware that it the two above internally (in cordova) register/use the same name, so before changing from the cordova plugin to the phonegap one, remove it with the command below before adding the another one, so the build process won’t break.
$ cordova plugin rm cordova-plugin-barcodescanner

No More Posting New Topics!

Cordova cordova-plugin-qrscanner plugin preview not showing