Android 条码扫描器与网页集成答案

【问题标题】：Android barcode scanner integration with web pageAndroid 条码扫描器与网页集成
【发布时间】：2012-11-01 01:54:07
【问题描述】：

我整个上午都在研究如何将安卓条形码扫描仪应用程序集成到网页中，但还没有找到我需要知道的确切内容。我想要一个网页，用户可以使用 android 条形码扫描仪填写文本字段。因此，用户将在网页上单击文本字段内部或单击文本字段旁边的按钮，以启动 android 条形码扫描仪。然后他们会扫描条形码并填写文本字段。

我找到了解决方法，然后转到不同的页面，但重要的是让用户停留在同一页面上。我看过 zxing 项目并认为它可能可以使用，但我不确定它是否允许页面保持不变。

我很确定这是可能的，并且想知道是否有人可以向我简要介绍他们将如何做到这一点。我在想它可能可以通过单击按钮提交的 ajax 请求来完成。 ajax 请求将被发送到我的服务器，服务器将向 android 设备发送一些内容，该设备将启动扫描仪并返回数据，这些数据又在 ajax 响应中被发送回。有什么办法可以切断服务器，让安卓浏览器启动条码扫描器？感谢您抽出宝贵时间，感谢您对此进行的任何讨论。

【问题讨论】：

您的网页是否正在设备浏览器中查看？还是您正在创建一个包含 WebView 来显示它的准系统应用程序？
感谢您的回复。正在设备浏览器中查看我的网页。我有一个已经开发好的网站。我可以更改 UI，也可以添加 JavaScript。不过，我对网络视图不太熟悉。它们可以用于显示任何网站吗？是否需要对网站进行任何更改？
我还可以控制 Web 应用程序的服务器端，并且也可以在那里添加/修改。我还想说，理想情况下，用户会使用设备浏览器。

标签： android webpage barcode

【解决方案1】：

ZXing（斑马线）提供了通过网页通过按钮单击事件、锚标记或其他可以调用移动设备上的 URL 的操作来启动条形码扫描仪的功能。

当条形码扫描仪应用程序安装在安卓设备上时，一个 URL 调用：

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

会调出设备条码阅读器，用户扫码，通过zxing URL中提供的回调URL参数返回代码。

您可以在此处查看示例（适用于 android）：http://zxing.appspot.com/scan

【讨论】：

Google Play 应用程序：play.google.com/store/apps/… 常见问题解答：github.com/zxing/zxing/wiki/Scanning-From-Web-Pages
感谢 @michael-jasper ..您的回答帮助我开始在示例网页中集成 zxing - mvark.blogspot.in/2016/03/how-to-scan-barcode-with-android.html
回调必须是urlencoded：zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13

【解决方案2】：

你可以在 Android 上试试这个：

您可以使用 Zxing 库对网页进行条码扫描

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

供参考：Read link

【讨论】：

【解决方案3】：

使用 javascript 界面和 loadurl(javascript...)，您可以从 Android 与您的网页进行通信

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

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

google 上有很多例子。

【讨论】：

感谢您的回复。不过不太清楚你的意思。我对android方面不太熟悉。是否可以从网页调用 startQRScan 方法？然后加载视图将其发送回网页？
我用谷歌搜索了一下，看看你的意思。问题是我希望通过 android 浏览器从一个已经开发的站点执行此操作，而我最多可以更改的是 UI 和其他 javascript。你知道这是否可以在没有网络视图的情况下完成吗？
对不起，我以为你在谈论 android 端。 github.com/phonegap/phonegap-plugins/tree/master/Android/…我知道phonegap 支持barcodescanner 但我不知道具体的。为了完整起见，是的 startQRScan 可以从您的网页调用。通过 window."name javascriptinterface".startQRScan，但这意味着您必须在 Android 中编写代码。如果你愿意，我可以发布完整的 Android 代码。
没关系，这有助于给我一些关于如何完成它的想法。不要担心我在谷歌上找到的代码，我需要更多关于可以做什么的想法。接受答案，即使它不是我需要的，但确实回答了问题。感谢您的帮助。
祝你的项目好运。