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);