Skip to content
This repository was archived by the owner on Apr 25, 2025. It is now read-only.

Commit 8ff3baf

Browse files
DMGithubPublisherDMGithubPublisher
committed
2.2.2
1 parent f99aa65 commit 8ff3baf

File tree

12 files changed

+98
-58
lines changed

12 files changed

+98
-58
lines changed

‎README.md‎

Lines changed: 54 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Once integrated, your users can open your website in a browser, access their cam
88

99
In this guide, you will learn step by step on how to integrate this library into your website.
1010

11-
[TEST THE LIBRARY](https://www.dynamsoft.com/survey/dlr/?utm_source=github&product=dlr&package=js)
11+
[GET THE LIBRARY](https://www.dynamsoft.com/survey/dlr/?utm_source=github&product=dlr&package=js)
1212

1313
**Table of Contents**
1414

@@ -44,14 +44,21 @@ The complete code of the "Hello World" example is shown below
4444
<html>
4545

4646
<body>
47-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.1/dist/dlr.js"></script>
48-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.0.3/dist/dce.js"></script>
47+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.2/dist/dlr.js"></script>
48+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.0.3/dist/dce.js"></script>
4949
<script>
5050
// initializes and uses the library
5151
(async () => {
5252
Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL = Dynamsoft.DLR.LabelRecognizer.defaultUIElementURL;
5353
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
54-
54+
Dynamsoft.DLR.LabelRecognizer.onResourcesLoadStarted = (resourcePath) => {
55+
console.log("Loading " + resourcePath);
56+
// Show a visual cue that a model file is being
57+
};
58+
Dynamsoft.DLR.LabelRecognizer.onResourcesLoaded = (resourcePath) => {
59+
console.log("Finished loading " + resourcePath);
60+
// Hide the visual cue
61+
};
5562
let recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance({
5663
runtimeSettings: "video-letter"
5764
});
@@ -78,15 +85,15 @@ The complete code of the "Hello World" example is shown below
7885
<!--<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.minimum-code.html" title="Code in Github">
7986
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" style="width:20px;height:20px;">
8087
</a>
81-
&nbsp;-->
88+
&nbsp; -->
8289
<a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/b1w8vm0t/" title="Run via JSFiddle">
83-
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" style="width:20px;height:20px;">
90+
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;">
8491
</a>
85-
<!--&nbsp;
92+
<!--&nbsp;
8693
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.minimum-code.html?utm_source=github" title="Run in Dynamsoft">
8794
<img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" style="width:20px;height:20px;">
8895
</a>
89-
&nbsp;
96+
&nbsp;
9097
<a target="_blank" href="https://tst.dynamsoft.com/public/download/dbr/browser/code/helloworld-v8.8.7.zip?utm_source=github" title="Download from Dynamsoft">
9198
<img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/download.svg" alt="Download from Dynamsoft" style="width:20px;height:20px; ">
9299
</a>-->
@@ -125,6 +132,8 @@ If the test doesn't go as expected, you can check out the [FAQ](#faq) or [contac
125132

126133
## Building your own page
127134

135+
We'll show all the steps required to build a web page for reading machine-readable zones (MRZ) on passports, visas, etc.
136+
128137
### Include the library
129138

130139
#### Use a CDN
@@ -134,14 +143,14 @@ The simplest way to include the library is to use either the [jsDelivr](https://
134143
* jsDelivr
135144

136145
```html
137-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.1/dist/dlr.js"></script>
146+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.2/dist/dlr.js"></script>
138147
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.0.3/dist/dce.js"></script>
139148
```
140149

141150
* UNPKG
142151

143152
```html
144-
<script src="https://unpkg.com/dynamsoft-label-recognizer@2.2.1/dist/dlr.js"></script>
153+
<script src="https://unpkg.com/dynamsoft-label-recognizer@2.2.2/dist/dlr.js"></script>
145154
<script src="https://unpkg.com/dynamsoft-camera-enhancer@2.0.3/dist/dce.js"></script>
146155
```
147156

@@ -167,15 +176,15 @@ $ yarn add dynamsoft-camera-enhancer
167176
* npm
168177

169178
```
170-
$ npm install dynamsoft-label-recognizer@2.2.1 --save
179+
$ npm install dynamsoft-label-recognizer@2.2.2 --save
171180
$ npm install dynamsoft-camera-enhancer@2.0.3 --save
172181
```
173182

174183
Depending on how you downloaded the library and where you put it. You can typically include it like this:
175184

176185
```html
177-
<script src="/dlr-js-2.2.1/dist/dlr.js"></script>
178-
<script src="/dlr-js-2.2.1/dce/dist/dce.js"></script>
186+
<script src="/dlr-js-2.2.2/dist/dlr.js"></script>
187+
<script src="/dlr-js-2.2.2/dce/dist/dce.js"></script>
179188
```
180189

181190
or
@@ -197,7 +206,7 @@ The library requires a license to work, use the API `license` to specify the lic
197206

198207
```javascript
199208
Dynamsoft.DLR.LabelRecognizer.license =
200-
"YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING";
209+
"YOUR-ORGANIZATION-ID or YOUR-HANDSHAKECODE or AN-OFFLINE-LICENSE or ANY-OTHER-TYPE-OF-SUPPORTED-LICENSE-STRING";
201210
```
202211

203212
*Note*:
@@ -208,15 +217,34 @@ Dynamsoft.DLR.LabelRecognizer.license =
208217

209218
#### Specify the location of the "engine" files
210219

211-
The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dlr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dlr.js is compiled into another file), this configuration will be required.
220+
The "engine" files refer to *.worker.js, *.wasm.js and *.wasm, etc. which are loaded by the main library at runtime as well as model files (\*.data) which are necessary for the recognition of specific types of text. This configuration option uses the API `engineResourcePath` and is often not required as these files usually are in the same location with the main library file (dlr.js). However, in cases where the engine files are not in the same location as the main library file (for example, with frameworks like Angular or React, dlr.js is compiled into another file), this configuration will be required.
212221

213222
The following code uses the jsDelivr CDN, feel free to change it to your own location of these files.
214223

215224
```javascript
216-
Dynamsoft.DLR.LabelRecognizer.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.1/dist/";
225+
Dynamsoft.DLR.LabelRecognizer.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.2/dist/";
217226
Dynamsoft.DCE.CameraEnhancer.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.0.3/dist/";
218227
```
219228

229+
#### Add a visual cue about the loading of a .data file
230+
231+
The .data files are crucial for the recognition of certain types of text. For example, to read the MRZ zone on passports, the file MRZ.data must be loaded first. These .data files are loaded from the server on demand at runtime. At present, these files are quite large, for example, MRZ.data is about 10MB. Although these files are cached locally as soon as they are downloaded, loading them for the first time can be quite time-consuming. To make the process user-friendly, it's recommended to show a visual cue about the loading process to the user with the help of the APIs `onResourcesLoadStarted`, `onResourcesLoadProgress` and `onResourcesLoaded` :
232+
233+
```js
234+
Dynamsoft.DLR.LabelRecognizer.onResourcesLoadStarted = (resourcePath) => {
235+
console.log("Loading " + resourcePath);
236+
// Show a visual cue that a model file is being
237+
}
238+
Dynamsoft.DLR.LabelRecognizer.onResourcesLoadProgress = (resourcePath, progress) => {
239+
console.log(resourcePath + "loading progress: " + progress.loaded + "/" + progress.total);
240+
// Show the progress
241+
}
242+
Dynamsoft.DLR.LabelRecognizer.onResourcesLoaded = (resourcePath) => {
243+
console.log("Finished loading " + resourcePath);
244+
// Hide the visual cue
245+
}
246+
```
247+
220248
### Interact with the library
221249

222250
#### Create a `LabelRecognizer` object
@@ -226,9 +254,7 @@ To use the library, we first create a `LabelRecognizer` object.
226254
```javascript
227255
let recognizer = null;
228256
try {
229-
recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance({
230-
runtimeSettings: "video-letter"
231-
});
257+
recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance();
232258
} catch (ex) {
233259
console.error(ex);
234260
}
@@ -254,9 +280,9 @@ In some cases, a different camera might be required instead of the default one.
254280

255281
```javascript
256282
// set which camera and what resolution to use
257-
let allCameras = await enhancer.getAllCameras();
258-
await enhancer.selectCamera(allCameras[0]);
259-
await enhancer.setResolution(1280, 720);
283+
let allCameras = await cameraEnhancer.getAllCameras();
284+
await cameraEnhancer.selectCamera(allCameras[0]);
285+
await cameraEnhancer.setResolution(1280, 720);
260286
```
261287

262288
#### Set up the recognition process
@@ -308,8 +334,8 @@ Dynamsoft.DLR.LabelRecognizer.defaultUIElementURL = "THE-URL-TO-THE-FILE";
308334
```
309335

310336
```javascript
311-
await enhancer.setUIElement(Dynamsoft.DLR.LabelRecognizer.defaultUIElementURL);
312-
document.getElementById('recognizerUI').appendChild(enhancer.getUIElement());
337+
await cameraEnhancer.setUIElement(Dynamsoft.DLR.LabelRecognizer.defaultUIElementURL);
338+
document.getElementById('recognizerUI').appendChild(cameraEnhancer.getUIElement());
313339
document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button
314340
```
315341

@@ -325,18 +351,17 @@ document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the c
325351
(async () => {
326352
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
327353
await cameraEnhancer.setUIElement(document.getElementById('div-video-container'));
328-
let recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance({
329-
runtimeSettings: "video-passportMRZ"
330-
});
354+
let recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance();
331355
recognizer.cameraEnhancer = cameraEnhancer;
356+
await recognizer.updateRuntimeSettingsFromString("video-MRZ");
332357
recognizer.onFrameRead = results => {
333358
for (let result of results) {
334359
for (let lineResult of result.lineResults) {
335360
console.log(lineResult.text);
336361
}
337362
}
338363
};
339-
recognizer.onUniqueRead = (txt, results) => {
364+
recognizer.onMRZRead = (txt, results) => {
340365
alert(txt);
341366
};
342367
await recognizer.startScanning(true);
@@ -384,7 +409,7 @@ After that, if you want to evaluate the library further, you can [register for a
384409

385410
This library requires the following features which are supported by all modern mainstream browsers:
386411

387-
* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
412+
* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
388413

389414
The above four features are required for the library to work.
390415

‎dist/dlr-2.2.1.worker.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

dist/dlr-2.2.1.wasm renamed to dist/dlr-2.2.2.wasm

3.26 MB
Binary file not shown.

dist/dlr-2.2.1.wasm.js renamed to dist/dlr-2.2.2.wasm.js

File renamed without changes.

‎dist/dlr-2.2.2.worker.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dlr.browser.esm.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dlr.browser.mjs‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎dist/dlr.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dlr.mjs‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎dist/dlr.ui.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div style="width:100%;height:100%;min-width:100px;min-height:100px;background:#eee;position:relative;">
22
<svg class="dce-bg-loading" style="display:none;animation:1s linear infinite dce-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;" viewBox="0 0 1792 1792"><path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"/></svg>
33
<svg class="dce-bg-camera" style="display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;" viewBox="0 0 2048 1792"><path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"/></svg>
4-
<video class="dce-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
4+
<video class="dce-video" playsinline="true" muted style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
55
<canvas class="dlr-cvs-drawarea" style="width:100%;height:100%;position:absolute;left:0;top:0;"></canvas>
66
<div class="dlr-cvs-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;">
77
<div class="dlr-scanlight" style="display:none;width:100%;height:3%;position:absolute;animation:3s infinite dlr-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;"></div>

0 commit comments

Comments
 (0)