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


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

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




    // Optionally request the permission early
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted

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


          // show camera preview

          .then((data : QRScannerStatus)=> {
          },err => {


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

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



  dismiss() {

Here is my .html file

  <ion-toolbar   color="haderColor">
      QR Tarayıcı
    <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>

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

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


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


    backend : legacy

Additional Note: I am using WKWebView

Thanks for reading.


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


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


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: Use the Inspect element thing to see which HTML element still isn’t transparent.


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


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


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.


Here is solution :

My Page’s Scss

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


.nav-decor {
  display: none !important;
  background: none transparent !important;


Use Barcode Scanner native plugin instead