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.
Archived Comments
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.
Did you read the readme?
OK Ray,
It's work with phonegap CLI.
Purrfect.
Thanks for the basic advice. Im not carefully read readme.
TQVM Bro.
Great example, thanks!
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
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.
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.
Do you have any trouble doing a basic PG app in VS?
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.
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.
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!
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. :)
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?
Um... you did read the article, right? I specifically point out that I did not use it.
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?
Well, I tested, I don't remember any focus issues. I wouldn't say I tested a *lot* though.
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?.
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.
Hi Raymond,
This is nice post. Can you please send whole working plugins on my email id?
Thanks,
Jignesh
No, you can download the bits yourself via the GitHub repo.
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?
John, you should consider posting this to the github repo for the project itself.
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!
Query - why did you fire up XCode? You should be able to
cordova run --device
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!
Dear Raymond,
I´m a real beginner and I don´t know how to install the plugin. Could you help me?
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...
Hi Raymond, Did you try the encode? I tested it in iOS 7 and I couldn't make it work.
Sorry no, I did not.
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
You should try to remote debug to see if an error is thrown in the console.
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
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
Nope - maybe check via Safari Remote Debugging to see if an error is thrown?
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
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.
Hi raymond,
Which barcode scanner is used by the phonegap barcode scanner plugin? Is it zxing barcode scanner? What about iOS?
I don't know - but since you can view the source code - why not check it yourself? :)
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 ?
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.
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);
}
);
}
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
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?
@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.
Have you tried to use chart google API to develop barcode scanning application?
________________________________
http://www.keepdynamic.com/...
That *makes* charts, not reads them, right?
Can I use this plugin with CF 11 Coldfusionbuilder3 in a cfclient tag?
No idea. I haven't used that feature of 11/CFB.
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
Sorry, no, nothing comes to mind.
ok ,thanks Raymond and thanks you for your time !
we keep in touch.
regards! Agustina
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?
Are you using the Ionic / ngCordova plugin?
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.
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?
Yes Raymond. It never found the barcode. But with 13mp camera it was working fine.
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.
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
Weird - unfortunately - I have to suggest what I did before - asking the developer. I've never seen that myself.
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?
Did you use my code exactly, or did you modify it? Did you maybe mess up your sucess handler?
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.
*boggle* That's a new one on me - thanks for sharing what made it work!
Hi Raymond,
Thankyou for this demo, will this only work on Android? Has anyone got this version working on IOS, BB10, WP8
Regards
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/#...
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.
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?
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.
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.
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 !
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.
It isn't my scanner - it is a plugin that anyone is allowed to use. However, it is for Cordova/Phonegap, not .Net.
this plugin doesn't work it have destroy my project don't try to use it please !!!
How did a Cordova plugin "destroy" your project? Did you file a bug report with them?
A detailed step by step blog: https://wp.me/p3Osmq-AA