Skip to content

Commit 1d63c8c

Browse files
Shen-wbShen-wb
committed
Update 2.read-a-drivers-license.html
1 parent d5b737f commit 1d63c8c

1 file changed

Lines changed: 76 additions & 47 deletions

File tree

‎4.use-case/2.read-a-drivers-license.html‎

Lines changed: 76 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,25 @@
1212

1313
<body>
1414
<script>
15-
if(location.protocol === "file:") {
15+
if (location.protocol === "file:") {
1616
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/".`;
1717
console.warn(message);
1818
alert(message);
1919
}
2020
</script>
21-
21+
2222
<span id="hintMSG" class="hintMSG">Aim at the barcode on the driver's license.</span>
2323
<h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAgain' hidden onclick="backToHome()">Retry</a></h1>
2424
<div id="message_box" class="message_box">
25-
<em class="message_box_icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32"><path d="M544 789.333333h105.173333a10.666667 10.666667 0 0 0 10.666667-10.666666v-0.362667l-3.232-94.304a32 32 0 0 1 14.293333-27.765333C750.933333 603.189333 800 513.792 800 416c0-159.061333-128.938667-288-288-288S224 256.938667 224 416c0 97.813333 49.098667 187.232 129.141333 240.266667a32 32 0 0 1 14.314667 25.578666l3.338667 97.184a10.666667 10.666667 0 0 0 10.666666 10.304H480V572.693333l-76.64-81.429333a32 32 0 0 1 46.613333-43.861333l63.36 67.328 72.693334-68.661334a32 32 0 0 1 43.946666 46.528L544 573.792V789.333333z m320-373.333333a351.530667 351.530667 0 0 1-142.826667 283.146667l2.634667 76.96A74.666667 74.666667 0 0 1 649.173333 853.333333h-267.733333a74.666667 74.666667 0 0 1-74.624-72.106666l-2.784-81.194667A351.541333 351.541333 0 0 1 160 416C160 221.6 317.6 64 512 64s352 157.6 352 352zM416 960a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64H416z" p-id="3666" fill="#909399"></path></svg></em>
25+
<em class="message_box_icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32">
26+
<path d="M544 789.333333h105.173333a10.666667 10.666667 0 0 0 10.666667-10.666666v-0.362667l-3.232-94.304a32 32 0 0 1 14.293333-27.765333C750.933333 603.189333 800 513.792 800 416c0-159.061333-128.938667-288-288-288S224 256.938667 224 416c0 97.813333 49.098667 187.232 129.141333 240.266667a32 32 0 0 1 14.314667 25.578666l3.338667 97.184a10.666667 10.666667 0 0 0 10.666666 10.304H480V572.693333l-76.64-81.429333a32 32 0 0 1 46.613333-43.861333l63.36 67.328 72.693334-68.661334a32 32 0 0 1 43.946666 46.528L544 573.792V789.333333z m320-373.333333a351.530667 351.530667 0 0 1-142.826667 283.146667l2.634667 76.96A74.666667 74.666667 0 0 1 649.173333 853.333333h-267.733333a74.666667 74.666667 0 0 1-74.624-72.106666l-2.784-81.194667A351.541333 351.541333 0 0 1 160 416C160 221.6 317.6 64 512 64s352 157.6 352 352zM416 960a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64H416z" p-id="3666" fill="#909399"></path>
27+
</svg></em>
2628
<div class="message_box_container">
2729
<span class="message_box_title">Can't get scanning result for a long time?</span>
2830
<p class="message_box_content">After setting the <span class="api_highlight">singleFrameMode</span> as true, you can open the camera to shoot (mobile device) or choose from local to get a high-definition picture for recognition. <a href="javascript:void(0)" id="confirm_btn">Have a try</a></p>
29-
<em id="close_btn" class="message_box_closebtn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="10" height="10"><path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#c0c4cc"></path></svg></em>
31+
<em id="close_btn" class="message_box_closebtn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="10" height="10">
32+
<path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#c0c4cc"></path>
33+
</svg></em>
3034
</div>
3135
</div>
3236
<div id="UIElement" class="UIElement">
@@ -41,11 +45,15 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
4145
</div>
4246
</div>
4347
<div id="resultAlert" class="resultAlert" hidden>
44-
<div class="resultAlert_title">Results: <em id="resultAlert_btn" class="message_box_closebtn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="16" height="16"><path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#ffffff"></path></svg></em></div>
48+
<div class="resultAlert_title">Results: <em id="resultAlert_btn" class="message_box_closebtn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="16" height="16">
49+
<path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#ffffff"></path>
50+
</svg></em></div>
4551
<div id="resultAlert_content" class="resultAlert_content"></div>
4652
</div>
4753
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.33/dist/dbr.js"></script>
48-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@1.1.0/dist/dcp.js"></script>
54+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.32/dist/core.js"></script>
55+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/dcp.js"></script>
4957
<script>
5058
/** LICENSE ALERT - README
5159
* To use the library, you need to first specify a license key using the API "license" as shown below.
@@ -70,16 +78,21 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
7078
let pScanner = null;
7179
// parser for parsing code
7280
let pParser = null;
73-
(async() => {
81+
let oriParseInfo = {};
82+
(async () => {
7483
//Load the library on page load to speed things up.
7584
try {
7685
await Dynamsoft.DBR.BarcodeScanner.loadWasm();
86+
Dynamsoft.Core.CoreModule.loadWasm(["DCP"]);
87+
Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID");
88+
Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID_WITH_MAG_STRIPE");
89+
Dynamsoft.DCP.CodeParserModule.loadSpec("SOUTH_AFRICA_DL");
7790
} catch (ex) {
7891
let errMsg;
7992
if (ex.message?.includes("network connection error")) {
8093
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.";
8194
} else {
82-
errMsg = ex.message||ex;
95+
errMsg = ex.message || ex;
8396
}
8497
console.error(errMsg);
8598
alert(errMsg);
@@ -161,7 +174,7 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
161174
if (ex.message?.includes("network connection error")) {
162175
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.";
163176
} else {
164-
errMsg = ex.message||ex;
177+
errMsg = ex.message || ex;
165178
}
166179
console.error(errMsg);
167180
alert(errMsg);
@@ -178,19 +191,19 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
178191
async function extractResultAlert(bytesToParse) {
179192
try {
180193
let parser = await (pParser = pParser || Dynamsoft.DCP.CodeParser.createInstance());
181-
await parser.setCodeFormat(Dynamsoft.DCP.EnumCodeFormat.CF_AUTO);
182194

183-
let parsedDLInfo = await parser.parseData(bytesToParse);
195+
let parsedDLInfo = await parser.parse(bytesToParse);
196+
parsedDLInfo = JSON.parse(parsedDLInfo.jsonString);
184197
let resultShowNode = document.createElement("p");
185-
let oriParseInfo;
186-
if(parsedDLInfo.resultInfo && parsedDLInfo.resultInfo.AAMVADLInfo) {
187-
oriParseInfo = {...parsedDLInfo.basicPersonalInfo, ...parsedDLInfo.resultInfo, ...parsedDLInfo.resultInfo.AAMVADLInfo};
188-
delete oriParseInfo.AAMVADLInfo;
189-
} else {
190-
oriParseInfo = {...parsedDLInfo.basicPersonalInfo, ...parsedDLInfo.resultInfo};
198+
oriParseInfo = {};
199+
for (let info of parsedDLInfo.ResultInfo) {
200+
oriParseInfo[info.FieldName] = info.Value;
201+
if (info.ChildFields) {
202+
wrapResultObject(info.ChildFields);
203+
}
191204
}
192205
for (let o in oriParseInfo) {
193-
if(oriParseInfo[o]) {
206+
if (oriParseInfo[o]) {
194207
resultShowNode.appendChild(createNode("span", o));
195208
resultShowNode.appendChild(createNode("br"));
196209
resultShowNode.appendChild(createNode("strong", oriParseInfo[o]));
@@ -203,11 +216,23 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
203216
document.getElementById('resultAlert_content').appendChild(resultShowNode);
204217
document.getElementById('resultAlert').hidden = false;
205218
document.addEventListener("mousedown", clickToHide);
206-
} catch(ex) {
219+
} catch (ex) {
207220
alert(ex.message);
208221
}
209222
}
210223

224+
function wrapResultObject(childFields) {
225+
for (let childField of childFields) {
226+
for (let field of childField) {
227+
if (["dataElementSeparator", "segmentTerminator",].includes(field.FieldName)) continue;
228+
oriParseInfo[field.FieldName] = field.Value;
229+
if (field.ChildFields) {
230+
wrapResultObject(field.ChildFields);
231+
}
232+
}
233+
}
234+
}
235+
211236
function clickToHide(e) {
212237
if (e.target === document.body || e.target.id === "hintMSG") {
213238
closeResultAlert();
@@ -232,7 +257,7 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
232257
margin: 0;
233258
padding: 0;
234259
}
235-
260+
236261
body {
237262
display: flex;
238263
flex-direction: column;
@@ -243,33 +268,33 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
243268
height: 100vh;
244269
margin: 0;
245270
}
246-
271+
247272
.hintMSG {
248273
position: absolute;
249274
font-size: 1rem;
250275
color: #fe8e14;
251276
top: 1vh;
252277
}
253-
278+
254279
h1 {
255280
font-size: 1.5em;
256281
}
257-
282+
258283
a {
259284
color: #fe8d14;
260285
}
261-
286+
262287
a:hover {
263288
color: #fe8d14a1;
264289
}
265-
290+
266291
.btn-show-scanner {
267292
width: 100px;
268293
height: 100px;
269294
fill: #aaa;
270295
cursor: pointer;
271296
}
272-
297+
273298
.UIElement {
274299
display: flex;
275300
flex-direction: row;
@@ -279,31 +304,31 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
279304
height: 60vh;
280305
margin: 0;
281306
}
282-
307+
283308
.UIElement button {
284309
width: 50%;
285310
margin: 2vmin;
286311
padding: 2vmin;
287312
font-size: xx-large;
288313
}
289-
314+
290315
.UIElement img {
291316
height: 15vmin;
292317
float: left;
293318
margin: 15vmin;
294319
cursor: pointer;
295320
}
296-
321+
297322
.UIElement img:hover {
298323
background-color: #fe8d14a1;
299324
}
300-
325+
301326
.show {
302327
height: 60vh;
303328
width: 50vw;
304329
top: 0;
305330
}
306-
331+
307332
.dce-bg-camera {
308333
position: absolute;
309334
left: 0;
@@ -315,14 +340,14 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
315340
height: 40%;
316341
fill: #aaa;
317342
}
318-
343+
319344
.div-ui-container,
320345
.dce-video-container {
321346
position: relative;
322347
width: 100%;
323348
height: 100%;
324349
}
325-
350+
326351
.resultAlert {
327352
position: fixed;
328353
height: 70vh;
@@ -333,7 +358,7 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
333358
background: #222222;
334359
margin-top: 30px;
335360
}
336-
361+
337362
.resultAlert_title {
338363
position: fixed;
339364
width: 50vw;
@@ -344,29 +369,30 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
344369
padding-left: 10px;
345370
box-sizing: border-box;
346371
}
347-
372+
348373
.resultAlert_title i {
349374
top: 7px;
350375
}
351-
376+
352377
.resultAlert_content {
353378
height: calc(70vh - 30px);
354379
overflow-y: auto;
355380
margin-top: 30px;
356381
padding: 5px;
357382
box-sizing: border-box;
358383
}
359-
384+
360385
.resultAlert p {
361386
padding: 5px;
362387
margin: 0;
363388
}
364-
389+
365390
strong {
366391
color: rgb(254, 142, 20);
367392
}
393+
368394
/* MessageBox */
369-
395+
370396
.message_box {
371397
display: none;
372398
align-items: center;
@@ -381,52 +407,55 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
381407
overflow: hidden;
382408
transition: opacity .2s;
383409
}
410+
384411
/* Small devices */
385-
412+
386413
@media only screen and (max-width: 1000px) {
387414
.message_box {
388415
width: 90vw;
389416
}
417+
390418
.UIElement,
391419
.show {
392420
width: 80vw;
393421
}
422+
394423
.resultAlert,
395424
.resultAlert_title {
396425
width: 80vw;
397426
}
398427
}
399-
428+
400429
.message_box_icon {
401430
font-size: 28px;
402431
width: 28px;
403432
line-height: 0;
404433
}
405-
434+
406435
.message_box_container {
407436
display: table-cell;
408437
padding: 0 8px;
409438
}
410-
439+
411440
.message_box_title {
412441
font-weight: 700;
413442
font-size: 14px;
414443
line-height: 18px;
415444
}
416-
445+
417446
.message_box_content {
418447
font-size: 13px;
419448
margin: 5px 0 0;
420449
line-height: 20px;
421450
}
422-
451+
423452
.api_highlight {
424453
font-weight: 700;
425454
background-color: #ddd;
426455
border-radius: 4px;
427456
padding: 2px;
428457
}
429-
458+
430459
.message_box_closebtn {
431460
position: absolute;
432461
top: 12px;
@@ -436,4 +465,4 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
436465
}
437466
</style>
438467

439-
</html>
468+
</html>

0 commit comments

Comments
 (0)