This post provides is a quick-and-dirty demonstration of the LazarSoft / jsqrcode Javascript QR Code scanner library available at https://github.com/LazarSoft/jsqrcode. The HTML and JavaScript provided below is designed to show how a simple capture and decode program could be implemented using the library.
Provided the code from the GitHub repository above has been downloaded, simply copy the code posted below into an html file in the same directory. Upon loading the page the browser may ask for permission to access the camera. If not, and the stream does not appear, see the “important notes” paragraph below.
Clicking the “Capture Snapshot” button will grab a frame from the stream and write it to the snapshot canvas. Clicking the “Attempt Decode” button will then invoke the qrcode.decode() function from the jsqrcode library which will attempt to decode any image found on the <canvas id=”qr-canvas”> element.
The “Start Auto-Capture” button will automate the above by taking a series of periodic snapshots and attempting to decode each until either a successful decode occurs or the user clicks the “Stop Auto-Capture” button.
Finally, the “Stop Camera” button will stop capturing the camera stream. Reload the browser page to restart the camera.
Important notes: This code has been tested in Chrome 83 only. It should also be noted that browser security restrictions will prevent access to the camera unless the file is served from a secure https:// address or directly from the the localhost. Also, I have noticed a few decode errors in my testing, though to be fair to the library’s creator, I cannot vouch for the quality of the software used to generate those barcodes.
QR Code Reader
Decoded value:
Thanks to LazarSoft for making this library available. Below are links to the jsqrcode GitHub repository and a Google developer document I found useful.
