Сканирование штрихкодов и 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 файлу, который проигрывается при успешном сканировании.