-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (115 loc) · 4.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<title>Barcode & QR Code Scanner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
<style>
body {
font-size: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#qr-reader {
display: block;
margin: 0 auto;
margin-top: 20px;
width: 75%;
}
#qr-reader video {
width: 50%;
}
#qr-reader-results {
margin: 0 auto;
margin-top: 20px;
min-width: 100%;
height: 50px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #ccc;
}
#qr-version {
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
</style>
<body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
// Listen for updates to the service worker.
registration.addEventListener('updatefound', () => {
// The updatefound event implies a new service worker is being installed.
const newWorker = registration.installing;
newWorker.addEventListener('statechange', () => {
// Has network been installed?
if (newWorker.state === 'installed') {
console.log('New service worker installed.');
}
});
});
}).catch(error => {
console.log('Service Worker registration failed:', error);
});
}
</script>
<div id="qr-reader-results"></div>
<div id="qr-reader"></div>
<div id="qr-version"></div>
</body>
<script src="/html5-qrcode.min.js"></script>
<script type="module">
const VERSION = 'v2.0.2';
async function readData() {
try {
const response = await fetch(`/data.json`);
const data = await response.json();
return data
} catch (error) {
console.error('Error:', error);
}
}
const data = await readData();
// Display the version and number of keys
document.getElementById('qr-version').innerHTML = `Version: ${VERSION}. Keys: ${Object.keys(data).length}`;
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function () {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
lastResult = decodedText;
let displayResult = decodedText;
if (data[decodedText]) {
displayResult = data[decodedText];
}
resultContainer.innerHTML = `<div>${displayResult}</div>`;
}
}
// Optional callback for error, can be ignored.
function onScanError(qrCodeError) {
// This callback would be called in case of qr code scan error or setup error.
// You can avoid this callback completely, as it can be very verbose in nature.
}
html5QrcodeScanner.render(onScanSuccess, onScanError);
});
</script>
</head>
</html>