cft
Become a CreatorSign inGet Started

Making Web Passport MRZ Reader and Scanner in HTML5 and JavaScript

The article shares how to use Dynamsoft Camera Enhancer and Label Recognizer to create a web passport MRZ reader and scanner app using HTML5 and JavaScript.


user

Xiao Ling

4 months ago | 8 min read
Follow

Previously, I wrote an article demonstrating how to implement desktop passport MRZ recognition application using C++. Recently, Dynamsoft compiled the C++ OCR SDK to a web assembly module. It aims to help web developers to build web passport MRZ scanner applications using HTML5 and JavaScript. This article shows how to build web applications to read MRZ information from passport images and scan passport MRZ information with a camera in real time.

SDK Installation

The JavaScript OCR SDK has been published to npmjs.com.

To use the SDK, include https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.0/dist/dlr.js in your HTML file.

<script

src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.0/dist/dlr.js"

></script>

For offline deployment, you can download the SDK via npm command in your terminal:

npm i dynamsoft-label-recognizer

SDK Activation

To make the SDK work, you need to:

  1. Apply for a 30-day FREE Trial License.

2. Set the license key in JavaScript code:

Dynamsoft.DLR.LabelRecognizer.initLicense("LICENSE-KEY");

API Reference

Web Passport MRZ Reader

Let’s get started with static passport images.

Here are the steps to create a web passport MRZ reader:

  1. Initialize Dynamsoft Label Recognizer:

var

recognizer =

null

;

Dynamsoft.DLR.LabelRecognizer.createInstance({

runtimeSettings: "passportMRZ"

}).then(

function

(obj) {

console.log("recognizer created");

recognizer = obj;

});

For the first time you create the instance of the SDK, it may take a long time to load the MRZ.data file, which is a model file used to recognize passport MRZ.

There are several scenario-specific OCR templates optional. In addition to passportMRZ, you can also set number, numberLetter, letter, or vin.

2. Create a button to load passport images:

<input

type="file" id="file" accept="image/*"

/>

3. Trigger the button change event to recognize MRZ from passport images:

document.getElementById("file").addEventListener("change",

function

() {

let

file =

this

.files[0];

if

(recognizer) {

recognizer.recognize(file).then(

function

(results) {

for

(

let

result

of

results) {

if

(result.lineResults.length == 2) {

let

lines = result.lineResults;

let

line1 = lines[0].text;

let

line2 = lines[1].text;

document.getElementById('result').innerHTML = extractMRZInfo(line1, line2);

}

}

});

}

});

4. Finally, extract the MRZ information from a parser:

function

extractMRZInfo(line1, line2) {

// https://en.wikipedia.org/wiki/Machine-readable_passport

let

result = "";

// Type

let

tmp = "Type: ";

tmp += line1[0];

result += tmp + "/\n/g";

// Issuing country

tmp = "Issuing country: ";

tmp += line1.substring(2, 5);

result += tmp + "/\n/g";

// Surname

let

index = 5;

tmp = "Surname: ";

for

(; index < 44; index++) {

if

(line1[index] != '<') {

tmp += line1[index];

}

else

{

break

;

}

}

result += tmp + "/\n/g";

// Given names

tmp = "Given Names: ";

index += 2;

for

(; index < 44; index++) {

if

(line1[index] != '<') {

tmp += line1[index];

}

else

{

tmp += ' ';

}

}

result += tmp + "/\n/g";

// Passport number

tmp = "Passport number: ";

index = 0;

for

(; index < 9; index++) {

if

(line2[index] != '<') {

tmp += line2[index];

}

else

{

break

;

}

}

result += tmp + "/\n/g";

// Nationality

tmp = "Nationality: ";

tmp += line2.substring(10, 13);

result += tmp + "/\n/g";

// Date of birth

tmp = line2.substring(13, 19);

tmp = tmp.substring(0, 2) +

'/' +

tmp.substring(2, 4) +

'/' +

tmp.substring(4, 6);

tmp = "Date of birth (YYMMDD): " + tmp;

result += tmp + "/\n/g";

// Sex

tmp = "Sex: ";

tmp += line2[20];

result += tmp + "/\n/g";

// Expiration date of passport

tmp = line2.substring(21, 27);

tmp = tmp.substring(0, 2) +

'/' +

tmp.substring(2, 4) +

'/' +

tmp.substring(4, 6);

tmp = "Expiration date of passport (YYMMDD): " + tmp;

result += tmp + "/\n/g";

// Personal number

if

(line2[28] != '<') {

tmp = "Personal number: ";

for

(index = 28; index < 42; index++) {

if

(line2[index] != '<') {

tmp += line2[index];

}

else

{

break

;

}

}

result += tmp + "/\n/g";

}

return

result;

}

We can find some MRZ images from Google to test the simple web MRZ reader:

The MRZ recognition results:

Web Passport MRZ Scanner

Now, we can combine Dynamsoft Camera Enhancer and Dynamsoft Label Recognizer to quickly turn the MRZ reader into a MRZ scanner.

We include the JavaScript camera SDK to the HTML file:

<script

src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.0/dist/dlr.js"

></script>

<script

src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@2.1.0/dist/dce.js"

></script>

As the Dynamsoft Label Recognizer is initialized, we create the camera enhancer object:

<div

id="enhancerUIContainer" style="height: 100vh;"

></div>

<script>

Dynamsoft.DLR.LabelRecognizer.createInstance({

runtimeSettings: "passportMRZ"

}).then(

function

(obj) {

console.log("recognizer created");

recognizer = obj;

(

async

() => {

enhancer =

await

Dynamsoft.DCE.CameraEnhancer.createInstance();

document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());

await

enhancer.open(

true

);

scanMRZ();

})();

});

</script>

Then continuously call the scanMRZ() function, in which we get the camera frame and call the MRZ recognition API:

function

scanMRZ() {

let

frame = enhancer.getFrame();

if

(recognizer) {

recognizer.recognize(frame.canvas).then(

function

(results) {

div.innerHTML = '';

for

(

let

result

of

results) {

if

(result.lineResults.length == 2) {

let

lines = result.lineResults;

let

line1 = lines[0].text;

let

line2 = lines[1].text;

console.log(line1);

console.log(line2);

div.innerHTML = extractMRZInfo(line1, line2);

}

}

scanMRZ();

});

}

}

With a few lines of HTML5 and JavaScript code, a simple web MRZ scanner is done. We can now scan passport from desktop and mobile web browsers in real time.

Source Code

https://github.com/yushulx/javascript-passport-mrz-scanner



Upvote


user
Created by

Xiao Ling

Follow

people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles