Использование сканера штрих-кода zxing в веб-странице

Есть ли рабочий пример, как вы можете использовать сканер штрих-кода zxing с веб-страницы?

Ссылаясь на эту документацию: https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages

не должен работать следующий тестовый код?

function Test1()
{
	$.ajax(
	{
        url: "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
        success:function()
		{
            alert("success");
        },
        error:function()
		{
            alert("error");
        }
    });
}
	
function Test2()
{
	$.ajax(
	{
        url: "http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
        success:function()
		{
            alert("success");
        },
        error:function()
		{
            alert("error");
        }
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="button1" onClick="Test1();">Test 1</button>
<br>
<br>
<button id="button2" onClick="Test2();">Test 2</button>

ОТВЕТЫ

Ответ 1

ZXing не предназначен для работы с AJAX. Вместо этого он работает, открывая разобранный URL в браузере по умолчанию. Поведение браузера в основном зависит от пользовательского опыта с этого момента.

В отношении этого есть несколько методов; к сожалению, нет ни одного метода, который будет работать для каждого браузера.

Некоторые браузеры, открывая их из командной строки, проверят, будет ли URL-адрес уже открыт на другой вкладке, и если да, то будет использовать эту вкладку вместо новой. Это приведет к событию "onhashchange", если ссылка zxing содержит "zxing://scan/? Ret = mytab.html # {CODE}".

Другие браузеры не выполняют такую ​​проверку, поэтому мы получаем несколько вкладок, все имеющие один и тот же URL (за исключением хэша), и ни один из них не увеличивает событие "hashchanged". Для этих браузеров нам нужно повторно использовать страницу из кеша, если это возможно (чтобы предотвратить сетевой трафик при каждом сканировании) и изменить значение localStorage на то, что такое хеш. Если браузер способен прослушивать событие "хранилище", мы можем использовать его для запуска кода.

Ниже приведен код с Chrome, встроенным браузером Android и Firefox. Он может работать с другими, но я не пробовал. Однако одно из предостережений в Firefox заключается в том, что окно сканера будет закрываться, только если для параметра about: config "dom.allow_scripts_to_close_windows" установлено значение "true".

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

НОВАЯ ВЕРСИЯ 12/19/16

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/javascript">

    if(window.location.hash.substr(1,2) == "zx"){
        var bc = window.location.hash.substr(3);
        localStorage["barcode"] = decodeURI(window.location.hash.substr(3))
        window.close();
        self.close();
        window.location.href = "about:blank";//In case self.close isn't allowed
    }
</script>
<SCRIPT type="text/javascript" >
    var changingHash = false;
    function onbarcode(event){
        switch(event.type){
            case "hashchange":{
                if(changingHash == true){
                    return;
                }
                var hash = window.location.hash;
                if(hash.substr(0,3) == "#zx"){
                    hash = window.location.hash.substr(3);
                    changingHash = true;
                    window.location.hash = event.oldURL.split("\#")[1] || ""
                    changingHash = false;
                    processBarcode(hash);
                }

                break;
            }
            case "storage":{
                window.focus();
                if(event.key == "barcode"){
                    window.removeEventListener("storage", onbarcode, false);
                    processBarcode(event.newValue);
                }
                break;
            }
            default:{
                console.log(event)
                break;
            }
        }
    }
    window.addEventListener("hashchange", onbarcode, false);

    function getScan(){
        var href = window.location.href;
        var ptr = href.lastIndexOf("#");
        if(ptr>0){
            href = href.substr(0,ptr);
        }
        window.addEventListener("storage", onbarcode, false);
        setTimeout('window.removeEventListener("storage", onbarcode, false)', 15000);
        localStorage.removeItem("barcode");
        //window.open  (href + "#zx" + new Date().toString());

        if(navigator.userAgent.match(/Firefox/i)){
            //Used for Firefox. If Chrome uses this, it raises the "hashchanged" event only.
            window.location.href =  ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
        }else{
            //Used for Chrome. If Firefox uses this, it leaves the scan window open.
            window.open   ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
        }
    }

    function processBarcode(bc){
        document.getElementById("scans").innerHTML += "<div>" + bc + "</div>";
        //put your code in place of the line above.
    }

</SCRIPT>
<META name="viewport" content="width=device-width, initial-scale=1" />
</HEAD>
<BODY>
<INPUT id=barcode type=text >
<INPUT style="width:100px;height:100px" type=button value="Scan" onclick="getScan();">
<div id="scans"></div>
</BODY>
</HTML>

Вы можете сделать файл включения JS для верхнего блока script и включить его на всех страницах, где вам нужны возможности сканирования.

Затем в теле вашего документа вы можете установить событие где-нибудь, чтобы вызвать getZxing(), который вызовет processBarcode (штрих-код), который вы записываете на свою страницу. Включено просто, например, саке.

Боковое примечание. При первом запуске zxing со своей страницы вам будет предложено выбрать приложение по умолчанию. Убедитесь, что вы выбрали тот же браузер, с которого вы работаете. Кроме того, если вы ранее выбрали по умолчанию broswer для zxing и хотите изменить, какой браузер вы используете для zxing, вам нужно очистить значения по умолчанию от других браузеров.

Большое спасибо @sean-owen за его тяжелую работу и фантастический продукт.

ОБНОВЛЕНИЕ 12/19/16

Хорошо, я сделал несколько более надежную версию, которая хорошо работает с Firefox и Chrome. Несколько вещей, которые я обнаружил:

Chrome будет использовать событие Storage, если сканер не настроен на автоматическое открытие Chrome и будет использовать событие Hash после того, как оно станет стандартным.

Firefox никогда не будет использовать событие Hash, но откроет дополнительное окно, если вы не вызываете сканер с window.location.href (Спасибо, @Roland)

Есть пара других аномалий, но нет выключателей.

Я оставил префикс "zx" в хэше, чтобы код мог очерчивать хэши сканера и обычные хэши. Если вы оставите его там, вы не заметите его в функции processBarcode, и хеши не-zx будут работать, как ожидалось.