March 5, 2014 (This post is more than 2 years old.)

Barcode Scanner sample, and new repo for Cordova examples

development mobile

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.

Support this Content!

If you like this content, please consider supporting me. You can become a Patron, visit my Amazon wishlist, or buy me a coffee! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.

Archived Comments

Comment 1 by cureorcurse posted on 3/6/2014 at 8:07 PM

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.

Comment 2 by Raymond Camden posted on 3/6/2014 at 8:10 PM

Did you read the readme?

Comment 3 by cureorcurse posted on 3/7/2014 at 7:45 AM

OK Ray,

It's work with phonegap CLI.
Purrfect.

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

TQVM Bro.

Comment 4 by Anonymous posted on 3/7/2014 at 9:35 PM

Great example, thanks!

Comment 5 by sarulatha posted on 3/10/2014 at 11: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/wildabea...
codeScanner.git

But i am getting the following error as below

C:\Users\sarulatha\barcode>cordova plugins add https://github.com/wildabea...
codeScanner.git
Fetching plugin "https://github.com/wildabea..." 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

Comment 6 by Raymond Camden posted on 3/10/2014 at 2:53 PM

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.

Comment 7 by Bea_RG posted on 3/13/2014 at 1:22 AM

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.

Comment 8 by Raymond Camden posted on 3/13/2014 at 4:20 PM

Do you have any trouble doing a basic PG app in VS?

Comment 9 by Bea_RG posted on 3/13/2014 at 10: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.

Comment 10 by Raymond Camden posted on 3/14/2014 at 12:50 AM

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.

Comment 11 by Mary posted on 3/19/2014 at 6:28 PM

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.

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!

Comment 12 by Raymond Camden posted on 3/19/2014 at 7:00 PM

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. :)

Comment 13 by TrtG posted on 3/24/2014 at 5:49 PM

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?

Comment 14 by Raymond Camden posted on 3/24/2014 at 5:57 PM

Um... you did read the article, right? I specifically point out that I did not use it.

Comment 15 by TrtG posted on 3/24/2014 at 7:47 PM

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?

Comment 16 by Raymond Camden posted on 3/24/2014 at 8:19 PM

Well, I tested, I don't remember any focus issues. I wouldn't say I tested a *lot* though.

Comment 17 by sarulatha posted on 3/25/2014 at 4:28 PM

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?.

Comment 18 by Raymond Camden posted on 3/25/2014 at 5:06 PM

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.

Comment 19 by Jignesh posted on 4/15/2014 at 4:51 PM

Hi Raymond,

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

Thanks,
Jignesh

Comment 20 by Raymond Camden posted on 4/15/2014 at 6:15 PM

No, you can download the bits yourself via the GitHub repo.

Comment 21 by john posted on 4/18/2014 at 6:48 PM

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/wildabea... 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?

Comment 22 by Raymond Camden posted on 4/18/2014 at 8:01 PM

John, you should consider posting this to the github repo for the project itself.

Comment 23 by Craig posted on 4/23/2014 at 8:37 AM

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/wildabea...

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!

Comment 24 by Raymond Camden posted on 4/23/2014 at 6:26 PM

Query - why did you fire up XCode? You should be able to

cordova run --device

Comment 25 by Craig posted on 4/23/2014 at 7:21 PM

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!

Comment 26 by Eduardo posted on 5/14/2014 at 11:41 PM

Dear Raymond,

I´m a real beginner and I don´t know how to install the plugin. Could you help me?

Comment 27 by Raymond Camden posted on 5/15/2014 at 4:04 PM

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/d...

Comment 28 by Gaston posted on 5/19/2014 at 5:48 PM

Hi Raymond, Did you try the encode? I tested it in iOS 7 and I couldn't make it work.

Comment 29 by Raymond Camden posted on 5/19/2014 at 9:27 PM

Sorry no, I did not.

Comment 30 by Ronald posted on 5/20/2014 at 11: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

Comment 31 by Raymond Camden posted on 5/20/2014 at 5:51 PM

You should try to remote debug to see if an error is thrown in the console.

Comment 32 by Gaston posted on 5/20/2014 at 6:35 PM

Hi Raymond, I read in github that Encode doesn't work in iOS. Then I decide to use:
https://github.com/monospac... Working 100%.

Thanks

Comment 33 by Johncy Binoy posted on 5/22/2014 at 4:08 PM

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

Comment 34 by Raymond Camden posted on 5/22/2014 at 4:16 PM

Nope - maybe check via Safari Remote Debugging to see if an error is thrown?

Comment 35 by Johncy Binoy posted on 5/29/2014 at 5:34 PM

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

Comment 36 by Raymond Camden posted on 5/29/2014 at 6:02 PM

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.

Comment 37 by Johncy Binoy posted on 6/3/2014 at 9:02 AM

Hi raymond,

Which barcode scanner is used by the phonegap barcode scanner plugin? Is it zxing barcode scanner? What about iOS?

Comment 38 by Raymond Camden posted on 6/3/2014 at 6:36 PM

I don't know - but since you can view the source code - why not check it yourself? :)

Comment 39 by Nabil Kanzari posted on 6/10/2014 at 3:07 PM

Hi Raymond.
I'm trying to make your plugin work with the front camera, to do so i did the below changes.

# GingerbreadOpenCameraInterf... :
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 ?

Comment 40 by Raymond Camden posted on 6/10/2014 at 6:41 PM

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.

Comment 41 by Michael Lee posted on 6/17/2014 at 2:09 AM

Good work always, thank you Raymond.

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

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

<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);
}
);

}

Comment 42 by thomas posted on 6/19/2014 at 10: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

Comment 43 by Sunil posted on 6/19/2014 at 2:16 PM

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/wildbeas..." via git clone
Username for 'https://github.com':

Do i have to register on git?

Comment 44 by Raymond Camden posted on 6/19/2014 at 5:33 PM

@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.

Comment 45 by cathyhill posted on 6/24/2014 at 6:18 AM

Have you tried to use chart google API to develop barcode scanning application?

________________________________
http://www.keepdynamic.com/...

Comment 46 by Raymond Camden posted on 6/24/2014 at 6:23 AM

That *makes* charts, not reads them, right?

Comment 47 by Marty Sullivan posted on 7/10/2014 at 5:59 PM

Can I use this plugin with CF 11 Coldfusionbuilder3 in a cfclient tag?

Comment 48 by Raymond Camden posted on 7/10/2014 at 6:40 PM

No idea. I haven't used that feature of 11/CFB.

Comment 49 by Agustina posted on 7/11/2014 at 8:56 PM

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

Comment 50 by Raymond Camden posted on 7/12/2014 at 12:57 AM

Sorry, no, nothing comes to mind.

Comment 51 by Agustina posted on 7/12/2014 at 1:16 AM

ok ,thanks Raymond and thanks you for your time !
we keep in touch.
regards! Agustina

Comment 52 by Giuseppe posted on 7/15/2014 at 11: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?

Comment 53 by Raymond Camden posted on 7/15/2014 at 11:46 PM

Are you using the Ionic / ngCordova plugin?

Comment 54 by Yooghe posted on 8/1/2014 at 1:22 PM

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.

Comment 55 by Raymond Camden posted on 8/1/2014 at 6:07 PM

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?

Comment 56 by Yooghe posted on 8/2/2014 at 8:21 PM

Yes Raymond. It never found the barcode. But with 13mp camera it was working fine.

Comment 57 by Raymond Camden posted on 8/2/2014 at 8:35 PM

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.

Comment 58 by Irshad KK posted on 8/7/2014 at 10: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

Comment 59 by Raymond Camden posted on 8/7/2014 at 5:43 PM

Weird - unfortunately - I have to suggest what I did before - asking the developer. I've never seen that myself.

Comment 60 by Steve Marvell posted on 8/15/2014 at 9: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?

Comment 61 by Raymond Camden posted on 8/15/2014 at 10:41 PM

Did you use my code exactly, or did you modify it? Did you maybe mess up your sucess handler?

Comment 62 by Steve Marvell posted on 8/15/2014 at 10: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.

Comment 63 by Raymond Camden posted on 8/15/2014 at 10:47 PM

*boggle* That's a new one on me - thanks for sharing what made it work!

Comment 64 by syedshah posted on 10/2/2014 at 3:50 PM

Hi Raymond,
Thankyou for this demo, will this only work on Android? Has anyone got this version working on IOS, BB10, WP8

Regards

Comment 65 by Raymond Camden posted on 10/2/2014 at 3:53 PM

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/#...

Comment 66 by Rick R. posted on 10/22/2014 at 12:56 AM

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.

Comment 67 by Raymond Camden posted on 10/22/2014 at 12:57 AM

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?

Comment 68 by David D posted on 10/23/2014 at 7:18 PM

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.

Comment 69 by Raymond Camden posted on 10/24/2014 at 12:35 AM

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.

Comment 70 by fun posted on 11/1/2014 at 7:28 AM

Hi Raymond,

Thank you fort the tuto and the repo.

It was really fun tout read all the comments....
Some of them are really stupids!

"I did not read the readme"
"YOUR plugin does not work"
...

People should try to think by themself and i really don t understand how they can code when they really seemed so stupid.

Keep up the good work ! And don t loose your time answering so dumb comments !

Comment 71 by Ada Green posted on 1/9/2015 at 4:25 AM

I love this. Now I using anther barcode scanner, which will be expired soon, can I use your barcode scanner to scan barcode in .net project as well? I need such a substitute. Thanks in advance.
Best regards.

Comment 72 (In reply to #71) by Raymond Camden posted on 1/9/2015 at 11:54 AM

It isn't my scanner - it is a plugin that anyone is allowed to use. However, it is for Cordova/Phonegap, not .Net.

Comment 73 by kratos posted on 9/27/2018 at 9:19 AM

this plugin doesn't work it have destroy my project don't try to use it please !!!

Comment 74 (In reply to #73) by Raymond Camden posted on 9/29/2018 at 1:40 PM

How did a Cordova plugin "destroy" your project? Did you file a bug report with them?

Comment 75 by Baparoutu Varma posted on 1/4/2019 at 6:14 AM

A detailed step by step blog: https://wp.me/p3Osmq-AA

Support this Content!

Archived Comments

Webmentions