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.

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

Note