Reading barcode or QRcode using cordova or Phonegap

Sharing code how you can easily install and configure “phonegap-plugin-barcodescanner” plugin for reading barcode and QRcode in hybrid mobile app. I am using cordova for development if you are using PhoneGap just replace “Cordova” with “phonegap” in commands below, rest will be same.

Step 1: Install plugin “phonegap-plugin-barcodescanner” using below command

cordova plugin add phonegap-plugin-barcodescanner

After running your will get “BUID SUCCESSFUL” message as below:
cordova_plugin_installation

Step 2: Add below code in your html. On click we are triggering scan() function which will launch camera and after reading data will be available in scan() function.

<input type='button' value='scann' onclick='scanApp.scan()' id='scanData'>

Step 3: Create file name “codescanner.js” and add below code:

var scanApp = {   
    // Application Constructor
    initialize: function () {
        this.bindEvents();
    },

    bindEvents: function () {
        document.addEventListener('deviceready', this.onDeviceReady);
    },

    onDeviceReady: function () {
        console.log('Received Device Ready Event');
        Log.initialize(app.displayLogLine);
    },
    scan: function () {
        cordova.plugins.barcodeScanner.scan(
                function (result) {
                    alert("Barcode/QR code data\n" + "Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled);
                },
                function (error) {
                    alert("Scanning failed: " + error);
                }
        );
    },
};

Step 4: Include script file “codescanner.js” in your HTML file where you added button in step 2.
Step 5: Run below command to build it.

cordova run android 

Now you can try reading any QR or barcode to get the data.
Hope it will help someone.

You have not accepted the license agreements of the following SDK components

While building Android application you may get error for not accepting license agreement like below:

You have not accepted the license agreements of the following SDK components:
[Android SDK Platform 26, Android SDK Build-Tools 26.0.2].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

You can fix this issue by accepting the agreement as below:
1) Open command line and Navigate to the folder “Android\sdk\tools\bin” and run below command:

sdkmanager --licenses

Your Android SDK folder is where you install it OR else you can go to below folder and execute the same command:

C:\Users\{your-username}\AppData\Local\Android\sdk\tools\bin\

2) Once you run above command it will ask to review licence that are not accepted like below:
license
3) Press “y” and then enter key to proceed and accept the licenses.[below are 6 licenses in my case that need to be accepted.

1/6: License android-googletv-license:
2/6: License android-sdk-license:
3/6: License android-sdk-preview-license:
4/6: License google-gdk-license:
5/6: License intel-android-extra-license:
6/6: License mips-android-sysimage-license:

4) Once you accept all of them you must be able to build the project.

Hope it will help someone to fix the issue.

Cordova: sorry the android camera encountered a problem

When I build for android with cordova plugin “cordova-plugin-barcodescanner” after launching camera it is giving me error like below:
sorry, the android camera encountered a problem. you may need to restart the device

cordova-camera issue

My environment detaiils:
Platform : android 6.2.3
device: MI Note 4 with MIUI 8.5
Cordova : 7.0.1
plugin: cordova-plugin-barcodescanner

After google, found that it is permission issue with android 6. So to fix the issue I configure platform to android 5.0 but it does not work for me.
Then I figure out that there is another permission required in MIUI secruity system and after enabling it, camera started working.
Following are the steps you can follow to update the setting:
1) Go to Security.
2) Click on “Permissions” and again select “Permissions”
3) Now from the list, click on “Camera”.
4) It will list all the apps installed. Look for your app and enable the permission.

Now try to run the application again it should launch the camera to read code.
Hope someone will benefit by this.

Not sure, this issue might be with Xiaomi specifically.

  Comments or questions are welcome  

Getting issue after installation of cordova-barcodescanner-plugin

To Read QR code scanner I install “cordova-barcodescanner-plugin” plugin from the command prompt. Installation is successful but when tried build it for android it giving me error as below
"The value of the attribute "prefix="xmlns",localpart="android",rawname="xmlns:android"" is invalid. Prefixed namespace bindings may not be empty."

I tried a lot debugging it but could not. After googling found that different version of the plugin will work then I did below steps to overcome plugin issue:
1. First, you need to uninstall it by using the command:
> Cordova plugin rm cordova-barcodescanner-plugin
Try building now. It should work.
2. Now install “cordova-plugin-barcodescanner@0.7.1” using below command:
> cordova plugin add cordova-plugin-barcodescanner@0.7.1
3. Update config.xml file with ‘xmlns:android=”http://schemas.android.com/apk/res/android”‘.
4. update config.xml with below lines:

<config-file mode="merge" parent="/*" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.CAMERA" xmlns:android="http://schemas.android.com/apk/res/android" />
    <uses-feature android:name="android.hardware.camera" xmlns:android="http://schemas.android.com/apk/res/android" />
    <uses-feature android:name="android.hardware.camera.autofocus" xmlns:android="http://schemas.android.com/apk/res/android" />
</config-file>

Now if you try to build the project (cordova run android) it will work.
Above changes help me to over come the issue. Hope it will help someone!!!

Reff: https://github.com/phonegap/phonegap-plugin-barcodescanner

  Comments or questions are welcome  

Xiaomi mi note 4: Install via USB: The device is temporarily restricted

While doing Android development you need to install app using USB but Xiaomi Note 4 will not allow you to do unless you enable installing from USB option. Follow below steps to enable it:

A) First you need to enable Developer Options. If you are already enable it, you can skip to step “B” directly.
1. Go to “Setting”.
2. Look for “About Phone” and click on it.
3. click “MIUI version” 7 times to enable “Developer option”.
You will see toast message “now you are developer”.
Now you need to enable few options in “Developer option” like “Developer options” (first in the list), “Stay awake” and “USB Debugging”.

B) Update “Install via USB
1. Go to Settings > Additional settings > Developer options.
2. Enable “Install via USB” you may get error like “the device is tempeorarily restricted.

install via USB

install via USB

3. To resolve above error you need to make WIFI off and make mobile data on and then enable the option “Install via USB”. it will work for you.

If you are working on older version MIUI (below 8) Install via USB option can be enable as below:
1. Go to “Security” and click on “options” at the top right corner of the screen.
2. Look for “Feature Settings” block and click on “Permissions”
3. Now you can toggle the “Install via USB”
Note: I am working on Xiaomi Note 4 with MIUI 8.5 version.

Hope it will help someone!!!

  Comments or questions are welcome