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

**URL:** <https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694>\
**Category:** Ionic Native\
**Created:** [October 4, 2017, 6:39pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694 "2017-10-04T18:39:27Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![reliy0n](https://avatars.discourse-cdn.com/v4/letter/r/e480ec/32.png) [@reliy0n](https://forum.ionicframework.com/u/reliy0n)\
**Post date:** [October 4, 2017, 6:39pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/1 "2017-10-04T18:39:27Z")

</div>

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](https://forum.ionicframework.com/t/ionic-qr-code-scan-not-opening-camera-for-ios-and-android-devices/101512) ) but still I couldn’t solve.

Here is my typescript code.

```auto
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

```auto

<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

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

  }

  .button {
    background: none !important
  }
}

```

Here my ionic info

```auto
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.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [October 10, 2017, 10:20am UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/2 "2017-10-10T10:20:23Z")

</div>

> [@reliy0n](#):
>
> I couln’t show camera preview but I can scan code.

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

---

<div class="post-metadata">

**Author:** ![reliy0n](https://avatars.discourse-cdn.com/v4/letter/r/e480ec/32.png) [@reliy0n](https://forum.ionicframework.com/u/reliy0n)\
**Post date:** [October 10, 2017, 5:24pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/3 "2017-10-10T17:24:48Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/9/6/964e033b9f1d63e69f0add55a2f6faf5bfdeb562.jpg)

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [October 10, 2017, 5:28pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/4 "2017-10-10T17:28:42Z")

</div>

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](https://ionic.zone/debug/remote-debug-your-app#ios) Use the Inspect element thing to see which HTML element still isn’t transparent.

---

<div class="post-metadata">

**Author:** ![reliy0n](https://avatars.discourse-cdn.com/v4/letter/r/e480ec/32.png) [@reliy0n](https://forum.ionicframework.com/u/reliy0n)\
**Post date:** [October 10, 2017, 6:17pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/5 "2017-10-10T18:17:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [October 10, 2017, 7:24pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/6 "2017-10-10T19:24:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![reliy0n](https://avatars.discourse-cdn.com/v4/letter/r/e480ec/32.png) [@reliy0n](https://forum.ionicframework.com/u/reliy0n)\
**Post date:** [October 12, 2017, 3:28pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/7 "2017-10-12T15:28:39Z")

</div>

Hello @Sujan12,

I have been working on it.

I added my page .scss file

```auto
 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](https://global.discourse-cdn.com/ionicframework/original/3X/a/c/ac83c905e3afb51462da45675122e3427d952868.png)

---

<div class="post-metadata">

**Author:** ![reliy0n](https://avatars.discourse-cdn.com/v4/letter/r/e480ec/32.png) [@reliy0n](https://forum.ionicframework.com/u/reliy0n)\
**Post date:** [October 15, 2017, 1:46pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/8 "2017-10-15T13:46:28Z")

</div>

Here is solution :

My Page’s Scss

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

```

App.scss

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

```

---

<div class="post-metadata">

**Author:** ![wilmaribg](https://avatars.discourse-cdn.com/v4/letter/w/3d9bf3/32.png) [@wilmaribg](https://forum.ionicframework.com/u/wilmaribg)\
**Post date:** [February 28, 2018, 8:41pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/9 "2018-02-28T20:41:53Z")

</div>

Use Barcode Scanner native plugin instead

---

<div class="post-metadata">

**Author:** ![ayubIonicpro](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@ayubIonicpro](https://forum.ionicframework.com/u/ayubIonicpro)\
**Post date:** [June 17, 2019, 5:53am UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/10 "2019-06-17T05:53:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![amcastro](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amcastro/32/95165_2.png) [@amcastro](https://forum.ionicframework.com/u/amcastro)\
**Post date:** [August 29, 2019, 9:26pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/11 "2019-08-29T21:26:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pablodubikin](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@pablodubikin](https://forum.ionicframework.com/u/pablodubikin)\
**Post date:** [February 12, 2021, 2:02pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/12 "2021-02-12T14:02:24Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:52pm UTC](https://forum.ionicframework.com/t/problem-with-showing-camera-preview-ionic-native-qr-scanner/107694/13 "2021-07-19T20:52:11Z")

</div>