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

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Photo of Heinrich Kuhlmann

Heinrich Kuhlmann

  • 5 Posts
  • 0 Reply Likes
thx for your quick response, I will try your solution.
Can I subscribe somewhere to see such vital changes?
Photo of Heinrich Kuhlmann

Heinrich Kuhlmann

  • 5 Posts
  • 0 Reply Likes
Seems to work. Thanks again.
Photo of Simon Keary

Simon Keary

  • 2 Posts
  • 0 Reply Likes
I was having the same problem with the scanner not working. Unfortunately, the steps above didn't work for me. I then got a "class not found" error. This is what I did:

* Removed reference to barcodescanner.js
* Created new file bs.js with contents from github link supplied above
* Added reference to bs.js in index.html

I'm not sure if it was intended but the github link above is to the ios version of barcodescanner.js. After getting the error I then tried to use https://raw.github.com/phonegap/phone... and this seemed to work.

Could this be fixed properly, please?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Photo of Heinrich Kuhlmann

Heinrich Kuhlmann

  • 5 Posts
  • 0 Reply Likes
make sure to include < gap:plugin name="BarcodeScanner" / > in your config.xml disable hydration and reinstall app
Photo of Simon Keary

Simon Keary

  • 2 Posts
  • 0 Reply Likes
Hi Ryan,

Just noticed your comment. That seems to work :)

Just a question but why should apps using a previous version of phonegap be affected by a change in plugin api? Surely the point of specifying a version of phonegap is that the api is expected to stay constant for that version?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Thats true for the core API, but not for plugins.

When you specify a phonegap-version, as you say you're going to use a specific core API version. However there's no Plugin version directly associated with a PhoneGap version, so when that build occurs, we use the latest version of that plugin no matter which version of PhoneGap you're using.

Admittedly this may cause confusions sometimes, but we like to encourage users to use the latest versions of PhoneGap and supported Plugins, so that we can spend as little resources as possible maintaining builds of old versions and old plugins.
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Thanks Heinrich -- thats an important part we haven't made clear enough regarding plugins and Hydration -- we've updated the plugin native code, and when this happens, you need to completely reinstall the app -- Hydration will not update the native code. Its a missing feature of Hydration to notify the user when they need to do a full reinstall.
Photo of Devon Britton

Devon Britton

  • 12 Posts
  • 0 Reply Likes
Hi everyone...me again...lol

I was just wondering if there's any way to enable continuous scanning using this plugin??
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Currently not, would require some significant changes to the plugin code.

http://github.com/phonegap-build/Barc...
Photo of Elias Turbay

Elias Turbay

  • 1 Post
  • 0 Reply Likes
Hi Ryan,

I'm wondering if there's already some chance to use a custom overlay with the cloud build.
I read that you said it's not possible 8 months ago:

"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"

I was trying to get it working without luck. But I don't understand why it's working properly when I build it locally on XCode just dropping my .xib within the www folder =/

Thanks in advance!
Photo of David Kates

David Kates

  • 1 Post
  • 0 Reply Likes
Excellent plugin... thank you.

I was thinking of using the front facing camera of an iPad, Nexus 7 (anything supported) in a kiosk application. I want to use PhoneGap Build and BarcodeScanner. Is there a way I can specify the front camera?

I also want to show the scanner "window" on the same screen as my app - in other words, not a full screen scanner. Can I place the scanner window in a div or something and have it showing a 2 or 3 inch square?

Thanks.
Photo of Ramiro Saenz

Ramiro Saenz

  • 5 Posts
  • 0 Reply Likes
Hi David.

Did you find an answer for the second question? (scanner window on the same screen)

I'm trying to do the same using Sencha Touch. My idea is to have the barcode scanner continuously scanning and displays results in my app, so I don't need to show the scanner window (but if is required, I can put it in a hidden div) to the user.

Thanks.
Photo of Dirk-Jan Hoek

Dirk-Jan Hoek

  • 6 Posts
  • 0 Reply Likes
Love the plugin, been using it alot.

Now that our development is centered around Phonegap:Build however, we're having one tiny (but crucial) issue:

The scanning-area on IOS somehow got smaller? It used to fill the width of the screen (our app forces portrait). Now that it's smaller, it makes it very hard (read: practically impossible) to scan long CODE_39 codes.

The reason for that is (i assume) the fact that you have to increase the distance between camera and barcode, resulting in a lower quality image. The scanning-area on Android isn't much bigger but does recognize the same codes in a split second.

I've already posted this issue on github (wildebeast as well asphonegap-plugins), but haven't received any reactions yet.

I'd like to know if anyone else has the same issue?
Photo of Álan Gularte

