QR Scanner issue. Unexpected behavior from previous issue.

[lim-enhui]

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior: The white background is not removed. The camera should be switched on. Unable to init QR Scanner properly.

Expected behavior: The white background is removed. The camera should be switched on. Able to init QR Scanner properly.

Steps to reproduce:

Click launch to launch QR Scanner Page that manifest the component.

Related code: scanner.html

<ion-header>
  <ion-navbar transparent>
    <ion-title>
      QRScanner
    </ion-title>
  </ion-navbar>
</ion-header>  
<div style="background: none transparent;">
    <img src="../../assets/imgs/qrscanner.png" style="display:block;width:100%;height:auto;margin-left:auto;margin-right:auto;" />
</div>

scanner.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { AndroidPermissions } from '@ionic-native/android-permissions';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@Component({
  selector: 'page-scanner',
  templateUrl: 'scanner.html'
})
export class ScannerPage {

  constructor(public navCtrl: NavController,
              public platform:Platform,
              public androidPermissions: AndroidPermissions,
              public qrScanner: QRScanner) {

                // solve the problem - "plugin not installed".
                platform.ready().then(()=>{
                  this.qrscanner();
                })

  }

  qrscanner() {

    // Optionally request the permission early
    this.qrScanner.prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted
          alert('authorized');

          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            console.log('Scanned something', text);
            alert(text);
            this.qrScanner.hide(); // hide camera preview
            scanSub.unsubscribe(); // stop scanning
            this.navCtrl.pop();
          });

          this.qrScanner.resumePreview();

          // show camera preview
          this.qrScanner.show()
          .then((data : QRScannerStatus)=> { 
            alert(data.showing);
          },err => {
            alert(err);

          });

          // wait for user to scan something, then the observable callback will be called

        } else if (status.denied) {
          alert('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
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
          alert('else');
        }
      })
      .catch((e: any) => {
        alert('Error is' + e);
      });

  }

}

scanner.scss

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

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

app.module.ts

import { QRScanner } from '@ionic-native/qr-scanner';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { ScannerPage } from './../pages/scanner/scanner';
import { BrowserModule } from '@angular/platform-browser';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { ErrorHandler, NgModule } from '@angular/core';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PassportPage } from './../pages/passport/passport';
import { LoginPage } from './../pages/login/login';
import { BrowseEventsDetailPage } from '../pages/browse-events-detail/browse-events-detail';
import { ImageViewerPage } from './../pages/collections/image-viewer/image-viewer';
import { CollectionsPage } from './../pages/collections/collections';
import { EventsDetailPage } from './../pages/events-detail/events-detail';
import { BrowseEventsPage } from './../pages/browse-events/browse-events';
import { PdfViewerPage } from '../pages/collections/pdf-viewer/pdf-viewer';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    PassportPage,
    BrowseEventsPage,
    BrowseEventsDetailPage,
    EventsDetailPage,
    CollectionsPage,
    ImageViewerPage,
    PdfViewerPage,
    ScannerPage
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule,
    PdfViewerModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    PassportPage,
    BrowseEventsPage,
    BrowseEventsDetailPage,
    EventsDetailPage,
    CollectionsPage,
    ImageViewerPage,
    PdfViewerPage,
    ScannerPage
  ],
  providers: [
    StatusBar,
    QRScanner,
    AndroidPermissions,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)  : 4.1.0 (C:\Users\elim\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 8 other plugins)

System:

   NodeJS : v8.11.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.0
   OS     : Windows 10

Environment:

   ANDROID_HOME : not set

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.