File: /home/u435929562/domains/events.peacockindia.in/public_html/qrcode_reader_js.php
<!DOCTYPE html>
<!-- saved from url=(0040)https://nimiq.github.io/qr-scanner/demo/ -->
<html lang="en" style="--lns-color-purple:hsla(230,84%,63%,1); --lns-color-salmon:hsla(359,98%,68%,1); --lns-color-green:hsla(149,78%,53%,1); --lns-color-blue:hsla(201,100%,55%,1); --lns-color-red:hsla(356,86%,55%,1); --lns-color-yellow:hsla(40,100%,66%,1); --lns-color-grey8:hsla(230,11%,19%,1); --lns-color-grey7:hsla(230,10%,30%,1); --lns-color-grey6:hsla(230,9%,45%,1); --lns-color-grey5:hsla(230,8%,60%,1); --lns-color-grey4:hsla(230,7%,75%,1); --lns-color-grey3:hsla(230,7%,84%,1); --lns-color-grey2:hsla(230,7%,92%,1); --lns-color-grey1:hsla(230,7%,97%,1); --lns-color-white:hsla(230,7%,100%,1); --lns-themeLight-color-body:hsla(230,11%,19%,1); --lns-themeLight-color-bodyDimmed:hsla(230,40%,19%,0.6); --lns-themeLight-color-background:hsla(230,7%,100%,1); --lns-themeLight-color-overlay:hsla(230,7%,100%,1); --lns-themeLight-color-primary:hsla(230,84%,63%,1); --lns-themeLight-color-focusRing:hsla(230,84%,63%,0.5); --lns-themeLight-color-border:hsla(230,9%,45%,0.2); --lns-themeLight-color-disabledContent:hsla(230,8%,60%,1); --lns-themeLight-color-disabledBackground:hsla(230,7%,92%,1); --lns-themeLight-color-backdrop:hsla(230,11%,19%,0.5); --lns-themeLight-color-formFieldBorder:hsla(230,7%,84%,1); --lns-themeLight-color-formFieldBackground:hsla(230,7%,100%,1); --lns-themeDark-color-body:hsla(230,7%,97%,1); --lns-themeDark-color-bodyDimmed:hsla(230,40%,97%,0.6); --lns-themeDark-color-background:hsla(230,11%,19%,1); --lns-themeDark-color-overlay:hsla(230,10%,30%,1); --lns-themeDark-color-primary:hsla(230,84%,63%,1); --lns-themeDark-color-focusRing:hsla(230,84%,63%,0.5); --lns-themeDark-color-border:hsla(230,7%,75%,0.2); --lns-themeDark-color-disabledContent:hsla(230,8%,60%,1); --lns-themeDark-color-disabledBackground:hsla(230,10%,30%,1); --lns-themeDark-color-backdrop:hsla(230,11%,19%,0.5); --lns-themeDark-color-formFieldBorder:hsla(230,9%,45%,1); --lns-themeDark-color-formFieldBackground:hsla(230,11%,19%,1); --lns-fontSize-small:12px; --lns-lineHeight-small:18px; --lns-fontSize-medium:14px; --lns-lineHeight-medium:22px; --lns-fontSize-large:18px; --lns-lineHeight-large:26px; --lns-fontSize-xlarge:22px; --lns-lineHeight-xlarge:32px; --lns-fontSize-xxlarge:32px; --lns-lineHeight-xxlarge:38px; --lns-fontWeight-normal:400; --lns-fontWeight-semiBold:600; --lns-radius-medium:4px; --lns-radius-large:8px; --lns-shadow-small:0 1px 4px hsla(0,0%,0%,0.15); --lns-shadow-medium:0 1px 4px hsla(0,0%,0%,0.1), 0 4px 16px hsla(0,0%,0%,0.07); --lns-shadow-large:0 1px 4px hsla(0,0%,0%,0.07), 0 6px 24px hsla(0,0%,0%,0.1); --lns-space-xsmall:4px; --lns-space-small:8px; --lns-space-medium:16px; --lns-space-large:32px; --lns-space-xlarge:64px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style id="stndz-style"></style>
<title>Ticket Scanning</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body class="js-focus-visible" cz-shortcut-listen="true">
<style>
canvas {
display: none;
}
hr {
margin-top: 32px;
}
input[type="file"] {
display: block;
margin-bottom: 16px;
}
div {
margin-bottom: 16px;
}
</style>
<div style="text-align:center;">
<h1>Scan your Qrcode:</h1>
<br/>
<b>Detected QR code: </b>
<h2 id="cam-qr-result" style="color:green;"></h2>
<br>
<b>Last detected at: </b>
<h3 id="cam-qr-result-timestamp"></h3>
</div>
<hr>
<div style="display:none">
<b>Device has camera: </b>
<span id="cam-has-camera">true</span>
</div>
<div style="margin:0 auto;text-align:center;">
<video muted="" playsinline="" id="qr-video" style="transform: scaleX(-1);" style="width:100%;height:auto;max-width:500px"></video>
</div>
<div style="display:none">
<select id="inversion-mode-select">
<option value="original">Scan original (dark QR code on bright background)</option>
<option value="invert">Scan with inverted colors (bright QR code on dark background)</option>
<option value="both">Scan both</option>
</select>
<br>
</div>
<script type="module">
import QrScanner from "./js/qr-scanner.min.js";
QrScanner.WORKER_PATH = './js/qr-scanner-worker.min.js';
const video = document.getElementById('qr-video');
const camHasCamera = document.getElementById('cam-has-camera');
const camQrResult = document.getElementById('cam-qr-result');
const camQrResultTimestamp = document.getElementById('cam-qr-result-timestamp');
function setResult(label, result) {
jQuery.ajax({
url: "process.php",
data: {action: 'entry', seat: result},
type: "POST",
success:function(data){
console.log(data);
data = JSON.parse(data);
if(data.status == 'success'){
//alert( data_array.result);
console.log("Success "+data.status);
} else{
//alert( data_array.result);
console.log("Failure "+data.status);
}
},
error:function (){}
});
label.textContent = result;
camQrResultTimestamp.textContent = new Date().toString();
label.style.color = 'teal';
clearTimeout(label.highlightTimeout);
label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
alert(result);
}
// ####### Web Cam Scanning #######
QrScanner.hasCamera().then(hasCamera => camHasCamera.textContent = hasCamera);
const scanner = new QrScanner(video, result => setResult(camQrResult, result));
scanner.start();
document.getElementById('inversion-mode-select').addEventListener('change', event => {
scanner.setInversionMode(event.target.value);
});
</script>
</body>
</html>