Cordova Barcodescanner - Use front facing camera

Question

I am using this barcodescanner (https://github.com/wildabeast/BarcodeScanner) on an app made using Cordova, specifically aimed at using on an Android device.

I have the following function set up in JavaScript:

$(document).ready(function(){    
    $('#scanner').click( function(){

        console.log('clicked'); //to see if the function is firing      
        cordova.plugins.barcodeScanner.scan(

        function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
        }, 
        function (error) {
          alert("Scanning failed: " + error);
        }
    );
    });    
});

as mentioned in the documentation provided for this plugin. I have added it into my project using the cordova CLI:

$ cordova add plugin https://github.com/wildabeast/BarcodeScanner.git

When I list the available plugins for my projects I can see that it is installed correctly. Also I can use the camera in my app with the button firing off the correct function and can scan using the back camera with no issues.

Is there any way of using the front camera for the scan? If it is not in the plugin, is there any way of setting the default camera used by the device, in the code, to use the front facing camera by default? The app that we are developing needs to specifically use the front facing camera only and does not need the back facing camera.

Any help will be appreciated.

Answer 1

Here is a breakdown of all the steps we took to get this right. A lot of input from different sources attributed to this working, but most of them not taking into consideration that we aren’t JAVA developers and that even some of the smallest JAVA practices are new or even unknown to us. This solution is from a web developer’s perspective.

The working repository can be found here for use: https://github.com/wilcovandeijl/camera_app

Thank you @Leo for your help. Your post had led us in the right direction, but here is a more detailed approach that we took that worked eventually. If you care to elaborate a little more on your post I would appreciate it, if it is a different solution than the one that eventually worked.

Firstly we added the barcode scanner plugin into our project using CMD command line:

cordova plugin add com.phonegap.plugins.barcodescanner

Change Directory to the LibraryProject file that comes default with the downloaded plugin:

cd <project directory>\plugins\com.phonegap.plugins.barcodescanner\src\android\LibraryProject

Add a new file in this directory called local.properties with the path to your SDK ie

sdk.dir=C:\\Users\\QQQ\\Documents\\Android\\adt-bundle-windows-x86_64\\sdk

open the file

<Project directory>plugins\com.phonegap.plugins.barcodescanner\src\android\LibraryProject\src\com\google\zxing\client\android\camera\open\GingerbreadOpenCameraInterface.java

edit line 48 to read: if (cameraInfo.facing == Camera.CameraInfo.CAMERA_FACING_FRONT)

in CMD Change directory to:

cd <project directory>\plugins\com.phonegap.plugins.barcodescanner\src\android\LibraryProject

In CMD type ant release. This creates a classes.jar file that can be found in <project directory > \plugins\com.phonegap.plugins.barcodescanner\src\android\LibraryProject\bin.

If you got a Unable to resolve target 'android-17' error, take a look at this solution.

One folder up, delete the com.google.zxing.client.android.captureactivity.jar file, but remember to copy the name of the file. Drop your classes.jar file into this directory ( \plugins\com.phonegap.plugins.barcodescanner\src\android\LibraryProject ) and rename it to com.google.zxing.client.android.captureactivity.jar

Finally also copy the newly created com.google.zxing.client.android.captureactivity.jar file to the <project directory>\platforms\android\libs directory.

You are now ready to run the command cordova build android in CMD to compile your APK and run on your device.

Thank you to @Leo for your help with this we appreciate it a lot.

Answer 2

I don't think there's a way for selecting which camera to use directly from the BarcodeScanner plugin. The way I resolved this issue was to edit the ZXING library that this plugin uses for the scanning functionality. Unfortunately, the ZXING library that comes when you install the BarcodeScanner plugin is already compiled so you can't edit any of the files.

Please make a backup of your Android project before you make any changes. This is how I got my app to use the front facing camera:

1. The first thing you need to do is to download the BarCodeScanner library from GitHub (https://github.com/wildabeast/BarcodeScanner), the Android ZXING library is located under the /src/android/LibraryProject/src directory.
2. Next, delete the current ZXING library your Android project is using, in my case it was under the "Android Private Libraries" (please note the name of your package as you will need it for the next step)
3. Next copy into your project libraries the ZXING library you downloaded and make sure to name it the same as the one you deleted in the previous step

4. Once the library has been imported, you only need to change one line of code for your project to use the front facing camera. The file is in the package com.google.zxing.client.android.camera.open and in my case it was named "GingerbreadOpenCameraInterface.java". There is an if statement around line 48:

   if (cameraInfo.facing == Camera.CameraInfo.CAMERA_FACING_BACK)

Simply change the "CAMERA_FACING_BACK" to "CAMERA_FACING_FRONT" and your application should use the front facing camera by default.

If you get any errors related to the lines containing "import com.google.xzing.client.android.R" just commented them out and the errors should go away.