Сканирование штрихкодов и QR кодов через камеру и с картинок

Сканер работает в 2 режимах - либо через видеокамеру, либо распознавание конкретной картинки.

Как реализовать?

Подключить скрипты:
<script type="text/javascript" src="/js/scanner/zxing.min.js"></script>
<script type="text/javascript" src="/js/falcon/as.codeScanner.js"></script>
<script type="text/javascript">
       $(document).ready(function () {
		//video
		/*as.codeScanner.init({
			startDecodeBtn: "#startButton",
			resetDecodeBtn:"#resetButton",
			videoSourceSelect: "#sourceSelect",
			videoId: "video",
			callback: function (result) { alert(result); },
		});*/
		//img
		as.codeScanner.init({
		    startDecodeBtn: "#startButton",
		    callback: function (result) { alert(result); },
		    imgId: "viki"
		});
	});
</script>

Верстка: 
<div>
    <a class="btn btn-primary" href="#" id="startButton">Начать сканирование</a>
    <a class="btn btn-secondary" href="#" id="resetButton">Сбросить</a>
</div>
<div id="sourceSelectPanel" class="my-3">
    <label for="sourceSelect">Камера:</label>
    <select id="sourceSelect" style="max-width:400px; " class="form-control d-inline-block"></select>
</div>

<div>
    <video id="video" width="300" height="200"></video>
</div>
<div class="hide">
    <img id="viki" src="/uploads/viki.png">
</div>




Параметры компонента:
  • startDecodeBtn - селектор кнопки запуска инициации сканирования
  • resetDecodeBtn - селектор кнопки остановки процесса сканирования
  • imgId - ID картинки для которой делаем сканирование (режим Картинка)
  • videoId - ID объекта видео, в котором выводится поток с камеры (режим Видео)
  • videoSourceSelect - переключатель источников видео (режим Видео)
  • callback - функция, которая вызывается при успешном распознавании кода.
  • audio - путь к mp3 файлу, который проигрывается при успешном сканировании.

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK