Blog post: https://build.phonegap.com/blog/barco...
Usage instructions: https://build.phonegap.com/docs/plugins
Full JavaScript API: https://github.com/wildabeast/Barcode...
More plugins on the way!
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- stoked
Posted 8 years ago
- 114 Posts
- 4 Reply Likes
But my multi-orientation phonegap app,
keeps automatic changing orientation even when the
barcode scanner is up (scanning) this is really useless,
because now you have to rotate the box you want to scan,
instead of just tilting your mobile device.
Is there some way, to prevent the barcode scanner window from
changing orientation?
- 114 Posts
- 4 Reply Likes
<gap:plugin name="BarcodeScanner" />
to my config, renamed my project on Android to "BarcodeScanner".
That must be a mistake :)
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 4 Posts
- 0 Reply Likes
First, thanks for publish this plugin.
Is it anyway to customize the plugin showing the qr_code encoded at a frame or into the content section with a header and footer?
When we encode a text, Is it posible not to show the text itself?
ryan, Developer
- 1538 Posts
- 132 Reply Likes
On your second question, again this can't be done using the version of the BarcodeScanner thats on PhoneGap Build at the moment, you'd have to modify the plugin code and build yourself.
And -- if you add any features to it, feel free to contribute your source code back to the open-source plugin, and hopefully it can likely be integrated into PhoneGap Build as well.
- 114 Posts
- 4 Reply Likes
When I activate the scanner, it shows a red horizontal line. I notice that trying to scan a "normal" barcode (no qrcode) with the wronge orientation of that line, it does not work.
I mean, it doesn't scan the barcode when that red line is not in the same direction as the barcode.
If the barcode to scan is verticaly placed on for instance a pallet, you can not scan it, because the red line is always horizontal, no matter how you hold your phone.
This is only on iOS..
ryan, Developer
- 1538 Posts
- 132 Reply Likes
As for your original issue on orientation, I see that there is an issue logged on PG Plugins repo (and that you commented on it). We actually do set the orientation to landscape for the scanner on build -- but something isn't working right. Sorry for the delayed response, will prioritize this issue.
- 4 Posts
- 0 Reply Likes
Thanks a lot for that quick and clear response.
- 7 Posts
- 0 Reply Likes
- 3 Posts
- 0 Reply Likes
- 3 Posts
- 0 Reply Likes
is it me or this plugin does not work in iOS 6.1 nor in jellybean !??
my code below on JB says "Erreur du scan :Class not found",
and in iOS is totally silent and does nothing
Thanks in advance !
$(document).on(
"click",
"#scanQR",
function(event) {
alert("be4 try");
try {
window.plugins.barcodeScanner.scan(function(result) {
if (result.cancelled == true) {
navigator.notification.alert("Scan annulé !", nope,
"Code QR");
} else {
processVCARD(result.text);
}
}, function(error) {
navigator.notification.alert("Erreur du scan :" + error,
nope, "Code QR");
});
} catch (ex) {
alert(ex.message);
}
});
ryan, Developer
- 1538 Posts
- 132 Reply Likes
Have you added the following to your config.xml?
<gap:plugin name="BarcodeScanner" />
- 8 Posts
- 0 Reply Likes
- 8 Posts
- 0 Reply Likes
- 6 Posts
- 0 Reply Likes
On iOS, the image in the preview is rotated 90 degrees. (see attached picture)
Any idea of what could be going wrong? This is very weird.
My code is here:
https://github.com/openfoodfacts/open...
On Android it is working as expected, the image in the preview is not rotated.
Thank you!

