-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbarcode_scan.html
More file actions
124 lines (107 loc) · 3.71 KB
/
barcode_scan.html
File metadata and controls
124 lines (107 loc) · 3.71 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scan</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="containner" >
<h1 style="width:100%;text-align:center;margin-top:100px;" >Scan to Confirmation</h1>
<div style="width:100%;text-align:center;" >
<!-- <form class="searchform" action="/barcode/scan.php" method="POST" enctype="multipart/form-data" > -->
<table cellspacing="10" cellpadding="10" >
<tr>
<td >1.</td>
<td style="text-align:left;" >Scan Doc No :</td>
<td style="text-align:left;" >
<div>
<a class="mybutton" id="startButton">Start</a>
<a class="mybutton" id="resetButton">Reset</a>
</div>
<br/>
<div>
<video id="video" width="300" height="200" style="border: 1px solid gray"></video>
</div>
<br/>
<div id="sourceSelectPanel" style="display:none">
<label for="sourceSelect">Change video source:</label>
<select id="sourceSelect" style="max-width:400px">
</select>
</div>
<br/>
<blockquote>
<p id="result"></p>
</blockquote>
</td>
<td>
<!-- <button id="cmdScanBarcode" class="mybutton" >Re Scan</button>
-->
</td>
</tr>
<tr>
<td>2.</td>
<td style="text-align:left;" >Take a JOB Paper :</td>
<td style="text-align:left;" > <input type="file" name="file" id="file" class="input-large">
<td> <button id="cmdTakePhoto" class="mybutton" >Take A Photo</button> </td>
</td>
</tr>
<tr>
<td colspan="4" >
<button type="submit" class="myConfirm" name="Import" > Confirm Doc </button>
</td>
</tr>
</table>
<!-- </form> -->
</div>
<br/>
<!-- <script src="assets/jquery-1.9.0.min.js" type="text/javascript"></script> -->
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
let selectedDeviceId;
const codeReader = new ZXing.BrowserMultiFormatReader()
console.log('ZXing code reader initialized')
codeReader.getVideoInputDevices()
.then((videoInputDevices) => {
const sourceSelect = document.getElementById('sourceSelect')
selectedDeviceId = videoInputDevices[0].deviceId
if (videoInputDevices.length >= 1) {
videoInputDevices.forEach((element) => {
const sourceOption = document.createElement('option')
sourceOption.text = element.label
sourceOption.value = element.deviceId
sourceSelect.appendChild(sourceOption)
})
sourceSelect.onchange = () => {
selectedDeviceId = sourceSelect.value;
};
const sourceSelectPanel = document.getElementById('sourceSelectPanel')
sourceSelectPanel.style.display = 'block'
}
document.getElementById('startButton').addEventListener('click', () => {
codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
if (result) {
console.log(result)
document.getElementById('result').textContent = result.text
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error(err)
document.getElementById('result').textContent = err
}
})
console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
})
document.getElementById('resetButton').addEventListener('click', () => {
codeReader.reset()
document.getElementById('result').textContent = '';
console.log('Reset.')
})
})
.catch((err) => {
console.error(err)
})
})
</script>
</body>
</html>