Problem with showing Camera Preview @ionic-native/qr-scanner

Ionic Native
1

Hello every one, I had a problem with " @ionic-native/qr-scanner " . I couln’t show camera preview but I can scan code.

I research on forum ( Link ) but still I couldn’t solve.

Here is my typescript code.

import { Component , OnInit} from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';


@IonicPage()
@Component({
  selector: 'page-qr',
  templateUrl: 'qr.html',
})
export class QrPage implements OnInit{

  constructor(public navCtrl: NavController, public navParams: NavParams,private qrScanner: QRScanner,private viewCtrl:ViewController) {


  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QrPage');
  }

  ngOnInit(){

  }

  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);
      });

  

  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

Here is my .html file


<ion-header>
  <ion-toolbar   color="haderColor">
    <ion-title>
      QR Tarayıcı
    </ion-title>
    <ion-buttons start>
      <button ion-button (tap)="dismiss()">
        <span ion-text color="white" showWhen="ios">Kapat</span>
        <ion-icon name="md-close" showWhen="android, windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


  <ion-content class="content" scroll="true" overflow-scroll="true">
    <button class="button" ion-button (click)="qrscanner()">qrscanner</button>
  </ion-content>

and scss

page-qr {
  ion-content  {
    background: none !important;
    background-color: white !important;
    height: 100%;
    width: 100%;

  }

  .button {
    background: none !important
  }
}

Here my ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.5.0
    Ionic Framework    : ionic-angular 3.6.1

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.0
    npm        : 4.6.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : legacy

Additional Note: I am using WKWebView

Thanks for reading.

2

What does that mean? How can you scan a code if you can’t show the camera?

3

Hello @Sujan12

Firstly thanks for helping. When I rotate the phone camera show a little bit. But I could not show on using transparency. I recorded my phone screen while rotating phone .I stop the video and take a screenshot. When I rotate, camera was showing behind the app

AB5E3E1F-ACE2-4B0E-9395-31ED45ECD596
AB5E3E1F-ACE2-4B0E-9395-31ED45ECD596.jpg1242×2208 190 KB

4

That sounds like there still was something blocking the view, the orange-pink background for example.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Use the Inspect element thing to see which HTML element still isn’t transparent.

5

Thanks for respond but When I change style to transparent all of them, It will just showing black screen :frowning:

6

How does the screenshot look like when rotating the phone when everything is transparent?

7

Hello @Sujan12,

I have been working on it.

I added my page .scss file

 ion-content,body, .app-root, ion-app,.scroll-content,.fixed-content,page-app {
     background: none transparent !important;
 }

When I add on the <div app-viewport></div> that css property background: none transparent !important;, it is working but I couldn’t add from scss file.

Screenshot at Eki 12 18-24-07
Screenshot at Eki 12 18-24-07.png1992×1290 563 KB

8

Here is solution :

My Page’s Scss

 ion-content,body, .app-root, ion-app,.scroll-content,.fixed-content,page-app {
     background: none transparent !important;
 }

App.scss

[app-viewport],
[overlay-portal],
[nav-viewport],
[tab-portal],
.nav-decor {
  display: none !important;
  background: none transparent !important;
}
9

Use Barcode Scanner native plugin instead

10

Sorry to say but your reply and attitude shows that you haven’t worked on IONIC. Don’t know who made you the community moderator.

11

THANK YOU! The app.scss part did it for me.

12

Hi! In case anyone can’t find the answer. This worked for me:

ion-content,body, .app-root, ion-app,.scroll-content,.fixed-content,page-app {
   --background: none transparent !important;
}