Интеграция сканера штрих-кодов Android с веб-страницей

Я изучаю все утро о включении приложения сканера штрих-кода для Android в веб-страницу, но не нашел точно, что мне нужно знать. Я хочу иметь веб-страницу, которую пользователь может заполнить текстовыми полями, используя сканер штрих-кода android. Таким образом, пользователь будет на веб-странице и будет либо щелкнуть внутри текстового поля, либо нажать кнопку рядом с текстовым полем, которое запустит сканер штрих-кода для Android. Затем они будут сканировать штрих-код, и текстовое поле будет заполнено.

Я нашел решения о том, как это сделать, а затем перейдите на другую страницу, но важно, чтобы пользователь оставался на одной странице. Я видел проект zxing и думал, что его можно использовать, но я не уверен, разрешает ли он оставаться прежним.

Я уверен, что это возможно и интересно, может ли кто-нибудь дать мне обзор высокого уровня о том, как они это сделают. Я думал, что это может быть сделано с помощью запроса ajax, который будет отправлен при нажатии кнопки. Запрос ajax будет отправлен на мой сервер, сервер отправит что-то на устройство Android, которое запустит сканер и вернет данные, которые, в свою очередь, будут отправлены обратно в ответ ajax. Есть ли способ вырезать сервер, хотя и просто запустить браузер с Android-браузером? Спасибо за ваше время, и я ценю любую дискуссию по этому поводу.

Ответ 1

Используя интерфейс javascript и loadurl (javascript...), вы можете общаться со своей веб-страницей с Android

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

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

В Google есть много примеров.

Ответ 2

ZXing (пересечение зебры) предоставляет возможность запускать сканер штрих-кода через веб-страницу посредством события нажатия кнопки, метки привязки, или другие действия, которые могут вызывать URL-адрес на мобильном устройстве.

Когда приложение сканера штрих-кода установлено на устройстве Android, вызов URL-адреса:

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

Появится устройство считывания штрих-кода устройства, пользователь сканирует код, а код возвращается через параметр URL-адреса обратного вызова, указанный в URL-адресе zxing.

Здесь вы можете посмотреть пример (работает на android): http://zxing.appspot.com/scan

Ответ 3

Вы можете попробовать это для 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>

Для справки: Читать ссылку

Ответ 4

Вы можете использовать это приложение для Android.

https://play.google.com/store/apps/details?id=com.tecit.android.barcodekbd.full&hl=en

Это просто обычная клавиатура с дополнительной красивой маленькой кнопкой, которая всплывает в любом месте сканера штрих-кода. Строка, считываемая с помощью сканера штрих-кода, заполняется в текстовое поле, где обычно клавиатура вводит его.

Его очень легко использовать.