Making Web Passport MRZ Reader and Scanner in HTML5 and JavaScript

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.

This article is Part 3 in a 8-Part Series.

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.11/dist/dlr.js in your HTML file.

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.11/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.

    license key application for Dynamsoft Label Recognizer

  2. Set the license key in JavaScript code:

     Dynamsoft.DLR.LabelRecognizer.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==");

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: "MRZ"
     }).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. You can register a callback function to be notified when the file is loaded:

     Dynamsoft.DLR.LabelRecognizer.onResourcesLoaded = (resourcesPath) => {
         console.log(resourcesPath + " is loaded.")
         document.getElementById('loading-status').hidden = true;
     };

    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 + "<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;
 }

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

Passport MRZ images

The MRZ recognition results:

web passport mrz reader

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.11/dist/dlr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.js"></script>

As the Dynamsoft Label Recognizer is initialized and the resource file is loaded, we create the camera enhancer object:

<div id="videoview">
    <div class="dce-video-container" id="videoContainer"></div>
    <canvas id="overlay"></canvas>
</div>
<script>
Dynamsoft.DLR.LabelRecognizer.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==");

(async () => {
    Dynamsoft.DLR.LabelRecognizer.onResourcesLoadStarted = (resourcePath) => {
    };
    Dynamsoft.DLR.LabelRecognizer.onResourcesLoaded = (resourcePath) => {
        document.getElementById('loading-status').hidden = true;
    };

    cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
    recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance();
    await cameraEnhancer.setUIElement(document.getElementById('videoContainer'));
    await recognizer.setImageSource(cameraEnhancer, {resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem});
    await recognizer.updateRuntimeSettingsFromString("MRZ");

    let cameras = await cameraEnhancer.getAllCameras();
    listCameras(cameras);
    await openCamera();

    recognizer.onImageRead = results => {
        clearOverlay();
        lines = getResults(results);
        if (lines) div.innerHTML = extractMRZInfo(lines[0], lines[1]);
        else div.innerHTML = "";
        
        for (let result of results) {
            for (let lineResult of result.lineResults) {
                drawOverlay(lineResult.location.points, "");
            }
        }
    };
    cameraEnhancer.on("played", playCallBackInfo => {
        updateResolution();
    });
    await recognizer.startScanning(true);
})();    
</script>

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.

web passport MRZ scanner

Source Code

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