<!DOCTYPE html>
<html lang="en">
<head>
<!- QR code scan -->
<script src="js/html5-qrcode.min.js"></script>
</head>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Breadcrumbs-->
<!--<ol class="breadcrumb">
<li class="breadcrumb-item active">
Sites
</li>
</ol>-->
<div class="row">
<div class="col-12">
<p><button id="scanButton" class="btn btn-primary" onClick="scanQR()">Scan code</button></p>
<div id="reader" width="0px"></div>
<script type="text/javascript">
var cameraId = "";
var currentlyScanning = false;
var html5QrCode;
function scanQR(){
if(currentlyScanning){
stopScan("");
}else{
$("#scanButton").html("Stop scanning");
currentlyScanning = true;
if(cameraId==""){
html5QrCode = Html5Qrcode.getCameras().then(devices => {
if (devices && devices.length) {
if(devices.length > 1){
var options_list = "";
for (i = 0; i < devices.length; i++) {
if(devices[i].label.indexOf("front") !== -1){
options_list = options_list + '<option value="'+devices[i].id+'">Front</option>';
}else if(devices[i].label.indexOf("back") !== -1){
options_list = options_list + '<option value="'+devices[i].id+'">Back</option>';
}else{
options_list = options_list + '<option value="'+devices[i].id+'">'+devices[i].label+'</option>';
}
}
vex.dialog.open({
message: "Which camera would you like to use?",
input: [
'<style>',
'.vex-custom-field-wrapper {',
'margin: 1em 0;',
'}',
'.vex-custom-field-wrapper > label {',
'display: inline-block;',
'margin-bottom: .2em;',
'}',
'</style>',
'<div class="vex-custom-field-wrapper">',
'<label for="camera_id">Cameras available:</label>',
'<div class="vex-custom-input-wrapper">',
'<select name="camera_id" id="camera_id">',
options_list,
'</select>',
'</div>',
'</div>',
].join(''),
callback: function (data) {
if (!data) {
$("#scanButton").html("Scan code");
currentlyScanning = false;
}else{
cameraId = data.camera_id;
readQR();
}
}
});
}else{
cameraId = devices[0].id;
readQR();
}
}
}).catch(err => {
console.log(err);
});
}else{
readQR();
}
}
}
function readQR(){
html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
cameraId,
{
fps: 10, // Optional frame per seconds for qr code scanning
qrbox: 250 // Optional if you want bounded box UI
},
qrCodeMessage => {
// do something when code is read
stopScan(qrCodeMessage);
},
errorMessage => {
console.log(errorMessage);
})
.catch(err => {
console.log(err);
});
}
function stopScan(message){
html5QrCode.stop().then(ignore => {
// QR Code scanning is stopped.
}).catch(err => {
console.log(err);
});
currentlyScanning = false;
$("#scanButton").html("Scan code");
if(message!=""){
var table = $('#dataTable').DataTable();
table.search( message ).draw();
}
}
</script>