142 lines
3.3 KiB
HTML
142 lines
3.3 KiB
HTML
|
<!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>
|