JSFiddle - React, Tailwind, and code Playground

by DynamsoftTeam

HTML

<!DOCTYPE html>
<html>
<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dlr.bundle.js"></script>
  <div id="cameraViewContainer" style="width: 100%; height: 60vh"></div>
  <textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
  <script>
    Dynamsoft.License.LicenseManager.initLicense(
      "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
    );
    (async () => {
      let router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();

      let view = await Dynamsoft.DCE.CameraView.createInstance();
      let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
      document.querySelector("#cameraViewContainer").append(view.getUIElement());
      router.setInput(cameraEnhancer);

      const resultsContainer = document.querySelector("#results");
      router.addResultReceiver({
        onRecognizedTextLinesReceived: (result) => {
          if (result.textLineResultItems.length > 0) {
            resultsContainer.textContent = "";
            for (let item of result.textLineResultItems) {
              resultsContainer.textContent += `${item.text}\n`;
            }
          }
        },
      });
      let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
      filter.enableResultCrossVerification(
        Dynamsoft.Core.EnumCapturedResultItemType.CRIT_TEXT_LINE, true
      );
      filter.enableResultDeduplication(
        Dynamsoft.Core.EnumCapturedResultItemType.CRIT_TEXT_LINE, true
      );
      await router.addResultFilter(filter);
      
      await cameraEnhancer.open();
      await router.startCapturing("passport-mrz");
    })();
  </script>
</body>
</html>