/
hello-world.html
109 lines (99 loc) · 4.78 KB
/
hello-world.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
<!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="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
/>
<meta name="keywords" content="barcode, camera" />
<link
rel="canonical"
href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html"
/>
<title>
Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)
</title>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.2.10/dist/utility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/dbr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
</head>
<body>
<h1>Hello World (Decode via Camera)</h1>
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
Results:
<br>
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
<script>
if (location.protocol === "file:") {
const message = `The page is opened via file:// and our SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
console.warn(message);
alert(message);
}
</script>
<script>
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/
Dynamsoft.License.LicenseManager.initLicense(
"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
);
/**
* 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.
* 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.
* 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.
* LICENSE ALERT - THE END
*/
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
(async () => {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
const cameraEnhancer =
await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
document
.querySelector("#div-ui-container")
.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const router =
await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
router.setInput(cameraEnhancer);
// Define a callback for results.
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (result) => {
if (!result.barcodeResultItems.length) return;
const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
}
};
router.addResultReceiver(resultReceiver);
// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true); // Filter out unchecked barcodes.
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
filter.setDuplicateForgetTime("barcode", 3000);
await router.addResultFilter(filter);
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
await router.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>
</html>