Twitter: raymondcamden


Address: Lafayette, LA, USA

Barcode Scanner sample, and new repo for Cordova examples

03-05-2014 26,804 views Mobile, Development 69 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.

69 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\node_modules\cordova\node_modules\plugman\src\util\plugins.js:37:29)
    at Object.fetchPlugin (C:\Users\sarulatha\AppData\Roaming\npm\node_modules\c
    ordova\node_modules\plugman\src\fetch.js:58:28)
    at C:\Users\sarulatha\AppData\Roaming\npm\node_modules\cordova\src\plugin.js
    :102:44
    at _fulfilled (C:\Users\sarulatha\AppData\Roaming\npm\node_modules\cordova\n
    ode_modules\q\q.js:798:54)
    at self.promiseDispatch.done (C:\Users\sarulatha\AppData\Roaming\npm\node_mo
    dules\cordova\node_modules\q\q.js:827:30)
    at Promise.promise.promiseDispatch (C:\Users\sarulatha\AppData\Roaming\npm\n
    ode_modules\cordova\node_modules\q\q.js:760:13)
    at C:\Users\sarulatha\AppData\Roaming\npm\node_modules\cordova\node_modules\
    q\q.js:821:14
    at flush (C:\Users\sarulatha\AppData\Roaming\npm\node_modules\cordova\node_m
    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/guide_cli_...
  • 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.CAMERA_FACING_FRONT) {

    # 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 THE_TARGET_ID_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?
  • Yooghe #
    Commented on 08-01-2014 at 4:22 AM
    Hi Raymond,
    I was testing this code on android device with 3MP camera. While scanning the device not able scan the codes. Is there any specification for mobile camera?

    Regards,
    Yooghe.
  • Commented on 08-01-2014 at 9:07 AM
    I'm not sure I understand your issue here. Are you saying the barcode scanner opened, and you scanned, but it never found the barcode you were pointing it at?
  • Yooghe #
    Commented on 08-02-2014 at 11:21 AM
    Yes Raymond. It never found the barcode. But with 13mp camera it was working fine.
  • Commented on 08-02-2014 at 11:35 AM
    If it works for one camera and not another, the best I can suggest is reaching out to the developer who built that particular plugin. They would be best suited to help you debug the issue.
  • Commented on 08-07-2014 at 1:30 AM
    Hi Ray,
    I am a big fan off you and always following you.
    When i use the qr reader,It works fine for me first time.Then what is happening is,If i start scanning again,The camera reads qr and give me a beep sound not calling the success or failure callbacks.It again launches the camera and give me beep sound.This happens for several time and i would like to inform you this.
    Thanks
  • Commented on 08-07-2014 at 8:43 AM
    Weird - unfortunately - I have to suggest what I did before - asking the developer. I've never seen that myself.
  • Steve Marvell #
    Commented on 08-15-2014 at 12:47 PM
    Thanks for the simple example. I'm managing to get the button to call the scanner, but once the barcode has scanned, it does not return to the application. In the log I get:

    08-15 18:37:55.028: V/MediaPlayer(13237): back from callback
    08-15 18:37:56.228: D/CaptureActivityHandler(13237): Got return scan result message
    08-15 18:37:57.488: W/IInputConnectionWrapper(13237): showStatusIcon on inactive InputConnection

    Have you encountered this type of problem before?
  • Commented on 08-15-2014 at 1:41 PM
    Did you use my code exactly, or did you modify it? Did you maybe mess up your sucess handler?
  • Steve Marvell #
    Commented on 08-15-2014 at 1:45 PM
    I made no modifications. However, getting a clue from a similar post on stacks, I enabled developer options and found that "Don't keep activities" was enabled. I have no idea how that could have been the case if I'd not got developer options enabled.

    The code is now working perfectly.

    Thanks for the prompt reply.
  • Commented on 08-15-2014 at 1:47 PM
    *boggle* That's a new one on me - thanks for sharing what made it work!
  • Commented on 10-02-2014 at 6:50 AM
    Hi Raymond,
    Thankyou for this demo, will this only work on Android? Has anyone got this version working on IOS, BB10, WP8

    Regards
  • Commented on 10-02-2014 at 6:53 AM
    According to the docs for the plugin, it supports: ios, android, windows8, wp8

    My URL in the entry is a bit old, this is the new URL: http://plugins.cordova.io/#/package/com.phonegap.p...
  • Rick R. #
    Commented on 10-21-2014 at 3:56 PM
    Hello - I'm setting up a simple PG app using the wildabeast instructions and believe that I have the app set up properly. When I click/tap the SCAN link, nothing happens on screen. The LogCat in Eclipse records the TouchEvent but no additional windows open,etc. It would appear that the missing piece is the ChildBrowser library but it generates several errors including org.apache.cordova.api.* cannot be resolved and Plugin (class) cannot be resolved to a type. I've installed Cordova via the CLI and this may be causing the issues. Thanks.
  • Commented on 10-21-2014 at 3:57 PM
    Not sure what to tell you about Eclipse - I only use the CLI. If you test and use Android or Safari Remote debug, do you see a better error in the console?
  • David D #
    Commented on 10-23-2014 at 10:18 AM
    When I'm on the scan view and hit the back button in Android, the function(result) {...} part is called. Is that an expected behaviour? I'd like the function(result) {...} is called only when a barcode is detected.
  • Commented on 10-23-2014 at 3:35 PM
    To change the behavior of the plugin you would need to modify the source code. Best I can suggest is to simply check the result, and if blank, do nothing. If a scan is required, then display a message to the user.

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