<html>
<head>
<title>Barcode Check - RJM Programming - June, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API</title>
<style>
td { vertical-align: top; }
</style>
</head>
<body onload="document.getElementById('iurl').placeholder=document.getElementById('myimg').src;">
<h1>Barcode Check</h2>
<h3>RJM Programming - June, 2022</h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API' href='//developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API'>https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API</a></h4>
<table style="width:100%;"><tr><td>
<script type='text/javascript'>
document.write("<img src='" + (location.search.split('image=')[1] ? decodeURIComponent(location.search.split('image=')[1].split('&')[0]) : '//www.rjmprogramming.com.au/qrcode.36331985.png') + "' title='' id=myimg></img>");
</script>
<canvas id='video-canvas' style='display:none;'></canvas>
<br><br>
<input ondblclick="if (this.value.length == 0) { this.value=this.placeholder; }" style="width:80%;" id=iurl type=url value="" title="" placeholder="http://www.rjmprogramming.com.au/qrcode.36331985.png" onblur="if (this.value.length > 0) { document.getElementById('myimg').src=this.value; imageEl=document.getElementById('myimg'); postf(); this.placeholder=this.value; this.value=''; }"></input>
</td><td style="width:22%;"><div id=log></div></td></tr></table>
<script type='text/javascript'>

var once=true;
var lastinmz='';
var imageEl=null;
var doalert=true;
var parento=null;
var logElem=document.getElementById('log');

var barcodeDetector=null;
var spa=['code_39', 'codabar', 'ean_13', 'qr_code'], prespa=[];

console.log = msg => logElem.innerHTML += `'${msg}<br>'`.replace(' http: ', ' http<strike style=color:red;>s</strike>: ');
console.error = msg => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
//console.info = msg => logElem.innerHTML += `<span class="info">${msg}</span><br>`;

//function postonl() {
//barcodeDetector=null;
//imageEl=null;
//doalert=true;
//parento=null;
//prespa=[];
if (document.URL.indexOf('?parentwp=') != -1) { doalert=false; }
if (window.parent && document.URL.indexOf('?parentwp=') == -1) {
if (parent.document.getElementById('bci')) {
doalert=false;
if (('' + parent.document.getElementById('bci').title) != '' && ('' + parent.document.getElementById('bci').title).indexOf(' ... ') == -1) {
if (('' + parent.document.getElementById('bci').title).indexOf('//') != -1) {
document.getElementById('myimg').src=('' + parent.document.getElementById('bci').title);
imageEl=document.getElementById('myimg');
doalert=true;
} else if (('' + parent.document.getElementById('bci').title).indexOf('data:') == 0) {
document.getElementById('myimg').src=('' + parent.document.getElementById('bci').title);
imageEl=document.getElementById('myimg');
doalert=true;
} else if (parent.document.getElementById(('' + parent.document.getElementById('bci').title))) {
if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).outerHTML.indexOf('<div ') == 0) {
if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).innerHTML.indexOf('blob:') != -1) {
imageEl=parent.getpblob();
doalert=false;
parento=null;
} else {
imageEl=document.getElementById('myimg');
}
} else if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).outerHTML.indexOf('<img ') == 0) {
if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).outerHTML.indexOf('blob:') != -1) {
imageEl=parent.getpblob();
parento=null;
} else {
imageEl=parent.document.getElementById(('' + parent.document.getElementById('bci').title));
parento=imageEl;
}
doalert=false;
} else if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).outerHTML.indexOf('<canvas ') == 0) {
imageEl=parent.document.getElementById(('' + parent.document.getElementById('bci').title));
parento=imageEl;
doalert=false;
} else if (parent.document.getElementById(('' + parent.document.getElementById('bci').title)).outerHTML.indexOf('<video ') == 0) {
imageEl=parent.document.getElementById(('' + parent.document.getElementById('bci').title));
parento=imageEl;
doalert=false;
} else {
imageEl=document.getElementById('myimg');
}
} else {
imageEl=document.getElementById('myimg');
}
} else {
imageEl=document.getElementById('myimg');
}
} else {
imageEl=document.getElementById('myimg');
}
} else {
imageEl=document.getElementById('myimg');
}

// check compatibility
if (!('BarcodeDetector' in window)) {
if (document.URL.toLowerCase().indexOf('http:') == 0) {
console.log('Barcode Detector is not supported by this browser http: protocol webpage.');
} else {
console.log('Barcode Detector is not supported by this browser.');
}
} else {
console.info('Barcode Detector supported!');

// check supported types
BarcodeDetector.getSupportedFormats()
.then(supportedFormats => {
supportedFormats.forEach(format => prespa.push(format));
});

if (prespa.length == 0) { prespa=spa; }

// create new detector
barcodeDetector = new BarcodeDetector({formats: prespa});
console.info('Barcode Detector supported ... yes!');
}

if (once) {
barcodeDetector.detect(imageEl)
.then(barcodes => {
barcodes.forEach(barcode => ouralert(barcode.rawData||barcode.rawValue));
})
.catch(err => {
console.log(err);
});
//once=false;
}

//}

function lastil() {
document.getElementById('myimg').title='' + lastinmz;
document.getElementById('iurl').title='' + lastinmz;
lastinmz='';
}

function ouralert(inmz) {
lastinmz=inmz;
if (once) {
if (window.parent && document.URL.indexOf('?parentwp=') == -1) {
if (parent.document.getElementById('bci')) {
parent.document.getElementById('bci').title+=' ... ' + inmz;
}
}
if (parento) {
parento.setAttribute('data-barcode', '' + inmz);
}
if (doalert) { setTimeout(function() { alert(lastinmz); }, 2000); } else { lastinmz='' + inmz; setTimeout(lastil, 2000); }
imageEl=document.getElementById('myimg');
}
once=false;
}

function postf() {
if (1 == 1) {
location.href=document.URL.split('#')[0].split('?')[0] + '?image=' + encodeURIComponent(document.getElementById('iurl').value);
} else {
barcodeDetector.detect(imageEl)
.then(barcodes => {
barcodes.forEach(barcode => ouralert(barcode.rawData||barcode.rawValue));
})
.catch(err => {
console.log(err);
});
}
}

//setTimeout(postonl, 2000);
</script>
</body>
</html>