Álan Gularte

  • 10 Posts
  • 0 Reply Likes
I'm trying to user Phonegap Build Barcode Scanner Plugin in my jQuery Mobile app building with Phonegap Build, but it doesn't work.

My app have some HTMLs files.

In my index.html file I have this:


<html lang="pt-br">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Save Points</title>

<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/themes/savepoints.min.css" />
<link rel="stylesheet" href="css/codiqa.ext.css">

<!-- jQuery and jQuery Mobile -->
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page-index">
<div data-role="content">//content here</div>
</div>
</body>
</html>


Here I have a page where I want to user Barcode Scanner functionally:


<!DOCTYPE html>
<html lang="pt-br">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Save Points</title>

<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/themes/savepoints.min.css" />
<link rel="stylesheet" href="css/codiqa.ext.css">

<!-- jQuery and jQuery Mobile -->
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_sample" data-theme="a">
<div data-role="content">
<div id="content">
<p><a href="#" class="topcoat-button" id="scan">SCAN</a></p>
<p><a href="#" class="topcoat-button" id="encode">ENCODE</a></p>
</div>
</div>
</div>
</body>
</html>


In the file codiqa.ext.js I have this:


$(document).on('pageshow', '#page_sample', function(e) {
$('#scan').click(function () {
alert('scanning');

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

alert("Scanner result: \n" +
"text: " + result.text + "\n" +
"format: " + result.format + "\n" +
"cancelled: " + result.cancelled + "\n");
alert(result);
},function (error) {
console.log("Scanning failed: ", error);
});
});
});


My config.xml file:


<!-- Barcode Scanner -->
<gap:plugin name="com.phonegap.plugins.barcodescanner" />


Debugging this code, I realized that the script stops in line:

var scanner = cordova.require("cordova/plugin/BarcodeScanner");

I'm following the official documentation, that says that I don't have to put the file barcodescanner.js in my project, just its reference in the html header.

Do someone know if I'm doing it well?

Thanks in advance.

UPDATE:

I tried Laurie's suggestion, but I don't get success.


$(document).on('pageshow', '#page_sampe', function(e) {
$('#scan').click(function () {
alert('scanning');

cordova.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 Laurie Clark

Laurie Clark

  • 11 Posts
  • 0 Reply Likes
Hi,

The cordova.require part seems wrong, try this :

cordova.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 Laurie Clark

Laurie Clark

  • 11 Posts
  • 0 Reply Likes
Ahh great to hear that, I'm actually having problems with push notifications, so been trying everything possible ^^ glad I can help :)

Check out the plugins for Facebook Connect / Phonegap 3.0.0 here : https://build.phonegap.com/plugins/1
Photo of Álan Gularte

Álan Gularte

  • 10 Posts
  • 0 Reply Likes
Buuuu... I can't use both plugins!
Photo of Laurie Clark

Laurie Clark

  • 11 Posts
  • 0 Reply Likes
What error are you getting ?
Photo of Álan Gularte

Álan Gularte

  • 10 Posts
  • 0 Reply Likes
If I package my app with Phonegap 3.0.0 Phonegap Build shows me a message that com.phonegap.plugins.facebookconnect is not supported.
Facebook Connect plugin works only with 2.5.0, 2.7.0 and 2.9.0 versions.
Photo of Laurie Clark

Laurie Clark

  • 11 Posts
  • 0 Reply Likes
Oh yeh I see that :(
Photo of Amit Parnerkar

Amit Parnerkar

  • 6 Posts
  • 0 Reply Likes
My barcodescanner plugin is working perfectly fine with latest phonegap 3.1.0. My question is that can we encode into CODE_39 format ? Right now I see that by default it encodes into QR_Code. Is there a way to encode in CODE_39
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Sorry Amit, I don't believe this is supported.
Photo of Salman Zubair

Salman Zubair

  • 1 Post
  • 0 Reply Likes
Hi I need to use front camera in barcodescanner using ios, can you help me?
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Salman,

I doubt this was added into the design of the plugin.

Hence if it doesn't work means it wasn't intended to work that way.

Thanks.
Photo of Konanki Vamsi

Konanki Vamsi

  • 1 Post
  • 0 Reply Likes
How to read product details based on UPC Number ?

Is there any alternative for google search shopping API to get the product details based on UPC Number ?
Photo of Dave Merck

Dave Merck

  • 1 Post
  • 0 Reply Likes
Is there any way to have a scan timeout after a set period of time?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
I'd suggest having a look at the issues on the barcode scanner source repository, and maybe post your question there.

This conversation is no longer open for comments or replies.