sampleForDlr2AndDcp2.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MRZ Read And Parse</title>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/dcp.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.3.5/dist/dce.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@2.2.31/dist/dlr.js"></script>
</head>

<body>
  <h1 style="font-size: 1.5em;">Recognize MRZ from a Camera</h1>
  <button id="btn-open-recognize">Open MRZ Recognizer</button>
  <input type="file" id="ipt-file">
  <div id="model-loading" style="margin-top: 15px;"></div>
  <div id="div-ui-container" style="margin-top: 15px;height: 50vh;"></div>
  <div id="mrz-results" style="margin-top: 15px;"></div>
  <script>
    let cameraEnhancer = null;
    let recognizer = null;
    let recognizerForImage = null;
    let parser = null;
    let promiseDLRReady;
    let mrzResult = document.querySelector("#mrz-results");
    let iptFile = document.querySelector("#ipt-file");
    let willShowFieldName = [
      "issuingState",
      "name",
      "documentNumber",
      "nationality",
      "dateOfBirth",
      "sex",
      "dateOfExpiry"
    ];

    /** LICENSE ALERT - README 
     * To use the library, you need to first specify a license key using the API "license" as shown below.
     */
    Dynamsoft.DLR.LabelRecognizer.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
    /** 
     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dlr&package=js to get your own trial license good for 30 days. 
     * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
     * For more information, see https://www.dynamsoft.com/label-recognition/programming/javascript/user-guide.html?ver=latest#specify-the-license or contact support@dynamsoft.com.
     * LICENSE ALERT - THE END 
     */

    // For DCPJS2
    Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

    let initDcp = (async () => {
      parser = await Dynamsoft.DCP.CodeParser.createInstance();
      await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD1_ID");
    })();

    async function parseMrzAndUpdateDom(text) {
      console.log("text: ", text);
      let parsedResults = await parser.parse(text);
      console.log("parsedResults: ", parsedResults);
      let resultInfo = JSON.parse(parsedResults.jsonString).ResultInfo;
      console.log(resultInfo);
      for (let fieldName of willShowFieldName) {
        let infoDiv = document.createElement('div');
        infoDiv.style.marginTop = "10px";
        if (fieldName === "dateOfBirth") {
          let birthYear = parsedResults.getFieldValue("birthYear");
          if (parseInt(birthYear) > new Date().getFullYear() % 100) {
            birthYear = "19" + birthYear;
          } else {
            birthYear = "20" + birthYear;
          }
          let birthMonth = parsedResults.getFieldValue("birthMonth");
          let birthDay = parsedResults.getFieldValue("birthDay");
          infoDiv.innerText = `${fieldName} : ${birthYear}-${birthMonth}-${birthDay}`;
        } else if (fieldName === "dateOfExpiry") {
          let expiryYear = "20" + parsedResults.getFieldValue("expiryYear");
          let expiryMonth = parsedResults.getFieldValue("expiryMonth");
          let expiryDay = parsedResults.getFieldValue("expiryDay");
          infoDiv.innerText = `${fieldName} : ${expiryYear}-${expiryMonth}-${expiryDay}`;
        } else if(fieldName === "sex") {
          let sex = parsedResults.getFieldValue(fieldName);
          if(!["female", "male"].includes(sex)) continue;
          infoDiv.innerText = fieldName + " : " + parsedResults.getFieldValue(fieldName);
        } else {
          infoDiv.innerText = fieldName + " : " + parsedResults.getFieldValue(fieldName);
        }
        mrzResult.appendChild(infoDiv);
      }
    }

    document.getElementById('btn-open-recognize').addEventListener('click', async () => {
      try {
        await (promiseDLRReady = promiseDLRReady || (async () => {
          Dynamsoft.DLR.LabelRecognizer.onResourcesLoadProgress = (resourcePath, progress) => {
            // In this event handler, you can display the loading progress of the model file.
            document.querySelector('#model-loading').innerHTML = "Model Loading..." + " " + (progress.loaded / progress.total).toFixed(2) * 100 + "%";
          }
          Dynamsoft.DLR.LabelRecognizer.onResourcesLoaded = (resourcePath) => {
            // In this event handler, you can close the visual cue if it was displayed.
            document.querySelector('#model-loading').innerHTML = "";
          };
          cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
          cameraEnhancer.on("cameraClose", () => {
            mrzResult.innerText = '';
          });
          recognizer = await Dynamsoft.DLR.LabelRecognizer.createInstance();
          await recognizer.setImageSource(cameraEnhancer, { resultsHighlightBaseShapes: Dynamsoft.DCE.DrawingItem });
          await recognizer.updateRuntimeSettingsFromString("video-mrz");

          await initDcp;

          await document.getElementById('div-ui-container').appendChild(cameraEnhancer.getUIElement());

          // Callback to MRZ recognizing result
          recognizer.onMRZRead = async (text, results) => {
            mrzResult.innerText = '';
            parseMrzAndUpdateDom(text);
          }
        })());
        await recognizer.startScanning(true);
      } catch (ex) {
        let errMsg;
        if (ex.message.includes("network connection error")) {
          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.";
        } else {
          errMsg = ex.message || ex;
        }
        console.error(errMsg);
        alert(errMsg);
      }
    })

    iptFile.addEventListener("change", async (e) => {
      await initDcp;
      if (!recognizerForImage) {
        recognizerForImage = await Dynamsoft.DLR.LabelRecognizer.createInstance();
        await recognizerForImage.updateRuntimeSettingsFromString("mrz");
      }
      let results = await recognizerForImage.recognize(e.target.files[0]);
      if(results.length) {
        let text = "";
        for (let result of results) {
          for (let lineResult of result.lineResults) {
            text += lineResult.text;
          }
        }
        parseMrzAndUpdateDom(text);
      } else {
        mrzResult.innerText = "mrz string not found.";
      }
    })
  </script>
</body>

</html>