/**
Website for scanner versions: https://unpkg.com/browse/@zxing/library@0.18.6/README.md
**/
var uIAsStringBarcodeReader='';
var video=null;
var canvas=null;
var crdID = "";
var textRead = "";
const codeReader = new ZXing.BrowserMultiFormatReader();
function displayUiBarcodeReader(placeHolder){
uIAsStringBarcodeReader="<div class='container' style='width: 300px;'><div id= 'header'></div></div><h6 align='center'><div id='canvasContainer' style='scale:75%;zoom:75%;height:200px;display:none;'><canvas id='canvas' width='320' height='240' style='margin:auto;'></canvas></div><br></h6><br><div class='container' style='width: 300px;' id='formContainer'><form action='javascript:send()' autocomplete='off'><div class='form-group' style='display: grid;grid-template-columns: auto 30%;padding: 10px;grid-gap: 10px;'><input class='form-control' id='barcodeData' placeholder='"+placeHolder+"'><button type='submit' class='btn btn-default' id='submitButton'>Submit</button></div></form></div><div class='container' style='width: 300px;'><div id= 'footer'></div></div><video id='video' height='0'></video>";
document.getElementById('uIBarcodeReader').innerHTML=uIAsStringBarcodeReader;
}
function getHeader(headerCode){
document.getElementById('header').innerHTML=headerCode;
}
function getFooter(footerCode){
document.getElementById('footer').innerHTML=footerCode;
}
function getScannedText(){
return document.getElementById('barcodeData').value;
}
function setScannedText(text){
return document.getElementById('barcodeData').value=text;
}
/**
Call this function to turn on environment cam and remove canvas
**/
function startScanning(){
canvas=document.getElementById("canvas").getContext('2d');
video=document.getElementById("video");
var mediaDevice=navigator.mediaDevices.getUserMedia({video: {facingMode: 'environment',width: {ideal: 480}}}).then(function (stream) {
video.srcObject = stream;
video.play();
document.getElementById("canvasContainer").style.display="block";
}).catch(function(err){
document.getElementById("canvasContainer").style.display="none";
});
repeatSwitch='true';
repeat();
}
/**
Call this function to turn off environment cam and remove canvas
**/
function stopScanning(){
repeatSwitch='false';
try{
video.srcObject.getTracks().forEach(function(track){track.stop();});
video=null;
canvas=null;
const codeReader = new ZXing.BrowserMultiFormatReader();
document.getElementById("canvasContainer").style.display="none";}catch(err){}
}
function repeat() {
canvas.drawImage(video,0,0);
var canvasUrl=document.getElementById("canvas").toDataURL();
codeReader.decodeFromImage(undefined,canvasUrl).then((result, err) => {
if (result) {
textRead = result.text;
if(textRead.length==4){
document.getElementById("barcodeData").value= textRead;
barCodeScanned();}
}
});
drawTarget();
if(repeatSwitch=='true'){
setTimeout(repeat, 33);}
}
function drawTarget(){
canvas.lineJoin="round";
canvas.lineWidth="7";
canvas.strokeStyle="rgba(70,130,180,0.5)";
canvas.beginPath();
canvas.moveTo((320-150)/2, (240-150)/2+50);
canvas.lineTo((320-150)/2, (240-150)/2+50-30);
canvas.arc((320-150)/2+20,(240-150)/2+20,20,Math.PI,-Math.PI/2);
canvas.moveTo((320-150)/2+20, (240-150)/2);
canvas.lineTo((320-150)/2+50, (240-150)/2);
canvas.moveTo((320-150)/2+150, (240-150)/2+50);
canvas.lineTo((320-150)/2+150, (240-150)/2+50-30);
canvas.moveTo((320-150)/2+100, (240-150)/2);
canvas.lineTo((320-150)/2+130, (240-150)/2);
canvas.arc((320-150)/2+110+20,(240-150)/2+20,20,Math.PI/-2,0);
canvas.moveTo((320-150)/2, (240-150)/2+100);
canvas.lineTo((320-150)/2, (240-150)/2+100+30);
canvas.arc((320-150)/2+20,(240-150)/2+110+20,20,Math.PI,Math.PI/2,true);
canvas.moveTo((320-150)/2+20, (240-150)/2+150);
canvas.lineTo((320-150)/2+50, (240-150)/2+150);
canvas.moveTo((320-150)/2+150, (240-150)/2+100);
canvas.lineTo((320-150)/2+150, (240-150)/2+100+30);
canvas.moveTo((320-150)/2+100, (240-150)/2+150);
canvas.lineTo((320-150)/2+130, (240-150)/2+150);
canvas.arc((320-150)/2+110+20,(240-150)/2+110+20,20,Math.PI/2,0,true);
canvas.stroke();
}