Android: camera not opening

[codafish-gmbh]

Expected Behaviour

Scan functionality works on iOS and Android.

Actual Behaviour

iOS: everything is working as expected. Android: camera not opening

Reproduce Scenario (including but not limited to)

Trying to scan QR code. Works perfectly on iOS, on Android different versions doesn't open. Is there anything special to configure such as permissions?

Platform and Version (eg. Android 5.0 or iOS 9.2.1) / (Android) What device vendor (e.g. Samsung, HTC, Sony...)

Android Pixel 3 (Android 10) Zebra TC25BJ (Android 7)

Cordova CLI version and cordova platform version

cordova --version 9.0.0 (cordova-lib@9.0.1)

cordova platforms Installed platforms: android 8.1.0 ios 5.1.1 Available platforms: browser ^6.0.0 electron ^1.0.0 osx ^5.0.0 windows ^7.0.0

Plugin version

cordova plugin version | grep phonegap-plugin-barcodescanner phonegap-plugin-barcodescanner 8.1.0 "BarcodeScanner"

Sample Code that illustrates the problem

 barcodeOptions = {
        preferFrontCamera : true, // iOS and Android
        showFlipCameraButton : true, // iOS and Android
        showTorchButton : true, // iOS and Android
        torchOn: true, // Android, launch with the torch switched on (if available)
        saveHistory: true, // Android, save scan history (default false)
        prompt : 'Place a barcode inside the scan area', // Android
        resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
        formats : 'QR_CODE,PDF_417', // default: all but PDF_417 and RSS_EXPANDED
        orientation : 'portrait', // Android only (portrait|landscape), default unset so it rotates with the device
        disableAnimations : true, // iOS
        disableSuccessBeep: false // iOS and Android

...

if (this.platform.is('ios') || this.platform.is('android')) {
   this.barcodeScanner.scan(this.barcodeOptions).then(code => {
            this.qrCode = code.text;
            this.isReady = true;
        }).catch(err => {
            console.log('Scanning failed: ', err);
        });
}

I'm also checking the permissions using (android-permissions) in app.component.ts:

this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
       result => console.log('Has permission?', result.hasPermission), err => 
       this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
);

AndroidManifest.xml:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />

I've tried everything but the camera scan mode will not appear on Android devices. Anyone an idea what could be the reason for that behavior?

[josemariagarcia95]

Having the same problem here. Found some threads all over github about how the solution is to make all the application transparent so you can see the camera, but that doesn't work for me.

[codafish-gmbh]

Well, hopefully someone can give us a hint @josemariagarcia95 :)

[josemariagarcia95]

Okey, I've just tried to run an example I found about this plugin in a blank ionic project (blank template), and it opens correctly and all the scan options seem to work, so maybe it's about to dig up in the "hiding the rest of the interface" idea @codafish-gmbh.

I'll try other things later.

[tva3777]

same issue here

[MitchelAwesome]

@josemariagarcia95 could you share your solution if you find one? I'm also stuck on this one for a few days now. As suggested on ionic forums it indeed has something to do with hiding the interface - which i tried with no luck.

EDIT: Did some digging. Stumbled upon a working solution here, without hiding anything: https://github.com/ionic-team/capacitor/issues/1213#issuecomment-559541468

[josemariagarcia95]

I haven't tried anything new in my project. What I did was to create a new Ionic project using the blank template, and the camera opens correctly there, so in my project, where I'm using the tabs template, it's probably a matter of hiding the tab the "Scan" button is in and the container of the tabs. But yeah, the idea is the same that in the issue you attached, make the background transparent where the camera is present.

[josemariagarcia95]

Hi everyone,

I've been doing some experiments and they've all failed, but I finally found a solution that didn't mean to create a new simple project.

TL DR: The issue is present when you use the barcode scanner through Cordova. If you use it through Capacitor, it seems to work.

Long explanation. I installed the barcode plugin using the first snippet I found in the Ionic docs, which installs the plugin using Cordova.

ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner

The Cordova plugin seems to work in some cases (in a project using the blanktemplate, for instance), but doesn't work in other app schemes (like the one from the tabs template). We call "not working" to calling the scan function and the view with the camera and the square where you should place the code not appearing, but receiving the error that scanner is already working if you try to call that function again. According to some posts and forums, it's a problem that the QR Code Scanner also has (or had in the past), in which the view with the camera and the reader appears under the application, being a popular workaround making the interface transparent when the scanning starts and making it visible back when the reading is done. Just to make a test, I defined a CSS class like this:

.has-camera {
     --background: transparent none !important"
     background: transparent none !important; 
}

And added it to several parts of the app when the scanned started. I tried several options of this (making the ion-content transparent, the app-tabs div, the app-root, the ion-app, the body) without results. Since the tabs template uses the z-index to specify what tab you're seeing, I also tried to move the app to the background using a low z-index value,(the whole app, the tabs div, the app_tab3 div, the ion-content), without any success.

Finally, I noticed that I was using Cordova to access this plugin, and although it is still fully compatible (presumably) with Ionic, it is my understanding that Capacitor is the preferrable system to use, so I uninstalled the Cordova plugin (ionic cordova plugin remove phonegap-plugin-barcodescanner) and used the snippet from the docs to install the plugin using Capacitor, which right now is:

npm install phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
ionic cap sync

The barcode scanner is now working in my application. Hope this can shed some light in anyone's way. If this doesn't work to you either, other ideas that I had was trying previous versions of this plugin, thing that has worked for others, so maybe it is another thing to try in the meanwhile.

[codafish-gmbh]

@josemariagarcia95: Thanks a lot for your input. I replaced Cordova by Capacitor and everything works like a charm!!! :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.