Skip to content

Commit dfb12e0

Browse files
Cube-JCube-J
committed
update debug sample
1 parent 83fbf2c commit dfb12e0

2 files changed

Lines changed: 234 additions & 131 deletions

File tree

‎hello-world/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ In this set of samples, we will revisit the "Hello World" code and show how to i
66

77
Let's now go through each of the samples.
88

9-
## Hello World - Read Barcodes via Video
9+
## Hello World
1010

1111
In this example, you will learn the minimum codes required to initialize and set up the SDK.
1212

‎others/debug/public/index.html‎

Lines changed: 233 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,250 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="description"
7+
content="Read barcodes from camera with Dynamsoft Barcode Reader. Save the processed frames for debugging."
8+
/>
9+
<meta name="keywords" content="read barcode from camera, debug" />
10+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
11+
<title>Dynamsoft Barcode Reader Sample - Debug</title>
12+
</head>
313

4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader. Save the processed frames for debugging.">
7-
<meta name="keywords" content="read barcode from camera, debug">
8-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
9-
</head>
10-
11-
<body>
12-
<h1 style="font-size: 1.5em;">Read Barcodes from Camera - Debug</h1>
13-
<button id="btn-show-scanner">show scanner</button>
14-
<br><br>
15-
<label><input type="radio" name="video-settings" checked value="default">default</label>
16-
<label><input type="radio" name="video-settings" value="back-camera">back camera</label>
17-
<label><input type="radio" name="video-settings" value="only-video">only video</label>
18-
<br><br>
19-
<label><input id="cb-send-img" type="checkbox">send image to</label><input id="ipt-server-url" placeholder="server url, default ./collect">
20-
<br>
21-
<div id="div-video-container" style="width:100%;height:calc(100vh - 150px);"></div>
14+
<body>
15+
<h1 style="font-size: 1.5em">Read Barcodes from Camera - Debug</h1>
16+
<button id="btn-start-capturing">start capturing</button>
17+
<br /><br />
18+
<label
19+
><input
20+
type="radio"
21+
name="video-settings"
22+
checked
23+
value="default"
24+
/>default</label
25+
>
26+
<label
27+
><input type="radio" name="video-settings" value="back-camera" />back
28+
camera</label
29+
>
30+
<label
31+
><input type="radio" name="video-settings" value="only-video" />only
32+
video</label
33+
>
34+
<br /><br />
35+
<label><input id="cb-send-img" type="checkbox" />send image to</label
36+
><input id="ipt-server-url" placeholder="server url, default ./collect" />
37+
<br />
38+
<div
39+
id="div-ui-container"
40+
style="width: 100%; height: calc(100vh - 150px)"
41+
></div>
2242
<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
23-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
43+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script>
44+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script>
45+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script>
46+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231026110217/dist/cvr.js"></script>
47+
<script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.js"></script>
2448
<script>
25-
if(location.protocol === "file:") {
26-
const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
27-
console.warn(message);
28-
alert(message);
29-
}
49+
if (location.protocol === "file:") {
50+
const message = `The page is opened via file:// and some SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
51+
console.warn(message);
52+
alert(message);
53+
}
3054
</script>
3155
<script>
32-
eruda.init();
33-
Dynamsoft.DBR.BarcodeReader._onLog = console.log;
34-
/** LICENSE ALERT - README
35-
* To use the library, you need to first specify a license key using the API "license" as shown below.
36-
*/
56+
eruda.init();
57+
Dynamsoft.Core.CoreModule.enableLogging();
58+
Dynamsoft.DBR.BarcodeReaderModule._onLog = console.log;
59+
Dynamsoft.CVR.CaptureVisionRouter._onLog = console.log;
60+
Dynamsoft.DCE.CameraEnhancer._onLog = console.log;
61+
62+
/** LICENSE ALERT - README
63+
* To use the library, you need to first specify a license key using the API "initLicense" as shown below.
64+
*/
3765

38-
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
66+
Dynamsoft.License.LicenseManager.initLicense(
67+
"DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ=="
68+
);
3969

40-
/**
41-
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
42-
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
43-
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=9.6.31&utm_source=github#specify-the-license or contact support@dynamsoft.com.
44-
* LICENSE ALERT - THE END
45-
*/
70+
/**
71+
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
72+
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
73+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com.
74+
* LICENSE ALERT - THE END
75+
*/
76+
77+
// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
78+
Dynamsoft.CVR.CaptureVisionRouter.preloadModule(["DBR"]).catch((ex) => {
79+
let errMsg;
80+
if (ex.message.includes("network connection error")) {
81+
errMsg =
82+
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
83+
} else {
84+
errMsg = ex.message || ex;
85+
}
86+
console.error(errMsg);
87+
alert(errMsg);
88+
});
89+
90+
const init = async () => {
91+
try {
92+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
93+
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
94+
const cameraEnhancer =
95+
await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
96+
document
97+
.querySelector("#div-ui-container")
98+
.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
99+
100+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
101+
const router =
102+
await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
103+
router.setInput(cameraEnhancer);
104+
105+
// Define a callback for results.
106+
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
107+
resultReceiver.onDecodedBarcodesReceived = (result) => {
108+
for (let item of result.barcodesResultItems) {
109+
console.log(item.text);
110+
alert(item.text);
111+
}
112+
};
113+
router.addResultReceiver(resultReceiver);
46114

47-
let pScanner = null;
48-
// decode video from camera
49-
document.getElementById('btn-show-scanner').addEventListener('click', async() => {
50-
try {
51-
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
52-
scanner.dce.constructor._onLog = console.log;
53-
let rs = await scanner.getRuntimeSettings();
54-
rs.timeout = 100000;
55-
await scanner.updateRuntimeSettings(rs);
56-
let ss = await scanner.getScanSettings();
57-
ss.intervalTime = 100;
58-
ss.whenToPlaySoundforSuccessfulRead = "frame";
59-
await scanner.updateScanSettings(ss);
60-
scanner.ifSaveOriginalImageInACanvas = true;
61-
let processingCount = 0;
62-
scanner.onFrameRead = async results => {
63-
let bSendImg = !!document.getElementById("cb-send-img").checked;
64-
/**
65-
* The barcode reading speed is very fast, we must limit
66-
* the number of uploaded frames (4), so that it is feasible.
67-
*/
68-
if (bSendImg && processingCount < 4) {
69-
++processingCount;
70-
try {
71-
/**
72-
* The original image is the one the reader worked on,
73-
* we can collect it for futher testing and debugging.
74-
*/
75-
let cvs = scanner.getOriginalImageInACanvas();
76-
let fd = new FormData();
77-
if (cvs != null) {
78-
let blob = cvs.convertToBlob ?
79-
await cvs.convertToBlob() :
80-
await new Promise(resolve => {
81-
cvs.toBlob(blob => resolve(blob));
82-
});
83-
fd.append("img", blob);
84-
await fetch(document.getElementById("ipt-server-url").value || "collect", {
85-
method: "POST",
86-
body: fd
87-
});
88-
}
89-
} catch (ex) {
90-
console.error(ex);
91-
}
92-
--processingCount;
115+
// Filter out unchecked and duplicate results.
116+
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
117+
filter.enableResultCrossVerification(
118+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
119+
true
120+
); // Filter out unchecked barcodes.
121+
// Filter out duplicate barcodes within 3 seconds.
122+
filter.enableResultDeduplication(
123+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
124+
true
125+
);
126+
filter.setDuplicateForgetTime(
127+
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
128+
3000
129+
);
130+
await router.addResultFilter(filter);
131+
132+
// TODO
133+
let rs = await scanner.getRuntimeSettings();
134+
rs.timeout = 100000;
135+
await scanner.updateRuntimeSettings(rs);
136+
let ss = await scanner.getScanSettings();
137+
ss.intervalTime = 100;
138+
ss.whenToPlaySoundforSuccessfulRead = "frame";
139+
await scanner.updateScanSettings(ss);
140+
scanner.ifSaveOriginalImageInACanvas = true;
141+
let processingCount = 0;
142+
scanner.onFrameRead = async (results) => {
143+
let bSendImg = !!document.getElementById("cb-send-img").checked;
144+
/**
145+
* The barcode reading speed is very fast, we must limit
146+
* the number of uploaded frames (4), so that it is feasible.
147+
*/
148+
if (bSendImg && processingCount < 4) {
149+
++processingCount;
150+
try {
151+
/**
152+
* The original image is the one the reader worked on,
153+
* we can collect it for futher testing and debugging.
154+
*/
155+
let cvs = scanner.getOriginalImageInACanvas();
156+
let fd = new FormData();
157+
if (cvs != null) {
158+
let blob = cvs.convertToBlob
159+
? await cvs.convertToBlob()
160+
: await new Promise((resolve) => {
161+
cvs.toBlob((blob) => resolve(blob));
162+
});
163+
fd.append("img", blob);
164+
await fetch(
165+
document.getElementById("ipt-server-url").value ||
166+
"collect",
167+
{
168+
method: "POST",
169+
body: fd,
93170
}
94-
};
95-
document.getElementById('div-video-container').appendChild(scanner.getUIElement());
96-
await scanner.show();
97-
} catch (ex) {
98-
let errMsg;
99-
if (ex.message.includes("network connection error")) {
100-
errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
101-
} else {
102-
errMsg = ex.message||ex;
171+
);
103172
}
104-
console.error(errMsg);
105-
alert(errMsg);
173+
} catch (ex) {
174+
console.error(ex);
175+
}
176+
--processingCount;
106177
}
178+
};
179+
180+
return {
181+
cameraView,
182+
cameraEnhancer,
183+
router,
184+
};
185+
} catch (ex) {
186+
let errMsg;
187+
if (ex.message.includes("network connection error")) {
188+
errMsg =
189+
"Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
190+
} else {
191+
errMsg = ex.message || ex;
192+
}
193+
console.error(errMsg);
194+
alert(errMsg);
195+
}
196+
};
197+
let pInit = init();
198+
199+
document
200+
.getElementById("btn-start-capturing")
201+
.addEventListener("click", async () => {
202+
const { cameraEnhancer, router } = await pInit;
203+
204+
// Open camera and start scanning single barcode.
205+
await cameraEnhancer.open();
206+
await router.startCapturing("ReadSingleBarcode");
107207
});
108208

109-
let switchVideoSettings = async() => {
110-
if (!pScanner) return;
111-
let scanner = await pScanner;
112-
switch (document.querySelector('input[name="video-settings"]:checked').value) {
113-
case "back-camera":
114-
await scanner.updateVideoSettings({
115-
video: {
116-
facingMode: "environment"
117-
}
118-
});
119-
break;
120-
case "only-video":
121-
await scanner.updateVideoSettings({
122-
video: true
123-
});
124-
break;
125-
default:
126-
await scanner.updateVideoSettings({
127-
video: {
128-
width: {
129-
ideal: 1280
130-
},
131-
height: {
132-
ideal: 720
133-
},
134-
facingMode: {
135-
ideal: "environment"
136-
}
137-
}
138-
});
139-
}
140-
};
141-
for (let ipt of document.querySelectorAll('input[name="video-settings"]')) {
142-
ipt.addEventListener("change", switchVideoSettings);
209+
let switchVideoSettings = async () => {
210+
const { cameraEnhancer } = await pInit;
211+
212+
switch (
213+
document.querySelector('input[name="video-settings"]:checked').value
214+
) {
215+
case "back-camera":
216+
await cameraEnhancer.updateVideoSettings({
217+
video: {
218+
facingMode: "environment",
219+
},
220+
});
221+
break;
222+
case "only-video":
223+
await cameraEnhancer.updateVideoSettings({
224+
video: true,
225+
});
226+
break;
227+
default:
228+
await cameraEnhancer.updateVideoSettings({
229+
video: {
230+
width: {
231+
ideal: 1280,
232+
},
233+
height: {
234+
ideal: 720,
235+
},
236+
facingMode: {
237+
ideal: "environment",
238+
},
239+
},
240+
});
143241
}
242+
};
243+
for (let ipt of document.querySelectorAll(
244+
'input[name="video-settings"]'
245+
)) {
246+
ipt.addEventListener("change", switchVideoSettings);
247+
}
144248
</script>
145-
</body>
146-
147-
</html>
249+
</body>
250+
</html>

0 commit comments

Comments
 (0)