This JavaScript barcode scanner application is not something closely related to electronics and hardware, the kind of stuff we normally do here on Web on Devices, but I felt I needed to publish a little bit of help on this as I receive a lot of emails asking for the source code through the youtube video I uploaded last year:
The code works surprisingly well and it scans pretty quickly but it doesn’t work with all types of barcodes. It has been tested with EAN-13 type barcodes. These can be generated at www.barcode-generator.org/.
Here’s a little info from WikiPedia: An EAN-13 barcode (originally European Article Number, but now renamed International Article Number even though the abbreviation EAN has been retained) is a 13 digit (12 data and 1 check) barcoding standard. The EAN-13 barcodes are used worldwide for marking products often sold at retail point of sale.
Download the source code
www.webondevices.com/barcode.zip
Settings
The script can be initialised with the following code:
barcode.config.start = 0.1;
barcode.config.end = 0.9;
barcode.config.video = '#barcodevideo';
barcode.config.canvas = '#barcodecanvas';
barcode.config.canvasg = '#barcodecanvasg';
barcode.setHandler(function(barcode) {
console.log(barcode);
});
barcode.init();The threshold and quality acceptance settings can be changed with these properties:
barcode.config.threshold: 160;
barcode.config.quality: 0.45;Please note that the demo won’t run on a local environment. Upload to a web server or try MAMP/WAMP.
Browser Support
Another thing to keep in mind is that this example relies on the Stream API and the getUserMedia method. This native JavaScript feature allows the browser to access and stream video and sound from the camera and microphone of the device to an HTML Audio or Video element and modify process the data.
This is currently not supported in Internet Explorer, Safari, iOS and Opera. Have look at the support matrix on caniuse.com.
I hope this little guide helps!
