Использование сканера штрих-кода 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> 

Я продолжаю получать «ошибку» на своем Android 4.4.2 Samsung Galaxy TabPro и Samsung Galaxy S4. Я пробовал браузер, браузер Chrome, Firefox и Dolphin Browser.

Даже http://zxing.appspot.com/scan не работает, поскольку он всегда просит меня установить (уже установленное) приложение.

Любая помощь приветствуется.

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> - <!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 для верхнего блока сценария и включить его на всех страницах, где вам нужны возможности сканирования.

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

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

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

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

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

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

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

Есть еще пара аномалий, но нет разрывов.

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

Intereting Posts
Запрос менеджера местоположенияLocationUpdates, вызываемый только один раз Перемещать изображение частично из экрана в android Bash не может найти adb, хотя определенно там Эмулятор Kindle Fire больше не поддерживается Для Ripple требуется уровень API 21 (текущий минимум 11), android? Экземпляр абстрактного класса со скрытым конструктором Android: сохранить несколько экземпляров активности в фоновом стеке Проблемы с переполнением размера кучи со звуковыми клипами Android, как получить доступ к исходным ресурсам, которые я установил в папку res? MPAndroidChart устанавливает вертикальную линию центра Что означают названия / коды Android Voice? NullPointerException addToRequestQueue (com.android.volley.Request, java.lang.String) 'на ссылке нулевого объекта Мои сообщения журнала не удаляются с помощью конфигурации proguard Android ViewPager с масштабируемым ImageView Не удается найти файл android.support.design.widget.Snackbar в библиотеке поддержки