- 6 Posts
- 0 Reply Likes
- 2 Posts
- 0 Reply Likes
I added the following
<gap:plugin name="BarcodeScanner" />
in my config.xml file and the following
<script src="barcodescanner.js"></script>
in my index.html file
But when i execute this code:
window.plugins.barcodeScanner.scan(function(result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format);
}, function(error) {
alert("Scanning failed: " + error);
});
I've got an error: "Cannot read property 'barcodeScanner' of undefined".
My android version is 4.1.2
Any ideas ?
ryan, Developer
- 1538 Posts
- 132 Reply Likes
Should have this fixed up shortly. See the related github issue:
https://github.com/wildabeast/Barcode...
- 6 Posts
- 0 Reply Likes
ryan, Developer
- 1538 Posts
- 132 Reply Likes
Do you have Hydration enabled? If so, can you disable hydration and let me know if it works then?
Also, can you provide your App ID?
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 6 Posts
- 0 Reply Likes
- 2 Posts
- 0 Reply Likes
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 6 Posts
- 0 Reply Likes
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 69 Posts
- 1 Reply Like
I know it sounds stupid but i need to know if its possible, THANKS
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 69 Posts
- 1 Reply Like
Thanks ^_^
- 2 Posts
- 0 Reply Likes
ryan, Developer
- 1538 Posts
- 132 Reply Likes
- 1 Post
- 0 Reply Likes
- 3 Posts
- 0 Reply Likes
- 2 Posts
- 0 Reply Likes
- 12 Posts
- 0 Reply Likes
I've tried following the instructions at https://build.phonegap.com/docs/plugins using the following code...
function captureBarcode() {
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
alert(scanner);
scanner.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);
}
);
}
but I'm getting the following error: Uncaught module cordova/plugin/BarcodeScanner not found.
Can anyone help?
- 255 Posts
- 0 Reply Likes
It is much easier actually :) Just include the BarceScanner.js ref in your index.html and add the gap:plugin in your config.xml.
-------------------------------------------------------------
In HEAD of index.html:
< script src=" barcodescanner.js" >< /script>
In Config.xml:
< gap:plugin name="BarcodeScanner" /> < !-- latest release -->
-------------------------------------------------------------
Then just call the plugin and use the success and fail callbacks like so:
-------------------------------------------------------------
window.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);
});
-------------------------------------------------------------
- 12 Posts
- 0 Reply Likes
I just have a question about testing. I'm using VS Nomad and the emulator is Ripple. How would I test to make sure the barcode scanner is working in the emulator. Is there any way to do this?
Regards,
Devon Britton.
- 255 Posts
- 0 Reply Likes
See, there really is no barcodescanner.js in your folder. Those files get added at "compile time" for each specific mobile OS.
So using VS Nomad and Ripple, for testing the UI and core PG functionality is great, but they do not add the PGB js for plugins. They only load the core Cordova/PG js.
In other words, you need to compile and test those functions on an actual device and leverage the DEBUG capabilities of PGB.
https://build.phonegap.com/docs/phone...
Hope that helps man!
~Tony
- 12 Posts
- 0 Reply Likes
I appreciate the help :-)
I've accepted the fact that I can only test when deployed to a device.
I've moved away from Nomad because it doesn't support plugins which is a bit useless for me seeing as they're essential for the application I'm building.
I'm now using Telerik's Icenium cloud based IDE to develop my application.
I put an alert in to see if the app was picking up the barcodeScanner and it is, but the issue is this.
When my application is deployed to a device, I'm getting an "ERROR: Attempting to call cordova.exec() before 'deviceready'. Ignoring." error.
From what I can tell this is because I'm using the wrong platform's version of cordova.js but when you create a phonegap application in Icenium it automatically inserts a cordova.js file for both android and iOS.
It's working perfectly in the simulator but not on the device.
I'll post this on the Icenium forums as well but I figure the more times you ask for help the more likely you are to receive it...
- 255 Posts
- 0 Reply Likes
"ERROR: Attempting to call cordova.exec() before 'deviceready'. Ignoring."
I do not think that is a version error.
So you cannot leverage anything cordova/pg, BEFORE the "deviceready" event has fired. Cordova.exec() (must be their app"initializer") is meant to fire after that event I am sure and for some reason is firing before.
Usually these IDE's like Icenium allow you access to a "console" of some sort. I would try to use it and console.log messages to debug and make sure that Cordova.exec() is called after the deviceready has fired.
One important thing to note is that if Icenium is inserting cordova.js files into a "production" export and you are then using PGB to compile again, you will likely get conflicts as PGB will also add the JS files. That could be the source of some headaches.
I use Dreamweaver CS6 for my PGB apps. They have the best integration with PGB (single click building). Adobe Creative Cloud is expensive, I know, but well well worth it for PGB development.
- 255 Posts
- 0 Reply Likes
- 12 Posts
- 0 Reply Likes
I've noticed that if I run the app in the simulator I get the "device ready" notification I've set up to run in the "onDeviceReady" function...but when I deploy to a device I don't get the notification.
It's very strange.
I though it might be because of the cordova.js files conflicting as you mentioned but I'm getting the error even if I remove the files from my folder before I build in PGB.
I'm really not sure what more to try. I've tried structuring the index.js file so that the very first thing that happens is the "document.addEventListener("deviceready", onDeviceReady, false);".
in my index.html I've tried calling the index.js both before and after calling cordova.js but it makes no difference...
I've used Icenium to make a prototype for a demonstration and built it using PGB and I never had this issue and I'm doing things the same way now...
Any other suggestions for me??
- 12 Posts
- 0 Reply Likes
- 12 Posts
- 0 Reply Likes
My project is availbale here if anyone can help??
http://sdrv.ms/18BFKve
- 255 Posts
- 0 Reply Likes
function captureBarcode()
{
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function(result) {
if (!result.cancelled)
{
that._addMessageToLog(result.format + " | " + result.text);
}
},
function(error) {
alert("Scanning failed: " + error);
}
);
function addMessageToLog(message)
{
var that = this,
currentMessage = that.resultsField.innerHTML;
that.resultsField.innerHTML = currentMessage + message + '<br />';
}
}
- 12 Posts
- 0 Reply Likes
I don't want to keep hassling you for newbie help!!!
Thanks for all your help to date. You are a gentleman and a scholar!!
- 12 Posts
- 0 Reply Likes
Thanks for the help bud.
:-D
- 255 Posts
- 0 Reply Likes
- 5 Posts
- 0 Reply Likes
sidenote: Hydration is disabled so I'm confused what's going on...
config.xml_
....
< preference name="phonegap-version" value="2.5.0" / >
....
< gap:plugin name="BarcodeScanner" / >
...
index.html
....
< script type="text/javascript" src="phonegap.js">< /script >
< script type="text/javascript" src="barcodescanner.js">< /script >
....
app.js
.....
$scope.qr = function(callback) {
try{
window.plugins.barcodeScanner.scan(
function (result) {
$scope.routeScope[callback](result);
},
function (error) {
Error.report(error, 'app.js:bottombar:qr:ScanError');
});
} catch (e) {
Error.report(e, 'app.js:bottombar:qr');
}
}
.....
AppID 289490
plz tell me how to fix this.
Thanks in advance,
Heinrich
- 5 Posts
- 0 Reply Likes
Thats what you have to do to make BarcodeScanner work (on Android) :
go to the js github page of their Project
atm: https://github.com/phonegap/phonegap-...
copy the content.
in your index.html:
instead of referring to phonegap builds 'working' barcodescanner.js
create your own js e.g. bs.js and paste the content from github there..
@phonegap build:
I seriously do not get it why you do not even do this in your barcodescanner.js (which I read through in my .apk):
if(!window.plugins) {
window.plugins = {};
}
if (!window.plugins.barcodeScanner) {
window.plugins.barcodeScanner = barcodeScanner;
}
in my humble opinion that may be the source of my error....
plz fix your barcodescanner.js so it works again.
If I do this fix I may have to include one barcodescanner.js for Android and for iOS since they differ. That is your job, which I pay for.
Sincerely,
Heinrich
This conversation is no longer open for comments or replies.
This conversation is no longer open for comments or replies.
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers










ryan, Developer
rene.vaessen
ryan, Developer
rene.vaessen
But I trust you nailed it :)
rene.vaessen
Unfortunately, I notice that altough the overlay is now fixed in orientation, the scanning engine only scannes horizontal (UPC-A) barcodes.
For our application, this is big problem.
Friendly greetz,
René
rene.vaessen
ryan, Developer