Skip to content

Commit 5328e2e

Browse files
felixindrawanfelixindrawan
committed
fix: merged #178 changes
1 parent 86dd76a commit 5328e2e

File tree

4 files changed

+368
-321
lines changed

4 files changed

+368
-321
lines changed

‎hello-world/es6.html‎

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,110 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6-
<meta
7-
name="description"
8-
content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
9-
/>
10-
<meta name="keywords" content="barcode, camera, es6" />
11-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
12-
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
13-
</head>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
9+
/>
10+
<meta name="keywords" content="barcode, camera, es6" />
11+
<link
12+
rel="canonical"
13+
href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html"
14+
/>
15+
<title>
16+
Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)
17+
</title>
18+
</head>
1419

15-
<body>
16-
<h1>Hello World for ES6 (Decode via Camera)</h1>
17-
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
18-
Results:<br />
19-
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
20-
<script type="module">
21-
import {
22-
CoreModule,
23-
LicenseManager,
24-
CaptureVisionRouter,
25-
CameraView,
26-
CameraEnhancer,
27-
MultiFrameResultCrossFilter,
28-
} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
20+
<body>
21+
<h1>Hello World for ES6 (Decode via Camera)</h1>
22+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
23+
Results:<br />
24+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
25+
<script type="module">
26+
import {
27+
CoreModule,
28+
LicenseManager,
29+
CaptureVisionRouter,
30+
CameraView,
31+
CameraEnhancer,
32+
MultiFrameResultCrossFilter,
33+
} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
2934

30-
/** LICENSE ALERT - README
31-
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
32-
*/
35+
/** LICENSE ALERT - README
36+
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
37+
*/
3338

34-
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
39+
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
3540

36-
/**
37-
* 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.
38-
* 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.
39-
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
40-
* LICENSE ALERT - THE END
41-
*/
41+
/**
42+
* 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.
43+
* 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.
44+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
45+
* LICENSE ALERT - THE END
46+
*/
4247

43-
CoreModule.engineResourcePaths = {
44-
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
45-
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
46-
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
47-
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
48-
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
49-
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
50-
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
51-
};
48+
CoreModule.engineResourcePaths = {
49+
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
50+
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
51+
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
52+
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
53+
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
54+
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
55+
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
56+
};
5257

53-
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
54-
CoreModule.loadWasm(["DBR"]);
58+
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
59+
CoreModule.loadWasm(["DBR"]);
5560

56-
(async function () {
57-
try {
58-
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
59-
const cameraView = await CameraView.createInstance();
60-
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
61-
// Get default UI and append it to DOM.
62-
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
61+
(async function () {
62+
try {
63+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
64+
const cameraView = await CameraView.createInstance();
65+
const cameraEnhancer = await CameraEnhancer.createInstance(
66+
cameraView
67+
);
68+
// Get default UI and append it to DOM.
69+
document
70+
.querySelector("#camera-view-container")
71+
.append(cameraView.getUIElement());
6372

64-
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
65-
const cvRouter = await CaptureVisionRouter.createInstance();
66-
cvRouter.setInput(cameraEnhancer);
73+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
74+
const cvRouter = await CaptureVisionRouter.createInstance();
75+
cvRouter.setInput(cameraEnhancer);
6776

68-
// Define a callback for results.
69-
cvRouter.addResultReceiver({
70-
onDecodedBarcodesReceived: (result) => {
71-
if (!result.barcodeResultItems.length) return;
77+
// Define a callback for results.
78+
cvRouter.addResultReceiver({
79+
onDecodedBarcodesReceived: (result) => {
80+
if (!result.barcodeResultItems.length) return;
7281

73-
const resultsContainer = document.querySelector("#results");
74-
resultsContainer.textContent = "";
75-
console.log(result);
76-
for (let item of result.barcodeResultItems) {
77-
resultsContainer.append(
78-
`${item.formatString}: ${item.text}`,
79-
document.createElement("br"),
80-
document.createElement("hr")
81-
);
82-
}
83-
},
84-
});
82+
const resultsContainer = document.querySelector("#results");
83+
resultsContainer.textContent = "";
84+
console.log(result);
85+
for (let item of result.barcodeResultItems) {
86+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
87+
}
88+
},
89+
});
8590

86-
// Filter out unchecked and duplicate results.
87-
const filter = new MultiFrameResultCrossFilter();
88-
// Filter out unchecked barcodes.
89-
filter.enableResultCrossVerification("barcode", true);
90-
// Filter out duplicate barcodes within 3 seconds.
91-
filter.enableResultDeduplication("barcode", true);
92-
await cvRouter.addResultFilter(filter);
91+
// Filter out unchecked and duplicate results.
92+
const filter = new MultiFrameResultCrossFilter();
93+
// Filter out unchecked barcodes.
94+
filter.enableResultCrossVerification("barcode", true);
95+
// Filter out duplicate barcodes within 3 seconds.
96+
filter.enableResultDeduplication("barcode", true);
97+
await cvRouter.addResultFilter(filter);
9398

94-
// Open camera and start scanning single barcode.
95-
await cameraEnhancer.open();
96-
await cvRouter.startCapturing("ReadSingleBarcode");
97-
} catch (ex) {
98-
let errMsg = ex.message || ex;
99-
console.error(errMsg);
100-
alert(errMsg);
101-
}
102-
})();
103-
</script>
104-
</body>
99+
// Open camera and start scanning single barcode.
100+
await cameraEnhancer.open();
101+
await cvRouter.startCapturing("ReadSingleBarcode");
102+
} catch (ex) {
103+
let errMsg = ex.message || ex;
104+
console.error(errMsg);
105+
alert(errMsg);
106+
}
107+
})();
108+
</script>
109+
</body>
105110
</html>

