[PhoneGap Build] BarcodeScanner Plugin Support

  • 1
  • Announcement
  • Updated 4 years ago
The BarcodeScanner plugin is now available on PhoneGap Build!

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!
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
  • stoked

Posted 8 years ago

  • 1
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
good job!

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?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Will look into this.
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
I noticed, this only happens on iOS, on Android it works just fine.
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
The latest version of BarcodeScanner will now lock to landscape, to match the Android behaviour.
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
Thanks you, great job, I will test it soon on our App.. Can't right now, developers iPhone is being used for promotional purposes ;)
But I trust you nailed it :)
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
Today I got my development test iPhone back, I tested your changes.
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é
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
Any news yet?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Will be locking this back to portrait for now, will have this updated shortly. See https://github.com/wildabeast/Barcode....
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
..also I now noticed that adding:

<gap:plugin name="BarcodeScanner" />

to my config, renamed my project on Android to "BarcodeScanner".

That must be a mistake :)
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
This is a bug, once fixed, will update this post: http://community.phonegap.com/nitobi/...
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Now fixed.
Photo of iat1977

iat1977

  • 4 Posts
  • 0 Reply Likes
Hi,

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?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
I think your first question is asking if you can change the graphics and text that overlay the camera when scanning? If so, this is not possible, at least on PhoneGap Build. If you'd like to do this, you'll need to customize the actual plugin code, and build yourself on your own machine using PhoneGap. The BarcodeScanner plugin code is located in the PhoneGap Plugins repo under iOS and Android.

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.
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
Actually my question is not about changing the graphics of the overlay.

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..
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Hi Rene -- that was actually a response to iat1977's reply, not your original issue.

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.
Photo of iat1977

iat1977

  • 4 Posts
  • 0 Reply Likes
Hi wildabeast,

Thanks a lot for that quick and clear response.
Photo of Philipp Grosswiler

Philipp Grosswiler

  • 7 Posts
  • 0 Reply Likes
I am having the issue that my app is locked to Portrait mode, but the barcode scanner changes to Landscape mode. I just wanted to know if there are any plans to implement an option to specify in which mode the plugin should open? It's very inconvenient for our customers to change the mode when they want to scan. Or can I set the orientation in the config.xml for the barcode scanner plugin?
Photo of Lehik

Lehik

  • 3 Posts
  • 0 Reply Likes
I'm having the same issue, my Android app is locked to Portrait and opening the scanner always rotates the display to landscape while scanning and back to portrait after the scan. The users of the app are scanning codes as fast as possible and rotating display is really inconvenient. I'd really like to see an changeable option for the scanner orientation.
Photo of Raxy Benex

Raxy Benex

  • 3 Posts
  • 0 Reply Likes
Hi all,
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);
}

});
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
This sounds to me like the plugin isn't being injected into your app.

Have you added the following to your config.xml?


<gap:plugin name="BarcodeScanner" />
Photo of raxy benex

raxy benex

  • 8 Posts
  • 0 Reply Likes
Tks, now it works: i've injected in your demo JS code from git and transformed it til it behaved as expected.
Photo of raxy benex

raxy benex

  • 8 Posts
  • 0 Reply Likes
Is there any hope to have a phonegap build support for this plugin in bbos 7 ?
Photo of Stéphane Gigandet

Stéphane Gigandet

  • 6 Posts
  • 0 Reply Likes
Hi,

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!

Photo of Stéphane Gigandet

Stéphane Gigandet

  • 6 Posts
  • 0 Reply Likes
upgrading to phonegap 2.1.0 seems to solve part of the problem. The red bar now is 90 degrees off though, on ios 6.
Photo of Michael Desigaud

Michael Desigaud

  • 2 Posts
  • 0 Reply Likes
i have some issues with the barcodescanner plugin using build.phonegap.com on Android

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 ?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Stéphane:
Should have this fixed up shortly. See the related github issue:
https://github.com/wildabeast/Barcode...
Photo of Stéphane Gigandet

Stéphane Gigandet

  • 6 Posts
  • 0 Reply Likes
Thank you very much Ryan! I don't have a Mac (or an iPhone) so I'm very happy to be able to build the iOS version of my app through Phonegap Build with the BarcodeScanner plugin.
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Michael:

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?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
I've updated the BarcodeScanner plugin on iOS to lock to landscape. Now works as expected for scanning 1-D barcodes.
Photo of Stéphane Gigandet

Stéphane Gigandet

  • 6 Posts
  • 0 Reply Likes
Wonderful, thank you very much! I can now submit my app to the app store. :-)
Photo of rene.vaessen

