8

I recently came across a fairly new cordova plugin called cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). I have been using other QR Scanners before, but those simply overlay some kind of native camera UI until the QR has been scanned and then return back to the app.

However, the approach of this plugin is a bit different. The camera is actually shown "behind" your app and you have to make everything transparent in order to see it.

This is very interesting because you can then easily add custom overlays with HTML and CSS. However, I am not quite sure what the best approach is here.

After adding the plugin and simply calling QRScanner.scan(displayContents); you can't see anything, but the scanner is already running in the background. I then recursively removed any styles (see simplest way to remove all the styles in a page) from the app and set the background-color to transparent to see if it worked. It did, but I could obviously still see the text that was displayed before.

I guess I could create and push a new page with my overlay on it, set the background-color to transparent and then navigate back once the code has been scanned. But this feels really hacky.

Does anyone have a better solution for this?
For example, is there a way to "swap" the whole visible part of the app with the overlay and restore the state after the code has been scanned?

Thanks for your help.

EDIT:

It's not the same plugin, but this article is relevant to my question.

http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

Applying the css styles works, but again, the rest of the app is not usable then.

Community
  • 1
  • 1
Andreas Gassmann
  • 6,334
  • 7
  • 32
  • 45
  • How do you know that the plugin works? Since you don't see anything, the plugin simply might not be working. – vrijdenker Nov 22 '16 at 17:35
  • Like I said, if I make all the elements transparent recursively, it works. But obviously that can't be the solution because the other parts of the app are then unusable. – Andreas Gassmann Nov 22 '16 at 17:48

3 Answers3

1

@Andreas I had the some problem a few weeks ago. Here is how I fixed it:

1) First of all, create a class called lowOpacity on your theme/variables.scss, it has to be global, if you create it in the page's scss adding it dynamically won't work:

.lowOpacity {
  opacity: 0;
}

2) When you show the qrScanner, you should apply the class to the ion-app element, and optionally register a backbutton action:

            this.qrScanner.show().then(()=>{
                let unregister = this.platform.registerBackButtonAction(()=>{
                    this.closeQrScanner();
                    unregister();
                });
                window.document.querySelector('ion-app').classList.add('lowOpacity');
            });

3) Remeber to remove the class after the qrScanner scanned something ot was closed:

closeQrScanner() {
    this.qrScanner.hide().then(()=>{
        window.document.querySelector('ion-app').classList.remove('lowOpacity');
    }); // hide camera preview
}

ngOnDestroy() {
    this.closeQrScanner();
}

Hope it helps

paulovitorjp
  • 538
  • 5
  • 14
0

I wouldn't make the app transparent, since I don't see the point of that. Instead you would just show the contents of the camera in a div in your page, and layer other HTML elements on top of that using a higher z-index than the element containing the camera image.

vrijdenker
  • 1,371
  • 1
  • 12
  • 25
  • How can you add the contents of the camera in a div? That would be an even better solution, but I don't know if/how that is possible. – Andreas Gassmann Nov 22 '16 at 17:43
  • The only way I found to get it working is to use the WKWebView on iOS. You can take a look at the source code of an example here: https://github.com/airgap-it/airgap-mobile-broadcaster – Andreas Gassmann Sep 23 '17 at 09:19
0

As @vrijdenker said you should display the camera content to the right level and do not weirdly hack the CSS.

To do that you can remote debug your app to localise the camera container and apply some CSS on it to modify the z-index / display / etc.

Remote debug on Android:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Remote debug on iOS:

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

You can do that on real device or on simulator

Thibaud Sowa
  • 402
  • 4
  • 19
  • Like I already mentioned, I doubt this will work. From the documentation of the plugin it seems that the camera preview is displayed outside of the webview context. `QRScanner's native camera preview is rendered behind the Cordova app's webview`. So I don't think you can access it from the webview. – Andreas Gassmann Nov 23 '16 at 21:44
  • OK then apply a specific CSS class on your container when you launch the plugin, as it is specified in the doc. Use the `ngClass` directive and apply an `opacity: 0` to your specific class – Thibaud Sowa Nov 24 '16 at 10:36