Making Web Passport MRZ Reader and Scanner in HTML5 and JavaScript
Tags: javascript, mrz, webdev, passport
Published: 2022-02-17 02:21:03

Previously, I wrote an [article](https://www.dynamsoft.com/codepool/passport-mrz-recognition-cpp-windows-linux.html) 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](https://www.npmjs.com/package/dynamsoft-label-recognizer) 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.

```html
<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:

```bash
npm i dynamsoft-label-recognizer
```

## SDK Activation
To make the SDK work, you need to:
1. Apply for a [30-day FREE Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=dlr).
    
    ![license key application for Dynamsoft Label Recognizer](https://www.dynamsoft.com/codepool/img/2022/02/dynamsoft-label-recognizer-trial-license-key.png)
    
2. Set the license key in JavaScript code:
    
    ```javascript
    Dynamsoft.DLR.LabelRecognizer.initLicense("LICENSE-KEY");
    ```

## API Reference
- [https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/?ver=latest](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/api-reference/?ver=latest)
- [https://www.dynamsoft.com/label-recognition/programming/javascript/api-reference/?ver=latest](https://www.dynamsoft.com/label-recognition/programming/javascript/api-reference/?ver=latest)

## 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:
    
    ```javascript
    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.

    ![MRZ model file](https://www.dynamsoft.com/codepool/img/2022/02/mrz-model-file.png)


    There are several scenario-specific [OCR templates](https://www.dynamsoft.com/label-recognition/programming/javascript/api-reference/settings.html?ver=latest) optional. In addition to `passportMRZ`, you can also set `number`, `numberLetter`, `letter`, or `vin`.

2. Create a button to load passport images:
    
    ```html
    <input type="file" id="file" accept="image/*" />
    ```

3. Trigger the button change event to recognize MRZ from passport images:
    
    ```javascript
    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:
    
    ```javascript
    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](https://www.dynamsoft.com/codepool/img/2022/02/google-mrz-images.png)

The MRZ recognition results:

![web passport mrz reader](https://www.dynamsoft.com/codepool/img/2022/02/web-passport-mrz-reader.png)

## 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:

```html
<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:

```html
<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:

```javascript
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.

![web passport MRZ scanner](https://www.dynamsoft.com/codepool/img/2022/02/passport-javascript-mrz-scanner.png)


## Source Code
[https://github.com/yushulx/javascript-passport-mrz-scanner](https://github.com/yushulx/javascript-passport-mrz-scanner)