Repository navigation
Expand file tree
/
Copy pathsampleU10909.html
More file actions
117 lines (105 loc) · 5.78 KB
/
Copy pathsampleU10909.html
File metadata and controls
117 lines (105 loc) · 5.78 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
<!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 recognize labels with Dynamsoft Label Recognizer from a live camera stream.">
<meta name="keywords" content="camera based label recognizing">
<title>Dynamsoft Label Recognize Sample - Hello World (recognizing via Camera)</title>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.40/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.0.21/dist/utility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@3.0.30/dist/dlr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.32/dist/cvr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.1/dist/dce.js"></script>
</head>
<body>
<h1 style="font-size: 1.5em;">Recognize Label from a Camera</h1>
<button id="btn-open-recognize" onclick="startCapturing()">Open Label Recognizer</button>
<span id="text-loading" style="display: none; color: red;margin-left: 10px;vertical-align: middle;">Loading Model...</span>
<div id="div-ui-container" style="margin-top: 10px;height: 700px;"></div>
Results:
<br>
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
<script>
let router = null;
let cameraEnhancer = null;
let promiseCVRReady = null;
const cameraViewContainer = document.querySelector("#div-ui-container");
const resultsContainer = document.querySelector("#div-results-container");
const textLoading = document.querySelector("#text-loading");
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "license" as shown below.
*/
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dlr&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/label-recognition/programming/javascript/user-guide.html?ver=latest#specify-the-license or contact support@dynamsoft.com.
* LICENSE ALERT - THE END
*/
Dynamsoft.DLR.LabelRecognizerModule.onDataLoadProgressChanged = (modelPath, tag, progress) => {
if (tag === "starting") {
textLoading.style.display = "inline";
} else if (tag === "completed") {
textLoading.style.display = "none";
};
}
/**
* Preloads the `LabelRecognizer` module
*/
Dynamsoft.Core.CoreModule.loadWasm(["DLR"]);
/**
* Creates a CameraEnhancer instance for later use.
*/
async function initDCE() {
const view = await Dynamsoft.DCE.CameraView.createInstance();
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
cameraViewContainer.append(view.getUIElement());
cameraEnhancer.setScanRegion({x: 10,y: 30,width: 80,height: 20,isMeasuredInPercentage: true,})
}
/**
* Creates a CaptureVisionRouter instance and configure the task to recognize text.
* Also, make sure the original image is returned after it has been processed.
*/
let cvrReady = (async function initCVR() {
await initDCE();
router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
router.setInput(cameraEnhancer);
/* Defines the result receiver for the task.*/
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onRecognizedTextLinesReceived = (result) => {
if (!result.textLineResultItems.length) return;
resultsContainer.innerHTML = "";
console.log(result);
for (let item of result.textLineResultItems) {
resultsContainer.innerHTML += `${item.text}<br><hr>`;
}
};
await router.addResultReceiver(resultReceiver);
// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_TEXT_LINE, true); // Filter out unchecked text lines.
// Filter out duplicate text lines within 3 seconds.
filter.enableResultDeduplication(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_TEXT_LINE, true);
filter.setDuplicateForgetTime(Dynamsoft.Core.EnumCapturedResultItemType.CRIT_TEXT_LINE, 3000);
await router.addResultFilter(filter);
})();
async function startCapturing() {
try {
await (promiseCVRReady = promiseCVRReady || (async () => {
await cvrReady;
/* Starts streaming the video. */
await cameraEnhancer.open();
/* Uses the built-in template "RecognizeTextLines_Default" to start a recognize task. */
await router.startCapturing("RecognizeTextLines_Default");
})());
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
}
</script>
</body>
</html>