-
Notifications
You must be signed in to change notification settings - Fork 0
/
scan_v2.html
184 lines (162 loc) · 5.4 KB
/
scan_v2.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- style -->
<style type='text/css'>
.btn-back {
border-radius: 0px;
position: fixed;
bottom: 0px;
}
#cam_lib {
border-radius: 0px;
}
</style>
<title>บันทึกไทยชนะ</title>
</head>
<body>
<!-- change camera lib -->
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="cam_lib">📷</label>
</div>
<select class="custom-select" id="cam_lib">
<option value="JsQRScanner">JsQRScanner</option>
<option value="html5-qrcode" selected>html5-qrcode</option>
</select>
</div>
<!-- camera -->
<div id="reader">
<div class='bg-secondary text-center p-3' style='height: 100%;'>
<h3 class='text-white'>กล้องกำลังเปิด..</h3>
</div>
</div>
<!-- back button -->
<a class='btn btn-back btn-lg btn-secondary w-100' href='#/'>ถอยกลับ</a>
<!-- bottom scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="./libs/html5-qrcode.min.js"></script>
<!-- app scripts -->
<script src="https://diewland.github.io/disk.js/dist/disk.js"></script>
<script src="./thaichana.js"></script>
<script src="./camera.js"></script>
<script src="./app.js"></script>
<script>
// Create instance of the object. The only argument is the "id" of HTML element created above.
const html5QrCode = new Html5Qrcode("reader");
// cache camera list to reduce number of camera permission request
function get_cameras (callback) {
let cameras = Db.load_cams();
if (cameras === null) {
Html5Qrcode.getCameras().then(devices => {
if (devices && devices.length) {
// save cache
Db.save_cams(devices);
callback(devices);
}
else {
callback([]);
}
}).catch(err => {
alert(`Unable to list cameras, error: ${err}`);
callback([]);
});
}
else { // cache
callback(cameras);
}
}
// open camera
let cam_retry = 0;
let max_retry = 3;
function open_camera (camera_id) {
html5QrCode.start(
camera_id, // retreived in the previous step.
{
fps: 5, // sets the framerate to 5 frame per second
qrbox: 250 // sets only 250 X 250 region of viewfinder to
// scannable, rest shaded.
},
qrCodeMessage => {
onQRCodeScanned(qrCodeMessage);
},
errorMessage => {
// console.log(`QR Code no longer in front of camera.`);
})
.catch(err => {
cam_retry += 1;
if (cam_retry <= max_retry) {
// iOS, camera-id does not static
console.log(`camera-id not found #${cam_retry}, remove from disk and scan again`);
Db.remove_cams();
scan_qr();
}
else {
alert(`Unable to start scanning, error: ${err}`);
}
});
}
// close camera
function close_camera (callback) {
html5QrCode.stop().then(ignore => {
// QR Code scanning is stopped.
callback();
}).catch(err => {
// Stop failed, handle it.
alert("Unable to stop scanning.");
});
}
// on scanned
let process_lock = false;
function onQRCodeScanned(place_url) {
// check url pattern
let result = Thaichana.extract_shop_url(place_url);
if (result === null) return
// capture only first time
if (process_lock) return
process_lock = true;
// update db
let app_id = result.app_id;
let shop_id = result.shop_id;
Db.add(place_url, app_id, shop_id, checked_in => {
// check-in/out in 100 ms
setTimeout(_ => {
close_camera(_ => {
Thaichana.check_in(app_id, shop_id, checked_in, true);
});
}, 100);
});
}
// open camera to scan qr
function scan_qr () {
// This method will trigger user permissions
get_cameras(devices => {
// find back camera id
let back_cam = find_back_camera(devices);
if (back_cam === null) return;
// use this to start scanning.
open_camera(back_cam.id);
});
}
// change cam lib
$('#cam_lib').change(evt => {
let lib_name = $(evt.target).val();
Db.set_cam_lib(lib_name);
location.href = get_scan_url();
});
// back button
$('.btn-back').click(_ => {
close_camera(_ => {
location.href = './list.html';
});
});
// main
scan_qr();
</script>
</body>
</html>