-
Notifications
You must be signed in to change notification settings - Fork 45
Expand file tree
/
Copy pathindex.html
More file actions
163 lines (147 loc) · 6.26 KB
/
Copy pathindex.html
File metadata and controls
163 lines (147 loc) · 6.26 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Scan barcodes with tip messages and beep feedback using Dynamsoft Barcode Reader." />
<meta name="keywords" content="barcode scanner, tip message, beep, camera scanning" />
<link rel="stylesheet" href="./index.css">
<title>Dynamsoft Barcode Reader Sample - Tip Message & Beep</title>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
</head>
<body>
<h1 class="title">Barcode Scanner with Tip & Beep</h1>
<div class="camera-view">
<div class="fallback-overlay">📸 Having trouble? Tap here to take a photo</div>
</div>
<div class="result-view"></div>
<script>
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js
* to get your own trial license good for 30 days.
* LICENSE ALERT - THE END
*/
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
const cameraContainer = document.querySelector(".camera-view");
const resultView = document.querySelector(".result-view");
const fallbackOverlay = document.querySelector(".fallback-overlay");
// Define the tip message for polling display
const tipMessages = [
"\u{1F4F7} Point your camera at a barcode",
"\u{1F50D} Move closer so the barcode fills the frame",
"\u{1F4A1} Make sure the barcode is well-lit",
];
let tipInterval;
let lostTimer;
let singleFrameModeTimer;
let tipIndex = 0;
let cameraView;
let cameraEnhancer;
let cvRouter;
(async () => {
try {
// Initialize DBRJS
cameraView = await Dynamsoft.DCE.CameraView.createInstance();
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);
cameraView.setTipConfig({
duration: 0,
coordinateBase: "view",
});
let tipInterval;
let lostTimer;
let tipIndex;
/*
If polling has not been started or the device is not in single frame mode,
set up timers to periodically display the corresponding tip messages.
*/
const startTipCycle = () => {
if (tipInterval) return;
if (cameraEnhancer.singleFrameMode !== "disabled") return;
resultView.innerHTML = "";
tipIndex = 0;
tipInterval = setInterval(() => {
cameraView.updateTipMessage(tipMessages[tipIndex++ % tipMessages.length]);
cameraView.setTipVisible(true);
}, 2000);
singleFrameModeTimer = setTimeout(() => {
cameraView.setTipVisible(false);
fallbackOverlay.style.display = "block";
clearInterval(tipInterval);
tipInterval = null;
}, 10000);
}
const stopTipCycle = () => {
clearInterval(tipInterval); tipInterval = null;
clearTimeout(lostTimer); lostTimer = null;
clearTimeout(singleFrameModeTimer); singleFrameModeTimer = null;
cameraView.setTipVisible(false);
};
const displayResults = (items) => {
resultView.innerHTML = "";
for (let item of items) {
const div = document.createElement("div");
div.innerHTML = `format: ${item.formatString}<br> text: ${item.text} <br> ------------------`;
resultView.append(div);
}
};
const toggleSingleFrameMode = async () => {
await cvRouter.stopCapturing();
cameraEnhancer.singleFrameMode = "image";
await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
document.querySelector(".dce-bg-camera").click();
}
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onCapturedResultReceived = (result) => {
if (!result.decodedBarcodesResult) {
if (cameraEnhancer.singleFrameMode !== "disabled") {
fallbackOverlay.textContent = "\u{274C} No barcode found \u{2014} tap to try another photo";
}
return;
}
if (cameraEnhancer.singleFrameMode !== "disabled") {
fallbackOverlay.textContent = "\u{2705} Tap to resume camera scanning";
fallbackOverlay.onclick = async () => {
await cvRouter.stopCapturing();
cameraEnhancer.singleFrameMode = "disabled";
fallbackOverlay.style.display = "none";
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
fallbackOverlay.textContent = "\u{1F4F8} Having trouble? Tap here to take a photo";
startTipCycle();
fallbackOverlay.onclick = toggleSingleFrameMode;
}
}
displayResults(result.decodedBarcodesResult.barcodeResultItems);
Dynamsoft.DCE.Feedback.beep();
stopTipCycle();
lostTimer = setTimeout(() => {
startTipCycle();
}, 2000);
};
await cvRouter.addResultReceiver(resultReceiver);
// Set cvRouter result filter
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
fallbackOverlay.onclick = async () => {
await cvRouter.stopCapturing();
cameraEnhancer.singleFrameMode = "image";
await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
cameraEnhancer.open();
}
cameraContainer.append(cameraView.getUIElement());
cameraView.setScanLaserVisible(true);
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
startTipCycle();
} catch (ex) {
throw ex;
}
})();
</script>
</body>
</html>