Making Web Passport MRZ Reader and Scanner in HTML5 and JavaScript

SDK Installation

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

SDK Activation

  1. Apply for a 30-day FREE Trial License.
Dynamsoft.DLR.LabelRecognizer.initLicense("LICENSE-KEY");

API Reference

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;
});
<input type="file" id="file" accept="image/*" />
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);
}
}
});
}
});
function extractMRZInfo(line1, line2) {
// https://en.wikipedia.org/wiki/Machine-readable_passport
let result = "";
// Type
let tmp = "Type: ";
tmp += line1[0];
result += tmp + "<br>";

// Issuing country
tmp = "Issuing country: ";
tmp += line1.substring(2, 5);
result += tmp + "<br>";

// Surname
let index = 5;
tmp = "Surname: ";
for (; index < 44; index++) {
if (line1[index] != '<') {
tmp += line1[index];
} else {
break;
}
}
result += tmp + "<br>";

// Given names
tmp = "Given Names: ";
index += 2;
for (; index < 44; index++) {
if (line1[index] != '<') {
tmp += line1[index];
} else {
tmp += ' ';
}
}
result += tmp + "<br>";

// Passport number
tmp = "Passport number: ";
index = 0;
for (; index < 9; index++) {
if (line2[index] != '<') {
tmp += line2[index];
} else {
break;
}
}
result += tmp + "<br>";

// Nationality
tmp = "Nationality: ";
tmp += line2.substring(10, 13);
result += tmp + "<br>";

// 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 + "<br>";

// Sex
tmp = "Sex: ";
tmp += line2[20];
result += tmp + "<br>";

// 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 + "<br>";

// Personal number
if (line2[28] != '<') {
tmp = "Personal number: ";
for (index = 28; index < 42; index++) {
if (line2[index] != '<') {
tmp += line2[index];
} else {
break;
}
}
result += tmp + "<br>";
}

return result;
}

Web Passport MRZ Scanner

<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>
<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>
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();
});
}
}

Source Code

--

--

--

Manager of Dynamsoft Open Source Projects | Tech Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover

More from Medium

How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application

What is the document object model (DOM)

Arduino Coding In js client agent

Picture of arduino

Facial recognition with face-api.js and react