QR Scanner: Seems to be working in the background, but doesn't display a preview when calling show()


#1

The QR Scanner seems to be working in the background but doesn’t display a preview when calling show().
The code for the QR Scanner is a copy/paste from the example in the docs.

When moving the phone around over a QR code I will eventually get the following message in the console ( ‘qrcodetext’ is correct).

error opening ws message: {"category":"console","type":"log","data":["Scanned something","qrcodetext"]} 

ionic info output:

$ ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v6.11.1
    OS         : OS X El Capitan
    Xcode      : Xcode 8.1 Build version 8B62 
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

QR Scanner Native
QR Scanner Native
#2

Can you build a simple repro repo on a ionic start blank blank project and put it on Github?


#3

I actually just got this figured out after tinkering with things in Chrome’s Webview Debugger.

In top level index.html:

<!-- Ionic's root component and where the app will load -->
<ion-app style="background: none transparent;"></ion-app>

In camera display page html file:

<ion-content style="background: none transparent;">

#4

What does that do exactly? What are the default values?


#5

Both changes override the styling from the default Ionic style sheet. Without the changes, the camera preview runs underneath the app and isn’t visible.

The default is a white background, from main.css:5481:

ion-app.md {
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-size: 1.4rem;
    background-color: #fff;
}

and from main.css:8617:

.content-md {
    color: #000;
    background-color: #fff;
}

#6

There is a div, with class=“nav-decor”, which has a black background, this needs to be changed to transparent.

My solution was to have a “cameraView” class, which would set the ion-app, ion-content and .nav-decor to have a transparent background.

I used this CSS

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important; 
}

And then these functions to show the camera after qrScanner.show() and hide it after I’m finished scanning

showCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
}
hideCamera() {    
  (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
}

Ionic QR Code scan not opening camera for iOS and Android devices
#7

you saved my god damn booty! this nav-decor appeared for me when i used ion-tabs. Before i used them, the qr-scanner just worked like @markmccarthy described.


#8

I think “bensearle”'s answer should add to official doc (https://ionicframework.com/docs/native/qr-scanner/).
Great help.


#9

The is one simple and way better solution: Use BarcodeScanner Plugin. Does the same stuff, easier and better.


#11

But you cannot place it inside the page =x


#12

Where should i add the css in main.css or in page.css ?


#13

It is up to you.
In my case, I will create a scanner page to handle all scan process.
So, css will put inside scanner.scss.