samples/hello-world.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamsoft MRZ Scanner - Hello World</title>
    <script src="../dist/mrz-scanner.bundle.js"></script>
    <!-- To use via the CDN: -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-mrz-scanner@2.0.0/dist/mrz-scanner.bundle.js"></script> -->
  </head>

  <body>
    <h1 style="font-size: large">Dynamsoft MRZ Scanner</h1>
    <div
      id="results"
      style="display: flex; flex-direction: column; width: 100%; height: 100%; word-wrap: break-word"
    ></div>

    <script>
      const resultContainer = document.querySelector("#results");

      // Initialize the Dynamsoft MRZ Scanner
      const mrzscanner = new Dynamsoft.MRZScanner({
        license: "YOUR_LICENSE_KEY_HERE",
      });

      (async () => {
        // Launch the scanner and wait for the result
        const result = await mrzscanner.launch();
        console.log(result);

        if (result?.data) {
          resultContainer.innerHTML = ""; // Clear placeholder content

          if (result.originalImageResult?.toCanvas) {
            const canvas = result.originalImageResult?.toCanvas();

            canvas.style.objectFit = "contain";
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            resultContainer.appendChild(canvas);
          }

          let resultHTML = ``;
          Object.entries(result.data).forEach(([key, value]) => {
            const label = Dynamsoft.MRZDataLabel[key];

            const container = document.createElement("div");
            container.className = "mrz-result-container";
            const labelContainer = document.createElement("div");
            const valueContainer = document.createElement("div");

            labelContainer.textContent = label;
            valueContainer.textContent = `${JSON.stringify(value)}`;

            container.appendChild(labelContainer);
            container.appendChild(valueContainer);
            resultContainer.appendChild(container);
          });
        } else {
          resultContainer.innerHTML = "<p>No MRZ scanned. Please try again.</p>";
        }
      })();
    </script>
  </body>
  <style>
    .mrz-result-container {
      display: flex;
      flex-direction: column;
      padding-bottom: 1rem;
    }

    .mrz-result-container:first-of-type {
      padding-top: 1rem;
    }
  </style>
</html>