Ionic-native: When I use the cordova-plugin-qrscanner plugin, I can not open the camera for scanning

[qifanrui]

I'm submitting a ... (check one with "x")
When I use the cordova-plugin-qrscanner plugin, I can not open the camera for scanning

Related code:

scan() {
    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) {
        let scanSub = this.qrScanner.scan().subscribe((text: string) => {
          console.log(text);
          this.qrScanner.hide();
          scanSub.unsubscribe();
        });
        // this.qrScanner.enableLight();
        // this.qrScanner.useBackCamera();
        this.qrScanner.show();
      } else if (status.denied) {
        // camera permission was permanently denied
        // you must use QRScanner.openSettings() method to guide the user to the settings page
        // then they can grant the permission from there
        // this.qrScanner.openSettings();
      } else {
        // permission was denied, but not permanently. You can ask for permission again at a later time.
      }
    }).catch((e: any) => {
      console.log('Error is', e);
    })
  }

package.json info:

{
    "name": "console",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/qr-scanner": "^4.0.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-qrscanner": "^2.5.0",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-swift-support": "^3.1.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.5.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.0.2",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-qrscanner": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

[jun1362008]

+1

[longxiansheng]

+1

[ponkrit]

+1

[ramiromd]

+1

[RoopeHakulinen]

If you can't see the camera, it is because the default hiding of WebView isn't working as intended. For me this was the fix.

in component code where you have the rest of the QR code from the example:

this.qrScanner.show();
window.document.querySelector('ion-app').classList.add('transparent-body');

and in app.scss:

.transparent-body {
  background: none transparent !important;
  opacity: 0 !important;
}

[jrdn91]

+1

Also I can confirm that @RoopeHakulinen solution does work. However, it seems that the .show() method should cover this as that is what the docs claim.

[riccardotreagles]

+1

@RoopeHakulinen after the callback I use:
window.document.querySelector('ion-app').classList.remove('transparent-body');

Otherwise, I obtain white screen after the scanning. It works. Is it correct?

[RoopeHakulinen]

If I understood you right, yes it is the intended behavior as it seems. That is the reason the _remove_ call is there so it removes the transparent layer.

[jlf123]

@RobertHerhold This works for me, but I'm having an issue adding an html button ontop of the camera view.

[riccardotreagles]

@jlf123 I suggest you to see this demo. https://github.com/Story5/qrscannerdemo

You can push a page with qrscanner and put a button inside the header of the page for example.
See also the style of tag at the index.html

[lucasmendes2105]

+1

[edufresne]

+1

[danielsogl]

Related to the plugin source.

[ruben82]

@RobertHerhold thanks for the solution. Just a question: is it possible to handle a navigator bar color, the back button etc? Because trasparency is inherit from all app's component/div.

[JeremyLopez]

It seems like this might be related to https://github.com/ionic-team/ionic-native/issues/2020

[Shubhasis10]

Use it will work properly in ionic 4/5

home.page.ts

import { Component, OnInit } from '@angular/core';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
import { Platform, AlertController } from '@ionic/angular';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

scanSubscription:any;

constructor(private qrScanner: QRScanner,
private AlertController : AlertController,
private platform: Platform) {

  this.platform.backButton.subscribeWithPriority(0,()=>{
    document.getElementsByTagName("body")[0].style.opacity = "1";
    this.scanSubscription.unsubscribe();
  });
  // this.platform.ready().then(() => {

  //  });
}

ngOnInit() {

}

// ionViewWillEnter() {
// this.scan();
// }
// ionViewWillLeave() {
// this.stopScanning();
// }

Openscan(){

(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
window.document.body.style.backgroundColor = 'transparent';

// Optionally request the permission early
this.qrScanner.prepare().then((status: QRScannerStatus) => {
  if (status.authorized) {

    //document.getElementsByTagName("body")[0].style.opacity = "0";
     this.scanSubscription = this.qrScanner.scan().subscribe((text: string) => {

      //document.getElementsByTagName("body")[0].style.opacity = "1";
      this.showAlert('QR Code Secan', text, 'Working');

      // (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
      // window.document.body.style.backgroundColor = '#FFF';

     // this.scanSubscription.unsubscribe();
    //  this.qrScanner.hide(); // hide camera preview
     // this.qrScanner.destroy();

    });
    this.qrScanner.enableLight();
    this.qrScanner.useBackCamera();
    this.qrScanner.show();

  } else if (status.denied) {
    this.qrScanner.openSettings();
    // camera permission was permanently denied
    // you must use QRScanner.openSettings() method to guide the user to the settings page
    // then they can grant the permission from there
  } else {
    // permission was denied, but not permanently. You can ask for permission again at a later time.
  }
})
.catch((e: any) => console.log('Error is', e));

}

stopScanning() {
(this.scanSubscription) ? this.scanSubscription.unsubscribe() : null;
this.scanSubscription=null;

(window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
window.document.body.style.backgroundColor = '#FFF';

this.qrScanner.hide();
this.qrScanner.destroy();

}

showAlert(header, sub, msg){
this.AlertController.create({
header : header,
subHeader : sub,
message : msg,
buttons : ['Ok']
}).then(alert => alert.present());
}

}

home.page.html

Open Camera

Global.scss

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

// ion-app.cameraView ion-content{
// --background: transparent none !important;
// }

app-home {
img {
opacity: 0.5;
max-width: 95%;
max-height: calc(98% - 100px);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
QRScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}