diff --git a/use-case/read-a-drivers-license/index.html b/use-case/read-a-drivers-license/index.html
index d09067c9..60011eeb 100644
--- a/use-case/read-a-drivers-license/index.html
+++ b/use-case/read-a-drivers-license/index.html
@@ -1,299 +1,319 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <meta name="description" content="Read the PDF417 barcode on Driver's Licenses instantly with this barcode reader." />
-  <meta name="keywords" content="read driver's license barcode" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license.html" />
-  <title>Dynamsoft Barcode Reader Simple Sample - Read Driver License</title>
-  <link href="style.css" rel="stylesheet" />
-</head>
-
-<body>
-  <span id="span-tip">Aim at the barcode on the driver's license.</span>
-  <h1>Read A Driver's License</h1>
-  <div id="div-message-container">
-    <em class="em-icon"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32">
-        <path d="M544 789.333333h105.173333a10.666667 10.666667 0 0 0 10.666667-10.666666v-0.362667l-3.232-94.304a32 32 0 0 1 14.293333-27.765333C750.933333 603.189333 800 513.792 800 416c0-159.061333-128.938667-288-288-288S224 256.938667 224 416c0 97.813333 49.098667 187.232 129.141333 240.266667a32 32 0 0 1 14.314667 25.578666l3.338667 97.184a10.666667 10.666667 0 0 0 10.666666 10.304H480V572.693333l-76.64-81.429333a32 32 0 0 1 46.613333-43.861333l63.36 67.328 72.693334-68.661334a32 32 0 0 1 43.946666 46.528L544 573.792V789.333333z m320-373.333333a351.530667 351.530667 0 0 1-142.826667 283.146667l2.634667 76.96A74.666667 74.666667 0 0 1 649.173333 853.333333h-267.733333a74.666667 74.666667 0 0 1-74.624-72.106666l-2.784-81.194667A351.541333 351.541333 0 0 1 160 416C160 221.6 317.6 64 512 64s352 157.6 352 352zM416 960a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64H416z" p-id="3666" fill="#909399"></path>
-      </svg>
-    </em>
-    <div class="div-message-content">
-      <span>Can't get scanning result for a long time?</span>
-      <p>
-        After setting the
-        <span class="api_highlight">singleFrameMode</span> as true, you can
-        open the camera to shoot (mobile device) or choose from local to get a
-        high-definition picture for recognition.
-        <a href="javascript:void(0)" id="a-switch">Have a try</a>
-      </p>
-      <em class="em-close"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="10" height="10">
-          <path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#c0c4cc"></path>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Instantly Read PDF417 barcodes on Driver Licenses with Dynamsoft Barcode Reader."
+    />
+    <meta name="keywords" content="read driver license barcode" />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html" />
+    <title>Dynamsoft Barcode Reader Sample - Read a Driver's License</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <span id="span-tip">Aim at the barcode on the driver's license.</span>
+    <h1>Read a Driver's License</h1>
+    <div id="message-container">
+      <em class="message-icon"
+        ><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32">
+          <path
+            d="M544 789.333333h105.173333a10.666667 10.666667 0 0 0 10.666667-10.666666v-0.362667l-3.232-94.304a32 32 0 0 1 14.293333-27.765333C750.933333 603.189333 800 513.792 800 416c0-159.061333-128.938667-288-288-288S224 256.938667 224 416c0 97.813333 49.098667 187.232 129.141333 240.266667a32 32 0 0 1 14.314667 25.578666l3.338667 97.184a10.666667 10.666667 0 0 0 10.666666 10.304H480V572.693333l-76.64-81.429333a32 32 0 0 1 46.613333-43.861333l63.36 67.328 72.693334-68.661334a32 32 0 0 1 43.946666 46.528L544 573.792V789.333333z m320-373.333333a351.530667 351.530667 0 0 1-142.826667 283.146667l2.634667 76.96A74.666667 74.666667 0 0 1 649.173333 853.333333h-267.733333a74.666667 74.666667 0 0 1-74.624-72.106666l-2.784-81.194667A351.541333 351.541333 0 0 1 160 416C160 221.6 317.6 64 512 64s352 157.6 352 352zM416 960a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64H416z"
+            p-id="3666"
+            fill="#909399"
+          ></path>
         </svg>
       </em>
+      <div class="message-content">
+        <span>Can't get scanning result for a long time?</span>
+        <p>
+          Enable
+          <span class="api_highlight">singleFrameMode</span> to capture high-definition images with your camera (mobbile
+          device) or upload a local image for better recognition.
+          <a href="javascript:void(0)" id="toggle-scan-mode">Give it a try!</a>
+        </p>
+        <em class="close-button"
+          ><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="10" height="10">
+            <path
+              d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z"
+              p-id="4605"
+              fill="#c0c4cc"
+            ></path>
+          </svg>
+        </em>
+      </div>
     </div>
-  </div>
-  <div id="div-main">
-    <svg id="svg-start" viewBox="0 0 2048 1792">
-      <path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z" />
-    </svg>
-    <div id="div-ui-container"></div>
-  </div>
-  <div id="div-result-container">
-    <div class="div-result-header">
-      Results:
-      <em class="em-close" class="message_box_closebtn"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="16" height="16">
-          <path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" p-id="4605" fill="#ffffff"></path>
-        </svg>
-      </em>
+    <div id="main-container">
+      <svg id="svg-start" viewBox="0 0 2048 1792">
+        <path
+          d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"
+        />
+      </svg>
+      <div id="camera-view-container"></div>
     </div>
-    <div class="div-result-body"></div>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
-  <script>
-    /** LICENSE ALERT - README
-     * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
-     */
-
-    Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-    /**
-     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&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/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
-     * LICENSE ALERT - THE END
-     */
-
-    // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-    Dynamsoft.Core.CoreModule.loadWasm(["DBR", "DCP"]);
-    Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID");
-    Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID_WITH_MAG_STRIPE");
-    Dynamsoft.DCP.CodeParserModule.loadSpec("SOUTH_AFRICA_DL");
-
-    const svgStart = document.querySelector("#svg-start");
-    const openImageBtn = document.querySelector("#btn-open-image");
-    const divUIContainer = document.querySelector("#div-ui-container");
-    const divResultContainer = document.querySelector("#div-result-container");
-    // timer for displaying MessageBox
-    let timer;
-    let oriParseInfo = {};
-
-    const init = async () => {
-      const parser = await Dynamsoft.DCP.CodeParser.createInstance();
-
-      // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-      const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-      const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-      divUIContainer.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
-
-      // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-      const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-      cvRouter.setInput(cameraEnhancer);
-
-      // Filter out unchecked and duplicate results.
-      const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-      // Filter out duplicate barcodes within 3 seconds.
-      filter.enableResultDeduplication("barcode", true);
-      await cvRouter.addResultFilter(filter);
-
-      // Define a callback for results.
-      cvRouter.addResultReceiver({
-        // callback in every frame
-        onCapturedResultReceived: (result) => {
-          if (cameraEnhancer.singleFrameMode === "disabled"){ return; }
-          // Report no barcode in singleFrameMode
-          if (!result.items.some(item => item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE)) {
-            document.querySelector(".div-result-body").innerText = "No PDF417 Barcode Found!";
-            divResultContainer.style.display = "block";
-            document.addEventListener("mousedown", clickToHide);
-          }
-        },
-        // callback only when barcode received
-        onDecodedBarcodesReceived: async (result) => {
-          if (!result.barcodeResultItems.length) return;
-
-          Dynamsoft.DCE.Feedback.beep();
-
-          document.querySelector("#div-message-container").style.display = "none";
-          clearTimeout(timer);
-          const success = await extractResultAlert(result.barcodeResultItems[0].bytes);
-          if (success) {
-            cvRouter.stopCapturing();
-          }
-        },
+    <div id="result-container">
+      <div class="result-header">
+        Results:
+        <em class="close-button" class="message_box_closebtn"
+          ><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4604" width="16" height="16">
+            <path
+              d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z"
+              p-id="4605"
+              fill="#ffffff"
+            ></path>
+          </svg>
+        </em>
+      </div>
+      <div class="result-body"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
+    <script>
+      /** LICENSE ALERT - README
+       * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+       */
+
+      Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+
+      /**
+       * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&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/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
+       * LICENSE ALERT - THE END
+       */
+
+      // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
+      Dynamsoft.Core.CoreModule.loadWasm(["DBR", "DCP"]);
+      Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID");
+      Dynamsoft.DCP.CodeParserModule.loadSpec("AAMVA_DL_ID_WITH_MAG_STRIPE");
+      Dynamsoft.DCP.CodeParserModule.loadSpec("SOUTH_AFRICA_DL");
+
+      const svgStart = document.querySelector("#svg-start");
+      const openImageBtn = document.querySelector("#btn-open-image");
+      const cameraViewContainer = document.querySelector("#camera-view-container");
+
+      // Result HTML Elements
+      const resultContainer = document.querySelector("#result-container");
+      const resultBody = document.querySelector(".result-body");
+
+      // Message Box HTML Elements
+      const messageContainer = document.querySelector("#message-container");
+
+      // timer for displaying MessageBox
+      let messageDisplayTimer;
+      let oriParseInfo = {};
+
+      const init = async () => {
+        const parser = await Dynamsoft.DCP.CodeParser.createInstance();
+
+        // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+        const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+        const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+        cameraViewContainer.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
+
+        // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+        const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+        cvRouter.setInput(cameraEnhancer);
+
+        // Filter out unchecked and duplicate results.
+        const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+        // Filter out duplicate barcodes within 3 seconds.
+        filter.enableResultDeduplication("barcode", true);
+        await cvRouter.addResultFilter(filter);
+
+        // Define a callback for results.
+        cvRouter.addResultReceiver({
+          // callback in every frame
+          onCapturedResultReceived: (result) => {
+            if (cameraEnhancer.singleFrameMode === "disabled") {
+              return;
+            }
+            // Report no barcode in singleFrameMode
+            if (!result.items.some((item) => item.type === Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE)) {
+              resultBody.innerText = "No PDF417 Barcode Found!";
+              resultContainer.style.display = "block";
+              document.addEventListener("mousedown", clickToHide);
+            }
+          },
+          // callback only when barcode received
+          onDecodedBarcodesReceived: async (result) => {
+            if (!result.barcodeResultItems.length) return;
+
+            Dynamsoft.DCE.Feedback.beep();
+
+            messageContainer.style.display = "none";
+            clearTimeout(messageDisplayTimer);
+            const success = await extractResultAlert(result.barcodeResultItems[0].bytes);
+            if (success) {
+              cvRouter.stopCapturing();
+            }
+          },
+        });
+
+        let settings = await cvRouter.getSimplifiedSettings("ReadDenseBarcodes");
+        settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_PDF417;
+        await cvRouter.updateSettings("ReadDenseBarcodes", settings);
+
+        return {
+          parser,
+          cameraView,
+          cameraEnhancer,
+          cvRouter,
+        };
+      };
+      const pInit = init();
+
+      // decode video from camera
+      svgStart.addEventListener("click", async () => {
+        document.querySelector("h1").style.display = "none";
+        svgStart.style.display = "none";
+        await switchToVideo();
       });
 
-      let ss = await cvRouter.getSimplifiedSettings("ReadDenseBarcodes");
-      ss.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_PDF417;
-      await cvRouter.updateSettings("ReadDenseBarcodes", ss);
+      document.querySelector("#result-container .close-button").addEventListener("click", closeResultAlert);
 
-      return {
-        parser,
-        cameraView,
-        cameraEnhancer,
-        cvRouter,
-      };
-    };
-    const pInit = init();
-
-    // decode video from camera
-    svgStart.addEventListener("click", async () => {
-      document.querySelector("h1").style.display = "none";
-      svgStart.style.display = "none";
-      await switchToVideo();
-    });
-
-    document.querySelector("#div-result-container .em-close").addEventListener("click", closeResultAlert);
-
-    document.querySelector("#a-switch").addEventListener("click", async () => {
-      document.querySelector("#span-tip").innerHTML =
-        "Click below to select a picture to read. <a href='javascript:void(0)' onclick='backToCameraMode()'>Back to camera mode</a>";
-
-      await switchToSingleFrameMode();
-      document.querySelector("#div-message-container").style.display = "none";
-    });
-
-    document.querySelector(".div-message-content .em-close").addEventListener("click", () => {
-      document.querySelector("#div-message-container").style.display = "none";
-    });
-
-    async function backToCameraMode() {
-      closeResultAlert();
-      document.querySelector("#span-tip").innerText = "Aim at the barcode on the driver's license.";
-
-      await switchToVideo();
-    }
-
-    async function switchToSingleFrameMode() {
-      const { cameraEnhancer, cvRouter } = await pInit;
-      cvRouter.stopCapturing();
-      cameraEnhancer.close();
-      cameraEnhancer.singleFrameMode = "image";
-      await cameraEnhancer.open();
-      await cvRouter.startCapturing("ReadDenseBarcodes");
-    }
-
-    async function switchToVideo() {
-      document.querySelector("#div-main").style.display = "block";
-      document.querySelector("#span-tip").innerText =
-        "Aim at the barcode on the driver's license.";
-      document.querySelector("#span-tip").hidden = false;
-      divUIContainer.style.display = "block";
-
-      const { cameraEnhancer, cvRouter } = await pInit;
-      cvRouter.stopCapturing();
-      cameraEnhancer.close();
-      cameraEnhancer.singleFrameMode = "disabled";
-      await cameraEnhancer.open();
-      await cvRouter.startCapturing("ReadDenseBarcodes");
-
-      timer = setTimeout(() => {
-        if (cameraEnhancer.singleFrameMode === "disabled") {
-          document.querySelector("#div-message-container").style.display = "flex";
-        }
-      }, 3000);
-    }
-
-    async function extractResultAlert(bytesToParse) {
-      function createNode(type, txt) {
-        let node = document.createElement(type);
-        if (txt) node.innerText = txt;
-        return node;
+      document.querySelector("#toggle-scan-mode").addEventListener("click", async () => {
+        document.querySelector("#span-tip").innerHTML =
+          "Click below to select a picture to read. <a href='javascript:void(0)' onclick='backToCameraMode()'>Back to camera mode</a>";
+
+        await switchToSingleFrameMode();
+        messageContainer.style.display = "none";
+      });
+
+      document.querySelector(".message-content .close-button").addEventListener("click", () => {
+        messageContainer.style.display = "none";
+      });
+
+      async function backToCameraMode() {
+        closeResultAlert();
+        document.querySelector("#span-tip").innerText = "Aim at the barcode on the driver's license.";
+
+        await switchToVideo();
       }
 
-      try {
-        const { parser } = await pInit;
-        let parsedDLInfo = await parser.parse(bytesToParse);
-        if (parsedDLInfo.exception) return false;
-        parsedDLInfo = JSON.parse(parsedDLInfo.jsonString);
-        console.log(parsedDLInfo);
-        let resultShowNode = document.createElement("p");
-        oriParseInfo = {};
-        if (parsedDLInfo.CodeType === "AAMVA_DL_ID") {
-          for (let info of parsedDLInfo.ResultInfo) {
-            if (info.FieldName !== "commonSubfile") continue;
-            if (info.ChildFields) {
-              wrapResultObject(info.ChildFields);
-            }
+      async function switchToSingleFrameMode() {
+        const { cameraEnhancer, cvRouter } = await pInit;
+        cvRouter.stopCapturing();
+        cameraEnhancer.close();
+        cameraEnhancer.singleFrameMode = "image";
+        await cameraEnhancer.open();
+        await cvRouter.startCapturing("ReadDenseBarcodes");
+      }
+
+      async function switchToVideo() {
+        document.querySelector("#main-container").style.display = "block";
+        document.querySelector("#span-tip").innerText = "Aim at the barcode on the driver's license.";
+        document.querySelector("#span-tip").hidden = false;
+        cameraViewContainer.style.display = "block";
+
+        const { cameraEnhancer, cvRouter } = await pInit;
+        cvRouter.stopCapturing();
+        cameraEnhancer.close();
+        cameraEnhancer.singleFrameMode = "disabled";
+        await cameraEnhancer.open();
+        await cvRouter.startCapturing("ReadDenseBarcodes");
+
+        messageDisplayTimer = setTimeout(() => {
+          if (cameraEnhancer.singleFrameMode === "disabled") {
+            messageContainer.style.display = "flex";
           }
-        } else if (parsedDLInfo.CodeType === "AAMVA_DL_ID_WITH_MAG_STRIPE") {
-          for (let info of parsedDLInfo.ResultInfo) {
-            if (info.FieldName.includes("track")) {
+        }, 3000);
+      }
+
+      async function extractResultAlert(bytesToParse) {
+        function createNode(type, txt) {
+          let node = document.createElement(type);
+          if (txt) node.innerText = txt;
+          return node;
+        }
+
+        try {
+          const { parser } = await pInit;
+          let parsedDLInfo = await parser.parse(bytesToParse);
+          if (parsedDLInfo.exception) return false;
+          parsedDLInfo = JSON.parse(parsedDLInfo.jsonString);
+          console.log(parsedDLInfo);
+          let resultShowNode = document.createElement("p");
+          oriParseInfo = {};
+          if (parsedDLInfo.CodeType === "AAMVA_DL_ID") {
+            for (let info of parsedDLInfo.ResultInfo) {
+              if (info.FieldName !== "commonSubfile") continue;
               if (info.ChildFields) {
                 wrapResultObject(info.ChildFields);
               }
             }
-          }
-        } else if (parsedDLInfo.CodeType === "SOUTH_AFRICA_DL") {
-          for (let info of parsedDLInfo.ResultInfo) {
-            oriParseInfo[info.FieldName] = info.Value;
-            if (info.ChildFields) {
-              wrapResultObject(info.ChildFields);
+          } else if (parsedDLInfo.CodeType === "AAMVA_DL_ID_WITH_MAG_STRIPE") {
+            for (let info of parsedDLInfo.ResultInfo) {
+              if (info.FieldName.includes("track")) {
+                if (info.ChildFields) {
+                  wrapResultObject(info.ChildFields);
+                }
+              }
+            }
+          } else if (parsedDLInfo.CodeType === "SOUTH_AFRICA_DL") {
+            for (let info of parsedDLInfo.ResultInfo) {
+              oriParseInfo[info.FieldName] = info.Value;
+              if (info.ChildFields) {
+                wrapResultObject(info.ChildFields);
+              }
             }
           }
-        }
-        for (let o in oriParseInfo) {
-          if (oriParseInfo[o]) {
-            resultShowNode.appendChild(createNode("span", o));
-            resultShowNode.appendChild(createNode("br"));
-            resultShowNode.appendChild(createNode("strong", oriParseInfo[o]));
-            resultShowNode.appendChild(createNode("br"));
-            resultShowNode.appendChild(
-              createNode("span", "------------------------------")
-            );
-            resultShowNode.appendChild(createNode("br"));
+          for (let o in oriParseInfo) {
+            if (oriParseInfo[o]) {
+              resultShowNode.appendChild(createNode("span", o));
+              resultShowNode.appendChild(createNode("br"));
+              resultShowNode.appendChild(createNode("strong", oriParseInfo[o]));
+              resultShowNode.appendChild(createNode("br"));
+              resultShowNode.appendChild(createNode("span", "------------------------------"));
+              resultShowNode.appendChild(createNode("br"));
+            }
           }
+          resultBody.innerHTML = "";
+          resultBody.appendChild(resultShowNode);
+          resultContainer.style.display = "block";
+          document.addEventListener("mousedown", clickToHide);
+          return true;
+        } catch (ex) {
+          alert(ex.message);
+          return false;
         }
-        document.querySelector(".div-result-body").innerHTML = "";
-        document
-          .querySelector(".div-result-body")
-          .appendChild(resultShowNode);
-        divResultContainer.style.display = "block";
-        document.addEventListener("mousedown", clickToHide);
-        return true;
-      } catch (ex) {
-        alert(ex.message);
-        return false;
       }
-    }
 
-    function wrapResultObject(childFields) {
-      for (let childField of childFields) {
-        for (let field of childField) {
-          if (!["dataElementSeparator", "segmentTerminator", "subfile", "subfileType"].includes(field.FieldName)) {
-            oriParseInfo[field.FieldName] = field.Value;
-          }
-          if (field.ChildFields) {
-            wrapResultObject(field.ChildFields);
+      function wrapResultObject(childFields) {
+        for (let childField of childFields) {
+          for (let field of childField) {
+            if (!["dataElementSeparator", "segmentTerminator", "subfile", "subfileType"].includes(field.FieldName)) {
+              oriParseInfo[field.FieldName] = field.Value;
+            }
+            if (field.ChildFields) {
+              wrapResultObject(field.ChildFields);
+            }
           }
         }
       }
-    }
 
-    function clickToHide(e) {
-      if (e.target === document.body || e.target.id === "span-tip") {
-        closeResultAlert();
-        document.removeEventListener("click", arguments.callee);
-      }
-    }
-
-    async function closeResultAlert() {
-      divResultContainer.style.display = "none";
-      document.querySelector(".div-result-body").innerText = "";
-      const { cameraEnhancer, cvRouter } = await pInit;
-      if (cameraEnhancer.singleFrameMode === "disabled") {
-        timer = setTimeout(() => {
-          if (cameraEnhancer.singleFrameMode === "disabled") {
-            document.querySelector("#div-message-container").style.display =
-              "flex";
-          }
-        }, 3000);
+      function clickToHide(e) {
+        if (e.target === document.body || e.target.id === "span-tip") {
+          closeResultAlert();
+          document.removeEventListener("click", arguments.callee);
+        }
       }
-      await cvRouter.startCapturing("ReadDenseBarcodes");
-    }
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+      async function closeResultAlert() {
+        resultContainer.style.display = "none";
+        resultBody.innerText = "";
+        const { cameraEnhancer, cvRouter } = await pInit;
+        if (cameraEnhancer.singleFrameMode === "disabled") {
+          messageDisplayTimer = setTimeout(() => {
+            if (cameraEnhancer.singleFrameMode === "disabled") {
+              messageContainer.style.display = "flex";
+            }
+          }, 3000);
+        }
+        await cvRouter.startCapturing("ReadDenseBarcodes");
+      }
+    </script>
+  </body>
+</html>
diff --git a/use-case/read-a-drivers-license/style.css b/use-case/read-a-drivers-license/style.css
index 605adec2..acb09334 100644
--- a/use-case/read-a-drivers-license/style.css
+++ b/use-case/read-a-drivers-license/style.css
@@ -1,4 +1,3 @@
-
 * {
   margin: 0;
   padding: 0;
@@ -44,7 +43,7 @@ strong {
   cursor: pointer;
 }
 
-#div-main {
+#main-container {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -65,13 +64,13 @@ strong {
   fill: #aaa;
 }
 
-#div-ui-container {
+#camera-view-container {
   display: none;
   width: 100%;
   height: 100%;
 }
 
-#div-result-container {
+#result-container {
   display: none;
   position: fixed;
   width: 50vw;
@@ -83,7 +82,7 @@ strong {
   margin-top: 30px;
 }
 
-#div-result-container .div-result-header {
+#result-container .result-header {
   width: 100%;
   height: 30px;
   background-color: #000;
@@ -93,19 +92,19 @@ strong {
   box-sizing: border-box;
 }
 
-#div-result-container .div-result-body {
+#result-container .result-body {
   height: calc(70vh - 30px);
   overflow-y: auto;
   padding: 5px;
   box-sizing: border-box;
 }
 
-#div-result-container p {
+#result-container p {
   padding: 5px;
   margin: 0;
 }
 
-#div-message-container {
+#message-container {
   display: none;
   align-items: center;
   width: 50vw;
@@ -120,24 +119,25 @@ strong {
   transition: opacity 0.2s;
 }
 
-#div-message-container .em-icon {
+#message-container .message-icon {
   font-size: 28px;
   width: 28px;
   line-height: 0;
+  padding-right: 1rem;
 }
 
-#div-message-container .div-message-content {
+#message-container .div-message-content {
   display: table-cell;
   padding: 0 8px;
 }
 
-.div-message-content>span {
+.message-content > span {
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
 }
 
-.div-message-content>p {
+.message-content > p {
   font-size: 13px;
   margin: 5px 0 0;
   line-height: 20px;
@@ -150,7 +150,7 @@ strong {
   padding: 2px;
 }
 
-.em-close {
+.close-button {
   position: absolute;
   top: 12px;
   right: 15px;
@@ -160,15 +160,15 @@ strong {
 
 /* Small devices */
 @media only screen and (max-width: 1000px) {
-  #div-message-container {
+  #message-container {
     width: 90vw;
   }
 
-  #div-main {
+  #main-container {
     width: 80vw;
   }
 
-  #div-result-container {
+  #result-container {
     width: 80vw;
   }
 }
