Scan barcodes and QR codes through the camera and from images

The scanner works in 2 modes - either via a video camera, or recognition of a specific image.

How to realized?

To connect scripts:

<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>

The layout: 

<div>
    <a class="btn btn-primary" href="#" id="startButton">Start scanning</a>
    <a class="btn btn-secondary" href="#" id="resetButton">Throw off</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>

Parameters of the component:

• startDecodeBtn - selector for the start button to initiate scanning

• resetDecodeBtn - selector for the button to stop the scanning process

• imgId - ID of the image to scan (Image mode)

• videoId - ID of the video object where the stream from the camera is output (Video mode)

• videoSourceSelect - switch video sources (Video mode)

• callback - function that is called when code recognition is successful.

• audio - path to the mp3 file that is played when scanning successfully.