‎hello-world/hello-world.html‎

Lines changed: 83 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,96 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6-
<meta
7-
name="description"
8-
content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
9-
/>
10-
<meta name="keywords" content="barcode, camera" />
11-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
12-
<title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
13-
</head>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6+
<meta
7+
name="description"
8+
content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
9+
/>
10+
<meta name="keywords" content="barcode, camera" />
11+
<link
12+
rel="canonical"
13+
href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html"
14+
/>
15+
<title>
16+
Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)
17+
</title>
18+
</head>
1419

15-
<body>
16-
<h1>Hello World (Decode via Camera)</h1>
17-
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
18-
Results:<br />
19-
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
20-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
21-
<script>
22-
/** LICENSE ALERT - README
23-
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
24-
*/
20+
<body>
21+
<h1>Hello World (Decode via Camera)</h1>
22+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
23+
Results:<br />
24+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
25+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
26+
<script>
27+
/** LICENSE ALERT - README
28+
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
29+
*/
2530

26-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
31+
Dynamsoft.License.LicenseManager.initLicense(
32+
"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
33+
);
2734

28-
/**
29-
* 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.
30-
* 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.
31-
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
32-
* LICENSE ALERT - THE END
33-
*/
35+
/**
36+
* 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.
37+
* 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.
38+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
39+
* LICENSE ALERT - THE END
40+
*/
3441

35-
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
36-
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
37-
// Defined globally for easy debugging.
38-
let cameraEnhancer, cvRouter;
42+
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
43+
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
44+
// Defined globally for easy debugging.
45+
let cameraEnhancer, cvRouter;
3946

40-
(async () => {
41-
try {
42-
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
43-
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
44-
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
45-
// Get default UI and append it to DOM.
46-
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
47+
(async () => {
48+
try {
49+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
50+
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
51+
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
52+
cameraView
53+
);
54+
// Get default UI and append it to DOM.
55+
document
56+
.querySelector("#camera-view-container")
57+
.append(cameraView.getUIElement());
4758

48-
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
49-
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
50-
cvRouter.setInput(cameraEnhancer);
59+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
60+
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
61+
cvRouter.setInput(cameraEnhancer);
5162

52-
// Define a callback for results.
53-
cvRouter.addResultReceiver({
54-
onDecodedBarcodesReceived: (result) => {
55-
if (!result.barcodeResultItems.length) return;
63+
// Define a callback for results.
64+
cvRouter.addResultReceiver({
65+
onDecodedBarcodesReceived: (result) => {
66+
if (!result.barcodeResultItems.length) return;
5667

57-
const resultsContainer = document.querySelector("#results");
58-
resultsContainer.textContent = "";
59-
console.log(result);
60-
for (let item of result.barcodeResultItems) {
61-
resultsContainer.append(
62-
`${item.formatString}: ${item.text}`,
63-
document.createElement("br"),
64-
document.createElement("hr")
65-
);
66-
}
67-
},
68-
});
68+
const resultsContainer = document.querySelector("#results");
69+
resultsContainer.textContent = "";
70+
console.log(result);
71+
for (let item of result.barcodeResultItems) {
72+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
73+
}
74+
},
75+
});
6976

70-
// Filter out unchecked and duplicate results.
71-
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
72-
// Filter out unchecked barcodes.
73-
filter.enableResultCrossVerification("barcode", true);
74-
// Filter out duplicate barcodes within 3 seconds.
75-
filter.enableResultDeduplication("barcode", true);
76-
await cvRouter.addResultFilter(filter);
77+
// Filter out unchecked and duplicate results.
78+
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
79+
// Filter out unchecked barcodes.
80+
filter.enableResultCrossVerification("barcode", true);
81+
// Filter out duplicate barcodes within 3 seconds.
82+
filter.enableResultDeduplication("barcode", true);
83+
await cvRouter.addResultFilter(filter);
7784

78-
// Open camera and start scanning single barcode.
79-
await cameraEnhancer.open();
80-
await cvRouter.startCapturing("ReadSingleBarcode");
81-
} catch (ex) {
82-
let errMsg = ex.message || ex;
83-
console.error(errMsg);
84-
alert(errMsg);
85-
}
86-
})();
87-
</script>
88-
</body>
85+
// Open camera and start scanning single barcode.
86+
await cameraEnhancer.open();
87+
await cvRouter.startCapturing("ReadSingleBarcode");
88+
} catch (ex) {
89+
let errMsg = ex.message || ex;
90+
console.error(errMsg);
91+
alert(errMsg);
92+
}
93+
})();
94+
</script>
95+
</body>
8996
</html>

0 commit comments

Comments
 (0)