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;
}
5 Likes
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.

1 Like
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;
}