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


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


    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

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


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;">


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


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;


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

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.


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


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


But you cannot place it inside the page =x


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


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.