HOW TO Turn Your Mobile Browser into a Barcode Scanner for Web Apps
Smartphone barcode scanners typically require installing a dedicated app. But what if your web app could access the camera and scan codes directly — no app required, just HTML and JavaScript?
I tried Minhaz's nifty HTML5 QR Code & Barcode scanner and I'm bowled over by its simplicity. With hundreds of GitHub stars and forks, it's clear I'm not the only one impressed!
I adapted Minhaz's sample code into a minimalist web page that scans a product barcode and redirects to Open Food Facts to display its nutrition information. Here's the code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Based on this HTML5 QR Code Reader sample by Minhaz https://blog.minhazav.dev/research/html5-qrcode.html --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5"> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>OFF Bar Code Scanner</title> | |
| </head> | |
| <body> | |
| <div id="desc">Scan Barcode to view details on Open Food Facts</div> | |
| <div id="reader"></div> | |
| <!-- html5-qrcode.min.js - https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js --> | |
| <script src="html5-qrcode.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| function onScanSuccess(decodedText, decodedResult) { | |
| document.getElementById('desc').innerHTML = "Barcode detected: " + decodedText + "...redirecting to Open Food Facts" ; | |
| html5QrcodeScanner.clear(); | |
| window.location.href = "https://world.openfoodfacts.org/product/" + decodedText; | |
| } | |
| var html5QrcodeScanner = new Html5QrcodeScanner( | |
| "reader", { fps: 10, qrbox: 250 }); | |
| html5QrcodeScanner.render(onScanSuccess); | |
| </script> | |
| </body> | |
| </html> |
You can also try it out live.
Related:
* Scanapp
* HOW TO scan a barcode with an Android smartphone camera from a web page
Comments
Post a Comment