QuaggaJS Barcode Scanner Setting EAN13 Code128
Today is very important the use of smartphone / table for work.
And in many case is important to read barcode or qrcode.
For that, now i want to speak about QuaggaJS a javascript library for reading barcode.
I have used it and setting up for a correct mobile resize of video stream, and for reading code128 and ean13.
At first we must to download it from the website: https://serratus.github.io/quaggaJS/
Install
- At first we must to download it from the website: https://serratus.github.io/quaggaJS/
- Read the guide about installation https://serratus.github.io/quaggaJS/#installing
Example Page
CSS responsive
#interactive.viewport { position: relative; } #interactive.viewport > canvas, #interactive.viewport > video { max-width: 100%; width: 100%; } canvas.drawing, canvas.drawingBuffer { position: absolute; left: 0; top: 0; } @media (max-width: 603px) { .reader-config-group { width: 100%; } .reader-config-group label > span { width: 50%; } .reader-config-group label > select, .reader-config-group label > input { max-width: calc(50% - 2px); } #interactive.viewport { width: 100%; height: auto; overflow: hidden; } }
HTML
<div class="card"> <div class="card-body"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6"> <div id="interactive" class="viewport"></div> </div> <div class="col-xs-12 col-sm-12 col-md-6"> <div id="result_strip"> </div> </div> </div> </div> </div>
JAVASCRIPT
var AppQuagga = { init: function() { var self = this; Quagga.init(this.state, function(err) { if (err) { return self.handleError(err); } //Quagga.registerResultCollector(resultCollector); Quagga.start(); Quagga.onProcessed(function(result) { var drawingCtx = Quagga.canvas.ctx.overlay, drawingCanvas = Quagga.canvas.dom.overlay; if (result) { if (result.boxes) { drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height"))); result.boxes.filter(function (box) { return box !== result.box; }).forEach(function (box) { Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2}); }); } if (result.box) { Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2}); } if (result.codeResult && result.codeResult.code) { Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3}); } } }); setTimeout(function() { var track = Quagga.CameraAccess.getActiveTrack(); var capabilities = {}; if (typeof track.getCapabilities === 'function') { try { capabilities = track.getCapabilities(); track.applyConstraints({advanced: [{zoom: 2.5}]}); } catch(e) {} } }, 500); }); }, handleError: function(err) { console.log(err); }, state: { inputStream: { type : "LiveStream", constraints: { facingMode: "environment" } }, locator: { patchSize: "medium", halfSample: true }, numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4), frequency: 20, decoder: { readers : [{ format: "code_128_reader", config: {} }, { format: "ean_reader", config: { } }, { format: "code_39_reader", config: {} }, { format: "code_93_reader", config: {} }] }, locate: true }, lastResult : null }; AppQuagga.init(); Quagga.onDetected(function(result) { var code = result.codeResult.code; if(code != null) { if (AppQuagga.lastResult !== code) { AppQuagga.lastResult = code; var $node = null; $node = $('<p>Read: '+code+'</p>'); $("#result_strip").prepend($node); } } });
This piece of code is for zoom, and the timeout attend that the videocamera open itself.
For the zoom you can set the max with: capabilities.zoom.max
setTimeout(function() { var track = Quagga.CameraAccess.getActiveTrack(); var capabilities = {}; if (typeof track.getCapabilities === 'function') { try { capabilities = track.getCapabilities(); track.applyConstraints({advanced: [{zoom: 2.5}]}); } catch(e) {} } }, 500);