no camera preview on android phone

[giscafer]

QRScannerStatus

authorized: true
canChangeCamera: true
canEnableLight: true
canOpenSettings: true
currentCamera: 0
denied: false
lightEnabled: false
prepared: true
previewing: true
restricted: false
scanning: true
showing: true

ionic info:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.1
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.0-201707061803

System:

    Node       : v6.10.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.1.0

[giscafer]

    qrScannerClick() {
        let self = this;
        // Optionally request the permission early
        this.qrScanner.prepare()
            .then((status: QRScannerStatus) => {
                if (status.authorized) {
                    // camera permission was granted
                    // start scanning
                    let scanSub = this.qrScanner.scan().subscribe((text: string) => {
                        self.alert.showAlert(text);

                        this.qrScanner.hide(); // hide camera preview
                        scanSub.unsubscribe(); // stop scanning
                    });

                    // show camera preview
                    this.qrScanner.show();

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

                } else if (status.denied) {
                    self.alert.showAlert('相机权限被禁止，请先设置允许App使用相机');
                    // 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) => {
                /*tslint:disable*/
                console.log('Error is', e)
            });
    }

[qifanrui]

I have encountered the same problem, may I ask you to solve the no, if you have to solve whether you can tell, thank you!

[giscafer]

@qifanrui not yet

[Story5]

I got the same problem.AnyOne knows?

[yanxiaodi]

I got the same problem. Nothing happens after the show method.

[yanxiaodi]

I use BarcodeScanner instead of QRScanner. BarcodeScanner works well.

[giscafer]

@yanxiaodi me too ,but BarcodeScanner is not beauty

[yanxiaodi]

I use Chrome's inspect function to test the code. When the app call the show() method, nothing happens. But indeed, it can scan the QR code correctly, and the camera preview window is just hidden. If I refresh the page by clicking the refresh button on the toolbar of Chrome, the camera preview window shows. I don't know why. It seems like Ionic can't automatically refresh the page.

[franzisk]

Same problem here, camera not showing.

This code:

this.qrScanner.show().then(data => {
  console.log('success showing camera');
  console.log(JSON.stringify(data));
}, err => {
  console.log('Error showing camera');
  console.log(JSON.stringify(err));
});

Returns:

console.log: success showing camera
{
   "authorized":true,
   "denied":false,
   "restricted":false,
   "prepared":true,
   "scanning":true,
   "previewing":true,
   "showing":true,
   "lightEnabled":false,
   "canOpenSettings":true,
   "canEnableLight":true,
   "canChangeCamera":true,
   "currentCamera":0
}

Maybe the problem is this "currentCamera" option showing zero.

My style:

page-scanner {
  .content {
    // background: none transparent !important;
    background-image: url('/assets/img/scanner-background.png') !important;
    background-size: 100% 100%;
  }
}

I have an image on the background with a transparent square on the center, but the camera never is shown.

What can I do?

[Story5]

I solve the camera-preview here https://github.com/bitpay/cordova-plugin-qrscanner/issues/108. Hope it can help

[franzisk]

@Story5 would you have a print of your screen? Did you have to set everything transparent? I would like to have only the "content" transparent.

They way you did does not work for me (yet):

.content {
    background: none transparent;
}

[Story5]

@franzisk Hi, here are my qrscannerdemo and screenshot Did you set the body and ion-app with style="background: none transparent;" in src/index.html ?

<body style="background: none transparent;">

  <!-- Ionic's root component and where the app will load -->
  <ion-app style="background: none transparent;"></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

Camera preview will not be shown if you dont set.

[franzisk]

@Story5 thanks, actually I had not set that, but how about the other pages? They will aso have a transparent background?

[Story5]

@franzisk I tried to push a qrscanner view and open camera perview, it works. So you only need to set the index.html in src root directory and ***.html you use qrscanner. See my qrscannerdemo also.

[ghost]

It's totally buggy, i feel i just make crap. Camera light is not stopping, the preview is not showing up even if the background is transparent on body and app (i have tried every possible scenario). It should be easier solution for this.

Anyway i dug into the android studio beta 1 - it's amazing. You can debug from native apk. It's very useful for ionic app. (there are some minor bug in it)

You need to attach to a process manually quickly (when it appears), or the debugger is timing out, just the emulator is coming up. I was able to debug the android part in studio, and the html part in chrome.

I have experienced that 8GB ram sometimes not enough. (I have 16GB.) Chrome browser and an android studio in debug mode plus the emulator needs a little bit more.

I might have some solution for this later on. I also committed a bug, that to call the show twice it's causing memory leak and even if you call hide, the camera light remains up.

I have solved the issue in browser (not call the show, as the prepare is calling it), but on android it does exist.

For me it's not crucial at the moment, as i have another tasks, but i'm glad i can take a look, if any cordova plugin is crappy, and fix right away. (There are tones of crappy plugin, but i'm not familiar on android development, now i think i should learn ios and android also, even if i'm using ionic)

[bensearle]

There is a div, with class=“nav-decor”, which has a black background, this needs to be changed to transparent.

My solution was to have a “cameraView” class, which would set the ion-app, ion-content and .nav-decor to have a transparent background.

I used this CSS

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

And then these functions to show the camera after qrScanner.show() and hide it after I’m finished scanning

  showCamera() {
    (window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
  }
  hideCamera() {    
    (window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
  }

[johnny9x]

Add the following lines into src/theme/variables.scss:

// Shared Variables
$background-color: transparent;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$content-ios-transition-background: transparent;

They make background of app transparent.

[Piashsarker]

Both @bensearle & @johnny9x work well. But i would prefer to use @bensearle answer. Just add below CSS in your src/theme/variable.css file and access it from through javascript as @bensearle mention in any pages you want. Thanks, @bensearle & @johnny9x

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

[bitjson]

This seems to be solved. If you're still having trouble, feel free to open a new issue.

[leomontenegro6]

I got the same problem using Onsen UI on Cordova, but I managed to solve it thanks to the instructions provided here for Ionic:

TL;DR

div.page__background, div.page__content{
    background: transparent !important;
}

Longer Explanation

Onsen UI implements page navigation through custom elements. There's that does the navigation part, and there's elements inside the navigator that contains the pages. Inside a , there's two main

elements with classes "page_background" and "page_content". Both elements can't have a non-transparent background color.