Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android barcode scanner integration with web page

Tags:

I have been researching all morning about integrating an android barcode scanner app into a web page, but haven't found exactly what I need to know. I want to have a web page that the user can fill in text fields by using an android barcode scanner. So the user would be on a web page and would either click inside the text field or click a button next to the text field that would start the android barcode scanner. They would then scan the barcode and the text field would be filled in.

I have found solutions on how to do this and then go to a different page, but it is important that the user stays on the same page. I have seen the zxing project and thought that might be able to be used, but I'm not sure if it allows for the page to stay the same.

I'm pretty sure this is possible and is wondering if any one could give me a high level overview on how they would do it. I was thinking it might be able to be done with an ajax request that gets submitted on a button click. The ajax request would get sent to my server, the server would send something to the android device that would start the scanner and return the data which in turn gets sent back in the ajax response. Is there any way to cut out the server though and just have the android browser starting the barcode scanner? Thank you for your time and I appreciate any discussion on it.

like image 642
Geren White Avatar asked Nov 12 '12 16:11

Geren White


People also ask

Can you link a barcode to a website?

There are a few different barcode generators out there, but to add the barcode to your website most require you to create the barcode, download it, then upload it to your website. Here is an option using the barcode generator at http://posguys.com/barcode to generate a permanent barcode that you can hot link to.

Can we connect barcode scanner to mobile?

If your Android smartphone or tablet supports a USB on-the-go, or OTG, you can use a USB barcode scanner with the Loyverse POS app. To use a USB scanner with Loyverse POS on an Android device, you will need a USB OTG adapter or cable. It has a female USB connector on one end and a male micro USB connector on the other.


2 Answers

ZXing (zebra crossing) provides the capability to initiate the bar code scanner via a webpage through a button click event, anchor tag, or other action that could call a URL on a mobile device.

When the barcode scanner application is installed on an android device, a URL call to:

zxing://scan/?ret=http://foo.com/products/{CODE}/description&SCAN_FORMATS=UPC_A,EAN_13 

Will bring up the device bar code reader, the user scans the code, and the code is returned via the callback URL parameter supplied in the zxing URL.

You can view an example (works on android) here: http://zxing.appspot.com/scan

like image 69
Michael Jasper Avatar answered Sep 17 '22 15:09

Michael Jasper


You can try this for Android:

You can use Zxing library for barcode scan for webpages

 <!DOCTYPE html>     <script type="text/javascript">     //This entire block of script should be in a separate file, and included in each doc in which you want scanner capabilities         function zxinglistener(e){             localStorage["zxingbarcode"] = "";             if(e.url.split("\#")[0] == window.location.href){                 window.focus();                 processBarcode(decodeURIComponent(e.newValue));             }             window.removeEventListener("storage", zxinglistener, false);         }         if(window.location.hash != ""){             localStorage["zxingbarcode"] = window.location.hash.substr(1);             self.close();             window.location.href="about:blank";//In case self.close is disabled         }else{             window.addEventListener("hashchange", function(e){                 window.removeEventListener("storage", zxinglistener, false);                 var hash = window.location.hash.substr(1);                 if (hash != "") {                     window.location.hash = "";                     processBarcode(decodeURIComponent(hash));                 }             }, false);         }         function getScan(){             var href = window.location.href.split("\#")[0];             window.addEventListener("storage", zxinglistener, false);             zxingWindow = window.open("zxing://scan/?ret=" + encodeURIComponent(href + "#{CODE}"),'_self');         }      </script>      <html>         <head>             <script type="text/javascript">                 function processBarcode(b){                     var d = document.createElement("div");                     d.innerHTML = b;                     document.body.appendChild(d);                 }             </script>         </head>         <body>             <button onclick="getScan()">get Scan</button>         </body>     </html> 

For reference: Read link

like image 33
kishan Radadiya Avatar answered Sep 18 '22 15:09

kishan Radadiya