<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
margin: 0 auto;
max-width: 1000px;
display: flex;
/* justify-content: center; */
}
.content {
margin-right: 30px;
}
.scanner-cam {
border: 5px solid red;
width: 640px;
height: 480px;
}
.scanner-cam--scanned {
border-color: green;
}
</style>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="content">
<h1>Barcode scanner prototype</h1>
<p><strong>Instructions:</strong></p>
<ul>
<li>Search for "<strong>128 barcode</strong>" on <strong>Google.com</strong> on your phone. Click to view any barcode and point your screen towards the camera. You should hear a beep!</li>
<li>Once the border on the right is red, the scanner is ready for another barcode.</li>
<li>If you're trying to scan a barcode and the border on the right is still green, move the barcode out of the camera view and back again.</li>
</ul>
<p><strong>Important notes:</strong></p>
<ul>
<li>Make sure to allow the browser to access your camera.</li>
<li>You may see incorrect readings listed below when scanning, these can be filtered out later on, this just a scanning prototype.</li>
</ul>
<strong>Scanned codes:</strong>
<ul class="codes-list"></ul>
</div>
<div class="scanner-cam"></div>
</div>
<script>
var scanBeep = new Audio('./scan-beep.mp3');
var scannerCamEl = document.getElementsByClassName('scanner-cam')[0];
var App = {
init: function() {
var self = this;
Quagga.init(this.config, function(err) {
if (err) {
return self.handleError(err);
}
Quagga.start();
});
},
handleError: function(err) {
console.log(err);
},
config: {
inputStream: {
target: scannerCamEl,
type : "LiveStream",
constraints: {
width: {min: 640},
height: {min: 480},
facingMode: "environment",
aspectRatio: {min: 1, max: 2}
}
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: 2,
frequency: 10,
decoder: {
readers : [{
format: "code_128_reader",
config: {}
}]
},
locate: true
}
};
App.init();
function scanItem(code) {
scanBeep.play();
var el = document.createElement('li');
el.innerText = code;
document.getElementsByClassName('codes-list')[0].appendChild(el);
scannerCamEl.classList.add('scanner-cam--scanned');
}
var debouncedScanner = _.debounce(scanItem, 1000, true);
var styleTimer;
Quagga.onDetected((result) => {
var code = result.codeResult.code;
if (!code.match(/[0-9]+/[0-9]+/[A-Z]+/[0-9]+/g)) { console.log(code); return; }
debouncedScanner(code);
clearTimeout(styleTimer);
styleTimer = setTimeout(function() {
scannerCamEl.classList.remove('scanner-cam--scanned');
}, 1000);
});
</script>
</body>
</html>