Help with cordova-plugin-qrscanner / How to make your app completely transparent

Ionic Framework ionic-v3
1

Hi,

I recently came across this new qr-scanner plugin: https://github.com/bitpay/cordova-plugin-qrscanner. It looks very interesting because it allows you to add your own custom HTML/CSS overlay. However, I’m having a hard time getting it to work with Ionic.

When I start the scanner, it starts in the background (behind the app) and scans codes successfully. However, I cannot see the camera itself because the app is “on top of it”. Just to see if it’s working, I added the “background-color: transparent” style to all elements on the page using this method: http://stackoverflow.com/questions/9252839/simplest-way-to-remove-all-the-styles-in-a-page. Then I was able to see the camera, but obviously the app is unusable after that.

I tried to find the element(s) that need to be made transparent using the dev tools on chrome, but somehow I was unable to figure it out. So my question is: How do I make one page in my app completely transparent while keeping everything else working?

Thanks a lot for your help!

2

+1 on this. Having the same issue using CameraPreview plugin.

3

I found an article that describes how to use the CameraPreview plugin here: http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

This goes into the right direction, but it only works when I manually set the styles in the scss files. I’m still looking for a way to do this while the app is running (using selecting the elements with js and setting their background to transparent didn’t work for some reason)

4

Add the following lines into src/theme/variables.scss:

// Shared Variables
$background-color: transparent;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$content-ios-transition-background: transparent;

They make background of app transparent.