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.
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.
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With