-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (134 loc) · 5.7 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
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scandit Web SDK</title>
<!--
Add the library, as explained on http://docs.scandit.com/stable/web/index.html
-->
<script src="https://unpkg.com/scandit-sdk"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/scandit-sdk"></script> -->
<!-- or -->
<!-- <script src="https://unpkg.com/scandit-sdk@1.0.5"></script> -->
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/scandit-sdk@1.0.5"></script> -->
<!-- or -->
<!-- <script src="/node_modules/scandit-sdk/build/browser/index.min.js"></script> -->
<style>
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
font-size: 3vh;
font-family: 'Open Sans', sans-serif;
width: 100vw;
height: 100vh;
}
#scandit-barcode-picker {
width: 100%;
height: 100%;
max-height: 70vh;
}
#scandit-barcode-result {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 100%;
}
button,
button:active,
button[disabled]:hover {
--webkit-appearance: none;
border: none;
border-radius: none;
outline: none;
font-size: 0.7em;
padding: 0.4em 0.6em;
margin: 20px;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
background: #2ec0cc;
color: white;
}
button:hover {
background: #30d0d8;
}
button[disabled] {
opacity: 0.4;
}
#continue-scanning-button {
margin-bottom: 10vh;
}
</style>
</head>
<body>
<!-- Containers for the picker and the results -->
<div id="scandit-barcode-picker"></div>
<div id="scandit-barcode-result">No codes scanned yet</div>
<!-- Button to continue scanning after a barcode was scanned -->
<button id="continue-scanning-button" onclick="continueScanning()">Continue Scanning</button>
<script>
// Helper function called when the "Continue Scanning" button is clicked
function continueScanning() {
if (picker) {
continueButton.disabled = true;
// Resume scanning
picker.resumeScanning();
}
}
// Configure the library and activate it with a license key
const licenseKey = "AaqMxC3xMU0kMnS3/RwQZWMycxOaC4qREjUQedISXP7pVhr0vRGXTE1+HIsrSJuau1ta0Kht5WMcdyWktmz1lyd+LvFKMRfIMh7IchRcLMLsdSipB1PW3nRDLQNdMW193wDvREWhjDmsdv4bFQA56/toshYk4pAWQ40tSP6z6Dxi2Mc6OrB3uaY7mtoORZss9k1YL4PaX44BRID9nWa/uJ8o3/08mot2W8k286TleHd0yP43muqOkCzVDkhT1etV+U+iH7dZ5FLC3Z/yFaCN5nGaILhDiOzeGOAnACVmbijfsOiGyaqXTjwjnPqo8gD643OQ5l4YPdJCp31pdXW9KXwnrcaNKuuWSpn0ErpWF4hxhmEy4oEBOL38LrTIKJFSGzu9qzh1zOqe9HHqZsJhnzzc5zyxHvypuKMBie1mzZy4FRcDUAXGqK0NdujgzZp/dhtBSNDrlXBWkOqUtqnG6uKVtm48nswrV/6kmfWVv+sOgxg6RAnX9yB1dVHZ0seLroxGlvHPhlOhTaJTEa5e+dChqfyEpPoQFwTWXUyI/KkYo8pKJIYM+M7sVFM3TLw1mGRAawvP1q+InGOlxBBw7NCVPahCnYUEcUoBnN7SronPhKdIr7apFQAXHVFJ0ZIrb0avAIgCdTS947I4RUGVbuaEI0DuvmOyLu1BBv44Tvb0Pxnm9v3kIA6ZQGeZP0dgms0qQt8O06MGK6x/kv1o3TuR4HP98GvWiYsYNIWbtWHXkSr9XiK5YL/7mQTDK+oAA8aElvBiWyLtPDybtYMAuyPJKx5hROcC8n0ymUSLP+SJ6MM=";
// const engineLocation = "build"; // the folder containing the engine
// or, if using a CDN,
const engineLocation = "https://unpkg.com/scandit-sdk/build"
ScanditSDK.configure(licenseKey, { engineLocation: engineLocation });
const scannerContainer = document.getElementById("scandit-barcode-picker");
const resultContainer = document.getElementById("scandit-barcode-result");
const continueButton = document.getElementById("continue-scanning-button");
continueButton.disabled = true;
continueButton.hidden = true;
let picker;
// Create & start the picker
ScanditSDK.BarcodePicker.create(scannerContainer, {
playSoundOnScan: true,
vibrateOnScan: true
})
.then(barcodePicker => {
picker = barcodePicker;
// Create the settings object to be applied to the scanner
const scanSettings = new ScanditSDK.ScanSettings({
enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39", "code93",
"itf"
],
codeDuplicateFilter: 1000
});
picker.applyScanSettings(scanSettings);
// If a barcode is scanned, show it to the user and pause scanning
// (scanning is resumed when the user clicks "Continue Scanning")
picker.onScan(scanResult => {
continueButton.hidden = false;
continueButton.disabled = false;
picker.pauseScanning();
resultContainer.innerHTML = scanResult.barcodes.reduce((string, barcode) =>
string +
`${ScanditSDK.Barcode.Symbology.toHumanizedName(barcode.symbology)}: ${barcode.data}<br>`,
'');
});
picker.onScanError(error => {
console.error(error.message);
});
picker.resumeScanning();
})
.catch(error => {
alert(error);
});
</script>
</body>
</html>