rene.vaessen

  • 114 Posts
  • 4 Reply Likes
Yes it works like a charm.. great!
Photo of Michael Desigaud

Michael Desigaud

  • 2 Posts
  • 0 Reply Likes
It works! i had to uninstall the application and reinstall it. Is it normal ? May be with plugins, it is recommended to perform a new fresh install from build.phonegap.com ?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
If you mean as opposed to just hydration, yes this is expected. Hydration will only update your uploaded web assets. If anything is changed on the native side (any config.xml configurations, or in this case, updating the native plugin code version, you will need to fully reinstall your application.
Photo of Todd

Todd

  • 6 Posts
  • 0 Reply Likes
I'm playing with the barcode scanner and I noticed that once the scanner is started there's no way to back out of it without actually scanning a barcode. Am I wrong?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
On Android the back button should cancel out, and on iOS there should be a cancel button...
Photo of Todd

Todd

  • 6 Posts
  • 0 Reply Likes
Ok, awesome!

Thanks!
Todd
Photo of pistoleta

pistoleta

  • 69 Posts
  • 1 Reply Like
Hi, is it possible to set up barcodescanner to use the front camera of the cellphone?
I know it sounds stupid but i need to know if its possible, THANKS
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
At the moment, this plugin doesn't support front-facing cameras. If you'd like this, you'll need to modify the plugin source code and build locally.
Photo of pistoleta

pistoleta

  • 69 Posts
  • 1 Reply Like
Thanks for the fast reply, i just wanted to know if there was something already implemented... no special need, just a customer has his back camera broken i think i rather him to wait till his cam is fixed.

Thanks ^_^
Photo of stella

stella

  • 2 Posts
  • 0 Reply Likes
I am interested in using the front facing camera for barcode scanning on iOS. Would enabling this only involve changing the code in setUpCaptureSession in CDVBarcodeScanner.mm to use the correct AVCaptureDevice rather than the default? Will any editing of the zxing library be needed? Thanks!
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Not sure -- I haven't had a chance to look into this yet, and I'm no android guru. I have a feeling its a fairly small change -- feel free to throw up a pull request!
Photo of jorrespam

jorrespam

  • 1 Post
  • 0 Reply Likes
I was hoping to use the front camera as well. Any tips on getting that fixed?
Photo of Sergio Botta

Sergio Botta

  • 3 Posts
  • 0 Reply Likes
Hi! any idea on this? using the front camera? no solution yet?
Photo of stella

stella

  • 2 Posts
  • 0 Reply Likes
Hi, I'd like the bar code scanner on iOS to stop scanning and return to the phonegap app after a certain amount of inactivity. Any advice on how to implement this would be greatly appreciated! I tried using window.setTimeout() in javascript to refresh the phonegap app webpage after an period of inactivity, but it seems that the timeout function will not be called until *after* the bar code scan is manually cancelled.
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
How can I implement this scanner in a hybrid mobile app developed in Visual Studio using HTML5 and Jquery mobile??

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?
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
You do not create the scanner object in PGB.

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

});

-------------------------------------------------------------
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Thanks for the help.

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.
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
No problem Devon :) As for testing, with PGB, that can be a bit of an issue IMO.

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
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Hi Tony.

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...
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
Glad to help Devon. When I first started with PG/PGB I was in here all the time looking for help and I am glad there were people then to help me so...karma :)

"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.
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
Devon, your original code from this thread should work now... see here :) http://community.phonegap.com/nitobi/...
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Thanks again man. You've been a great help!!

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??
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Ok I'm officially an idiot. I was accidentally referencing the wrong cordova.js file. One somehow found its way into my scripts folder and I was referencing that instead of the one Icenium puts in the project for me.
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
I'm still having an issue with the barcodescanner though.

My project is availbale here if anyone can help??

http://sdrv.ms/18BFKve
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
Glad you got that working. I looked at your project. Change your captureBarcode function back to this:


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 />';
}
}

Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
I really appreciate all the help bud. It's still not working but I'm sure I'll figure it out.

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!!
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Ok I got it working...

Thanks for the help bud.

:-D
Photo of Red2678

Red2678

  • 255 Posts
  • 0 Reply Likes
YAY! :D Thanks for your kind words. Have a great day Devon! #happycoding
Photo of Heinrich Kuhlmann

Heinrich Kuhlmann

  • 5 Posts
  • 0 Reply Likes
BarcodeScanner not working: Exception cannot read property 'barcodeScanner' of undefined
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
Photo of Heinrich Kuhlmann

Heinrich Kuhlmann

  • 5 Posts
  • 0 Reply Likes
Okay.
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.