21

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.

Geren White
  • 270
  • 1
  • 2
  • 11
  • is your web page being viewed in the device Browser? Or are you creating a barebones app that contains a WebView to show it? – FoamyGuy Nov 12 '12 at 16:56
  • Thanks for the response. My web page is being viewed in the device browser. I have a site that is already developed. I can change the UI and I can add javascript. I'm not too familiar with web-views though. Can they be used to display any sites and would there be any changes needed to the site? – Geren White Nov 12 '12 at 17:09
  • I also have control over the server side of the web application and can add/modify there too. I also want to say that ideally the user would use the device browser. – Geren White Nov 12 '12 at 17:12

3 Answers3

27

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

FoamyGuy
  • 46,603
  • 18
  • 125
  • 156
Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
  • 3
    Google Play app: https://play.google.com/store/apps/details?id=com.google.zxing.client.android FAQ: https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages – Nepomuk Pajonk Mar 15 '14 at 08:54
  • Thanks @michael-jasper ..your answer helped me get started with integrating zxing in a sample web page - http://mvark.blogspot.in/2016/03/how-to-scan-barcode-with-android.html – mvark Mar 12 '16 at 17:51
  • the callback has to be urlencoded: zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13 – nvrandow Jan 14 '17 at 22:52
7

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

kishan Radadiya
  • 788
  • 6
  • 14
1

Using a javascript interface and loadurl(javascript...) you can communicate with your webpage from Android

public void loadScript(String script){      
    webview.loadUrl("javascript:(function() { " + script + "})()");             
}

private class JavaScriptInterface {     
    public void startQRScan() {
        ...
    }
}

There are plenty of examples on google.

ePeace
  • 1,987
  • 1
  • 17
  • 23
  • Thanks for the response. Not too sure of what you mean though. I'm not too familiar with the android side. Would that startQRScan method be callable from the web page? Then the load view sends it back to the web page? – Geren White Nov 12 '12 at 16:41
  • 1
    I googled this a little bit and see what you mean. The issue is I was hoping to do this through the android browser from a site that is already developed and the most I can change is UI and additional javascript. Do you know if this can be done without a web view? – Geren White Nov 12 '12 at 16:57
  • I'm sorry I thought you were talking about the android side. https://github.com/phonegap/phonegap-plugins/tree/master/Android/BarcodeScanner I know phonegap support barcodescanner but I don't know the specifics. And just to be complete, yes startQRScan would be callable from your webpage. Through window."name javascriptinterface".startQRScan, but that would mean that you would have to code in Android. If you want I can post complete Android code. – ePeace Nov 13 '12 at 13:08
  • That's ok, this was helpful in giving me some ideas on how it can be done. Don't worry about the code I found some on google, I needed more of ideas on what could be done. Accepting the answer even though it isn't what I need, but does answer the question. Thanks for your help. – Geren White Nov 14 '12 at 16:43
  • Good luck with your project. – ePeace Nov 14 '12 at 16:47
  • @ePeace: I have same project.I googled this code,but could not understand.can u post Android code for me? – MJH Sep 01 '13 at 18:47