QRCode scan work, but camera image not displayed

[AnthoCha]

Hi ! I followed this tutorial to install barcode scanner : https://javascript.plainenglish.io/how-to-build-an-ionic-angular-capacitor-app-with-a-qr-code-scanner-28d6356809af

My problem is that the camera is launching and the QR code is recognised, The camera image is not displayed on screen... Does someone know how I can display it ? Maybe a CSS rule ? Best !

[thegnuu]

You need to make sure that every underlying div is set to transparent in your css, unfortunately this is different in every setup ;)

The easiest way is to use some kind of inspector to check which classes have some kind of background at the moment :)

[gidhin]

The same issue I'm facing. I try with background transparent but still the same. any sample code.

Thanks

[thegnuu]

You can find more information here #111.

Unfortunately it is not possible to provide matching samples, since it is highly dependant on your implementation. There are also different behaviours depending on the frameworks you use, for example Ionic is adding some css variables which sets a background if you use android and have dark mode enabled aso.

[gidhin]

This issue has been fixed.

In my case, I used a model popup. I changed that into a page. Then it's working fine I can see the camera background.

don't use model popup if are using an Ionic Capacitor.

Thank you.

[thegnuu]

Sounds great and yeah, you are right. Using a default model is not possible. You would need to create some sort of "inverted model" which will create a border and just expose a transparent center which looks like a model... But I guess this would be quite the pain to implement ;)

@AnthoCha were you able to resolve your issue?

[bezrodnow]

I can reproduce the error very easily with a new ionic project. https://github.com/MerOderWenigerLin/scan-test

I Even connected with the Google device inspector to manually change the HTML opacity. That seemed to help, but only for an emulated device and not my physical one.

PS: My Physical device always starts the app in Dark mode, even tho I disabled dark mode on the device. Maybe that may contribute to the error.

EDIT: I updated the project, so google device inspector is not needed (made the opacity of the view to 0.2) The problem persists only on physical devices. Including the device of a colleague with and without Dark-Mode.

EDIT2: The Camera-Preview is working fine https://github.com/capacitor-community/camera-preview Sadly, I can't have both open at the same time and "fake" it to look as one, because as soon as the preview is open, the scan won't work anymore.

[thegnuu]

Unfortunately I cannot really help you with your specific setup, my test setup is a simple new ionic app and it works without any issues.

You need to figure out yourself which DOM elements needs to be hidden once the scanner is started. But I can tell you that added ionic classes and css variables may differ if it as an emulator or a physical device, I was able to reproduce that once. Which means that if the view is visible in an emulator it might not be visible on a physical device - but this is not an issue of the library, this is caused by ionic so there is not much we can do on our side....