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