Twitter: raymondcamden


Address: Lafayette, LA, USA

Barcode Scanner sample, and new repo for Cordova examples

03-05-2014 17,844 views Mobile, Development 53 Comments

Phillip recently asked me for a simple barcode scanner example in Cordova, so I thought it would be a good opportunity to fire up another GitHub repo just for sample apps. I've got a couple of repos for presentations with PhoneGap/Cordova examples, but nothing dedicated. I created a new one, Cordova Examples, just for that purpose.

Right now it contains only one example, a barcode scanner example. The readme for the demo tells you exactly what to do to use the demo and hopefully this format makes sense. I'm only including the www bits since the platform directories are a) huge and b) platform dependent (obviously). Remember that the Cordova CLI lets you create a new project and copy in assets instead of using the regular Hello World app.

The barcode scanner is a pretty trivial app, but it did bring up an interesting issue. I initially tried to use the "official" (and yes, that's in quotes) barcode scanner plugin: com.phonegap.plugins.barcodescanner. This plugin does not work. It is an outdated copy and should be avoided - until it gets updated. Luckily I was able to reach the original author and use his version instead. He also mentioned the official copy will be updated soon. Just something to keep in mind. The "official" plugins may not always be what you want to use.

Oh - one more quick note. As much as I push folks to using the iOS Simulator because of how darn fast it is, one thing it doesn't do is emulate the camera. You can't use it for this demo.

53 Comments

  • cureorcurse #
    Commented on 03-06-2014 at 9:07 AM
    Hi Ray,

    I have try your example, somehow i got this Error =

    03-06 23:00:07.476: E/Web Console(28669): Uncaught TypeError: Cannot read property 'BarcodeScanner' of undefined:11

    can you help me solve this.

    TQ in advance.
  • Commented on 03-06-2014 at 9:10 AM
    Did you read the readme?
  • cureorcurse #
    Commented on 03-06-2014 at 8:45 PM
    OK Ray,

    It's work with phonegap CLI.
    Purrfect.

    Thanks for the basic advice. Im not carefully read readme.

    TQVM Bro.
  • Anonymous #
    Commented on 03-07-2014 at 10:35 AM
    Great example, thanks!
  • sarulatha #
    Commented on 03-10-2014 at 2:49 AM
    Hi ,
    I tried to install the plugin as u said in the example like
    C:\Users\sarulatha\barcode>cordova plugins add https://github.com/wildabeast/Bar
    codeScanner.git

    But i am getting the following error as below

    C:\Users\sarulatha\barcode>cordova plugins add https://github.com/wildabeast/Bar
    codeScanner.git
    Fetching plugin "https://github.com/wildabeast/BarcodeScanner.git"" target="_blank">https://github.com/wildabeast/BarcodeScanner.git&q...; via git clone

    Error: "git" command line tool is not installed: make sure it is accessible on y
    our PATH.
    at Object.module.exports.clonePluginGitRepo (C:\Users\sarulatha\AppData\Roam
    ing\npm\nodemodules\cordova\nodemodules\plugman\src\util\plugins.js:37:29)
    at Object.fetchPlugin (C:\Users\sarulatha\AppData\Roaming\npm\nodemodules\c
    ordova\node
    modules\plugman\src\fetch.js:58:28)
    at C:\Users\sarulatha\AppData\Roaming\npm\nodemodules\cordova\src\plugin.js
    :102:44
    at
    fulfilled (C:\Users\sarulatha\AppData\Roaming\npm\nodemodules\cordova\n
    ode
    modules\q\q.js:798:54)
    at self.promiseDispatch.done (C:\Users\sarulatha\AppData\Roaming\npm\nodemo
    dules\cordova\node
    modules\q\q.js:827:30)
    at Promise.promise.promiseDispatch (C:\Users\sarulatha\AppData\Roaming\npm\n
    odemodules\cordova\nodemodules\q\q.js:760:13)
    at C:\Users\sarulatha\AppData\Roaming\npm\nodemodules\cordova\nodemodules\
    q\q.js:821:14
    at flush (C:\Users\sarulatha\AppData\Roaming\npm\nodemodules\cordova\nodem
    odules\q\q.js:108:17)
    at process._tickCallback (node.js:415:13)
    at Function.Module.runMain (module.js:499:11)

    I have installed git tool also. even in git bash its showing me the error like
    C/Users/sarulatha/AppData/Roaming/npm/cordova: line12 : code: command not found
    I have updated my path also with the git.

    Please help.

    Thanks,
    Saru
  • Commented on 03-10-2014 at 5:53 AM
    Not to be rude, but did you read the error?

    "Error: "git" command line tool is not installed"

    It looks like you didn't install Git.
  • Bea_RG #
    Commented on 03-12-2014 at 4:22 PM
    Hi! I am having lots of problems trying to run the BarcodeScanner plugin with Visual Studio 2012.
    Do you know where I can find information about this? I have been checking all information but I don´t find a proper Phonegap template for visual studio 2012 and I have tried everything.

    Thanks in advance.
  • Commented on 03-13-2014 at 7:20 AM
    Do you have any trouble doing a basic PG app in VS?
  • Bea_RG #
    Commented on 03-13-2014 at 1:18 PM
    Hi Raymond,

    I am really new with PG. I have created a simple example which display the GPS coordinates. I run it in an Android phone and it works properly.
    My VS folder structure is:
    - scripts/jquery-1.8.2.min.js
    - scripts/jquery.mobile-1.3.1.min.js
    - scripts/main.js
    - styles/main.css
    - styles/jquery.mobile-1.3.1.min.css
    index.html

    Now, I want to add the barcodeScanner plugin but I cannot make it run. All examples that I see are with Eclipse. I have installed the pluggin, I am using the example for example:
    var scanner = cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");

    scanner.scan( function (result) { ... }

    and the error is always:"Class not found".

    Thanks very much for your help.
  • Commented on 03-13-2014 at 3:50 PM
    You said,

    " I am using the example for example: var scanner = cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");"

    Where do you see that? If you look at my code it isn't like that at all.
  • Commented on 03-19-2014 at 9:28 AM
    I've been using wildabeast's BarcodeScanner for awhile, but have started having issues with it in Cordova 3.4. I re-installed it using your above suggestion and still ran into the same problem. Right now is that everything appears to be set up correctly, yet XCode insists that BarcodeScanner does not exist:

    - CDVPlugin class CDVBarcodeScanner (pluginName: BarcodeScanner) does not exist.
    - ERROR: Plugin 'BarcodeScanner' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
    - -[CDVCommandQueue executePending] [Line 127] FAILED pluginJSON = [ "BarcodeScanner1922696710", "BarcodeScanner","scan", [ ] ]

    While it claims something must be wrong with my config.xml, I've checked and the correct entry definitely exists. Additionally the Plugins folder of my project does contain the CDVBarcodeScanner.mm file.

    <feature name="BarcodeScanner">
    <param name="ios-package" value="CDVBarcodeScanner" />
    </feature>

    I've had similar issues with the Geolocation plugin as well - whenever I add it in everything is in its proper place, but XCode insists there must be something wrong with my config.xml.

    Any ideas? Thanks!
  • Commented on 03-19-2014 at 10:00 AM
    I wrote this when 3.3 was out - can you try and see if it works? I'd try here but wifi is sucky and the npm operation would time out I think. (And obviously PG version shouldn't matter, but I'm seeing if it does matter. :)
  • TrtG #
    Commented on 03-24-2014 at 8:49 AM
    Hi Raymond,

    I'm using this com.phonegap.plugins.barcodescanner plugin for my iOS/android app and it works, but bad. The main problem is about focus and sometimes it is very tough or even impossible to scan a barcode. The failure rate is really to high to provide a stable feature.

    I chose this plugin beacause it seemed "official"... Did you find a better option?
  • Commented on 03-24-2014 at 8:57 AM
    Um... you did read the article, right? I specifically point out that I did not use it.
  • TrtG #
    Commented on 03-24-2014 at 10:47 AM
    Sorry I have read a little too fast and also I have misspoke... I'm using the wildabeast version too. But the question can remain i this way : Do you experience focusing problems with this plugin or is it perfeclty stable?
  • Commented on 03-24-2014 at 11:19 AM
    Well, I tested, I don't remember any focus issues. I wouldn't say I tested a lot though.
  • sarulatha #
    Commented on 03-25-2014 at 7:28 AM
    Hi,
    I am using barcode scanner plugin in my cordova. It works fine. Now my problem is i need to add a button, say cancel button in the camera preview screen. Only when the user clicks that button, it should close the scanner screen and not after each scan.
    I am completely new to phonegap and android and i dont know how to achieve this.
    Can you please provide me some references if you have?.
  • Commented on 03-25-2014 at 8:06 AM
    This post is not really meant to be a generic support forum for PhoneGap. If the plugin doesn't have a cancel button (I can't run my demo right now), then you would need to reach out to the plugin author to add it.
  • Jignesh #
    Commented on 04-15-2014 at 7:51 AM
    Hi Raymond,

    This is nice post. Can you please send whole working plugins on my email id?

    Thanks,
    Jignesh
  • Commented on 04-15-2014 at 9:15 AM
    No, you can download the bits yourself via the GitHub repo.
  • john #
    Commented on 04-18-2014 at 9:48 AM
    How do I modify com.google.zxing.client.android.captureactivity.jar so that I can increase the scan windows size? I downloaded https://github.com/wildabeast/BarcodeScanner/archi... and added it as an Android library project. Then when I run the main project, I don't see any new *.jar file generated. Any idea?
  • Commented on 04-18-2014 at 11:01 AM
    John, you should consider posting this to the github repo for the project itself.
  • Craig #
    Commented on 04-22-2014 at 11:37 PM
    Raymond - thank you! Worked like a charm. Just to fill in a few details for anyone who's struggling... I'm working on a Mac, building an iOS version to test with.

    1 - Clone Raymond's workspace (it has to be local). I put it in
    ./Cordova-Examples

    2 - Run the following commands to create your project (named, in my case 'barcode-test-new'):

    % cordova create barcode-test-new --copy-from=./Cordova-Examples/barcode/
    % cd barcode-test-new/
    % cordova platform add ios
    % cordova plugins add https://github.com/wildabeast/BarcodeScanner.git

    3 - Fire up Xcode - and point it at the .xcodeproj file that Cordova's already created for you ( barcode-test-new/platforms/ios/HelloWorld.xcodeproj in my iOS build case)

    I then did a build and installed it on my test iPhone 3GS. Worked first time out. Can't ask for much more than that!
  • Commented on 04-23-2014 at 9:26 AM
    Query - why did you fire up XCode? You should be able to

    cordova run --device
  • Craig #
    Commented on 04-23-2014 at 10:21 AM
    Why did I fire up Xcode? It was the simplest way that I knew of to get the App onto the iPhone, plus I use it as my IDE/editor... I'll give the 'cordova run --device' a try!
  • Eduardo #
    Commented on 05-14-2014 at 2:41 PM
    Dear Raymond,

    I´m a real beginner and I don´t know how to install the plugin. Could you help me?
  • Commented on 05-15-2014 at 7:04 AM
    If you run cordova at the command line, help is printed out, you can do this for individual commands as well. Please give this a shot. Please see this http://cordova.apache.org/docs/en/3.4.0/guidecliindex.md.html#The%20Command-Line%20Interface
  • Gaston #
    Commented on 05-19-2014 at 8:48 AM
    Hi Raymond, Did you try the encode? I tested it in iOS 7 and I couldn't make it work.
  • Commented on 05-19-2014 at 12:27 PM
    Sorry no, I did not.
  • Ronald #
    Commented on 05-20-2014 at 2:22 AM
    Hi Ray, im very new in this Cordova phonegap, I already install the plugin thorugh CLI and use your www, but the button "Start scan" doesnt do anything on my device.

    Is there any command that i have to run or config file i have to modify or jar to include?

    many thanks Ray
  • Commented on 05-20-2014 at 8:51 AM
    You should try to remote debug to see if an error is thrown in the console.
  • Gaston #
    Commented on 05-20-2014 at 9:35 AM
    Hi Raymond, I read in github that Encode doesn't work in iOS. Then I decide to use:
    https://github.com/monospaced/angular-qrcode Working 100%.

    Thanks
  • Johncy Binoy #
    Commented on 05-22-2014 at 7:08 AM
    Hi,

    do u have any idea why the phonegap barcode scanner getting freezed for the first time click and working fine if i exit from the scanning and click one more time in iOS.

    Thank You
  • Commented on 05-22-2014 at 7:16 AM
    Nope - maybe check via Safari Remote Debugging to see if an error is thrown?
  • Johncy Binoy #
    Commented on 05-29-2014 at 8:34 AM
    Hi Raymond,

    I have a button clicking on which will initialize the barcode scanner. I wants to show the header as well as the footer part when the scanner is ready to scan. Currently the barcode scanner takes the whole screen. Can you help me
  • Commented on 05-29-2014 at 9:02 AM
    Hmm. Afaik, you can't do that with the plugin. Could you do it with native code? I believe so. I've seen examples of modifying the camera capture UI, so in theory that would apply here as well.
  • Johncy Binoy #
    Commented on 06-03-2014 at 12:02 AM
    Hi raymond,

    Which barcode scanner is used by the phonegap barcode scanner plugin? Is it zxing barcode scanner? What about iOS?
  • Commented on 06-03-2014 at 9:36 AM
    I don't know - but since you can view the source code - why not check it yourself? :)
  • Nabil Kanzari #
    Commented on 06-10-2014 at 6:07 AM
    Hi Raymond.
    I'm trying to make your plugin work with the front camera, to do so i did the below changes.

    # GingerbreadOpenCameraInterface.java :
    if (cameraInfo.facing == Camera.CameraInfo.CAMERAFACINGFRONT) {

    # CameraManager.java :
    return new PlanarYUVLuminanceSource(data, width, height, rect.left, rect.top,
    rect.width(), rect.height(), true);

    i've run "android update project -p . -t THETARGETID_HERE -s" on the LibraryProject folder after that i've run "ant release". Tha generate a new .JAR to me "classes.jar" that i've renamed to com.google.zxing.client.android.captureactivity.jar and built the cordova project but nothing ... it's always the back cam !

    i'm trying to use that with a Samsung Tab 3, it's back cam don't have the autofocus so i can't use that to scan a barcode but it is possible with the front cam.

    Do you have an idea about how can i make it use the front one ?
  • Commented on 06-10-2014 at 9:41 AM
    To be clear, it isn't my plugin - I just made use of it. :) The first thing I'd do is ensure your new code is working. Perhaps have it log to the console and see if you see the message in Android's dev tools.
  • Commented on 06-16-2014 at 5:09 PM
    Good work always, thank you Raymond.

    This fork is Cordova 3.0 ready:
    https://github.com/Eccenux/BarcodeScanner

    cordova plugins add https://github.com/Eccenux/BarcodeScanner

    <p><button id="startScan">Start Scan</button></p>

    document.querySelector("#startScan").addEventListener("touchend", startScan, false);

    function startScan() {

       cordova.plugins.barcodeScanner.scan(
          function (result) {
             console.log('result',result);
             var resultFormatted = "Result: " + result.text + "<br/>" +
             "Format: " + result.format + "<br/>" +
             "Cancelled: " + result.cancelled;
             alert(resultFormatted);
          },
          function (error) {
             alert("Scanning failed: " + error);
          }
       );

    }
  • thomas #
    Commented on 06-19-2014 at 1:23 AM
    hey I am getting an error "Android java.lang.RuntimeException: Unable to instantiate activity ComponentInfo" in the logcat and the app closes with error "unfortunately app has stopped". Please help me with the error. thanks
  • Sunil #
    Commented on 06-19-2014 at 5:16 AM
    hey i was trying to add your plugin to my cordova project but was asking me for github username and password

    D:\xxxxxx\Android\workspace\barcodesample>cordova plugin add https://github
    .com/wildbeast/BarcodeScanner.git
    Fetching plugin "https://github.com/wildbeast/BarcodeScanner.git" via git clone
    Username for 'https://github.com':

    Do i have to register on git?
  • Commented on 06-19-2014 at 8:33 AM
    @thomas: It sounds like the plugin is crashing - and as I didn't see that - I'm not sure what to suggest. I'd file a bug report with the plugin owner.

    @sunil: That's not the command you want to use. See the one I used in the blog post.
  • cathyhill #
    Commented on 06-23-2014 at 9:18 PM
    Have you tried to use chart google API to develop barcode scanning application?







    http://www.keepdynamic.com/java-barcode-reader/
  • Commented on 06-23-2014 at 9:23 PM
    That makes charts, not reads them, right?
  • Commented on 07-10-2014 at 8:59 AM
    Can I use this plugin with CF 11 Coldfusionbuilder3 in a cfclient tag?
  • Commented on 07-10-2014 at 9:40 AM
    No idea. I haven't used that feature of 11/CFB.
  • Agustina #
    Commented on 07-11-2014 at 11:56 AM
    Raymond , i have a problem with the plugin ,for some reason (what im trying to solve for days ) sometimes i have to read twice the same code to get the information. Do you have idea , why it could happen?
    thanks,
    Agustina
  • Commented on 07-11-2014 at 3:57 PM
    Sorry, no, nothing comes to mind.
  • Agustina #
    Commented on 07-11-2014 at 4:16 PM
    ok ,thanks Raymond and thanks you for your time !
    we keep in touch.
    regards! Agustina
  • Giuseppe #
    Commented on 07-15-2014 at 2:45 PM
    Hi, I am new with ionic, I am using the plugin, it seems thatit works correctly, it reads the barcode, but then the application just close without any message nor alert, can you suggest me how to debug it?
  • Commented on 07-15-2014 at 2:46 PM
    Are you using the Ionic / ngCordova plugin?

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty