From a2d4ecf2b8cbe34904b5635da2a7a5169c0a61f3 Mon Sep 17 00:00:00 2001
From: felixindrawan <indrawan.felix123@gmail.com>
Date: Mon, 17 Jun 2024 12:21:22 -0700
Subject: [PATCH] fix: match hello-world js to sample on docs

---
 hello-world/es6.html         | 169 ++++++++++++++++----------------
 hello-world/hello-world.html | 143 +++++++++++++--------------
 hello-world/requirejs.html   | 185 +++++++++++++++++------------------
 3 files changed, 251 insertions(+), 246 deletions(-)
diff --git a/hello-world/es6.html b/hello-world/es6.html
index 01317f0c..76afac3a 100644
--- a/hello-world/es6.html
+++ b/hello-world/es6.html
@@ -1,96 +1,101 @@
 <!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="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
+        />
+        <meta name="keywords" content="barcode, camera, es6" />
+        <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
+        <title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
+    </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
-  <meta name="keywords" content="barcode, camera, es6" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
-  <title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
-</head>
+    <body>
+        <h1>Hello World for ES6 (Decode via Camera)</h1>
+        <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
+        Results:<br />
+        <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto"></div>
+        <script type="module">
+            import {
+                CoreModule,
+                LicenseManager,
+                CaptureVisionRouter,
+                CameraView,
+                CameraEnhancer,
+                MultiFrameResultCrossFilter,
+            } from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
 
-<body>
-  <h1>Hello World for ES6 (Decode via Camera)</h1>
-  <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
-  Results:<br>
-  <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
-  <script type="module">
-    import { CoreModule, LicenseManager, CaptureVisionRouter, CameraView, CameraEnhancer, MultiFrameResultCrossFilter }
-      from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
+            /** LICENSE ALERT - README
+             * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+             */
 
-    /** LICENSE ALERT - README
-     * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
-     */
+            LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
 
-    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
+             */
 
-    /**
-     * 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
-     */
+            CoreModule.engineResourcePaths = {
+                std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
+                dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
+                core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
+                license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
+                cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
+                dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
+                dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
+            };
 
-    CoreModule.engineResourcePaths = {
-      std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-      dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-      core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-      license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-      cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-      dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-      dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-    };
+            // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+            CoreModule.loadWasm(["DBR"]);
 
-    // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-    CoreModule.loadWasm(["DBR"]);
+            (async function () {
+                try {
+                    // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+                    const cameraView = await CameraView.createInstance();
+                    const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
+                    // Get default UI and append it to DOM.
+                    document.querySelector("#div-ui-container").append(cameraView.getUIElement());
 
-    (async function () {
-      try {
-        // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-        const cameraView = await CameraView.createInstance();
-        const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
-        // Get default UI and append it to DOM.
-        document.querySelector("#div-ui-container").append(cameraView.getUIElement());
+                    // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+                    const cvRouter = await CaptureVisionRouter.createInstance();
+                    cvRouter.setInput(cameraEnhancer);
 
-        // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-        const cvRouter = await CaptureVisionRouter.createInstance();
-        cvRouter.setInput(cameraEnhancer);
+                    // Define a callback for results.
+                    cvRouter.addResultReceiver({
+                        onDecodedBarcodesReceived: (result) => {
+                            if (!result.barcodeResultItems.length) return;
 
-        // Define a callback for results.
-        cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-          if (!result.barcodeResultItems.length) return;
+                            const resultsContainer = document.querySelector("#div-results-container");
+                            resultsContainer.textContent = "";
+                            console.log(result);
+                            for (let item of result.barcodeResultItems) {
+                                resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+                            }
+                        },
+                    });
 
-          const resultsContainer = document.querySelector("#div-results-container");
-          resultsContainer.textContent = '';
-          console.log(result);
-          for (let item of result.barcodeResultItems) {
-            resultsContainer.append(
-              `${item.formatString}: ${item.text}`,
-              document.createElement('br'),
-              document.createElement('hr'),
-            );
-          }
-        }});
+                    // Filter out unchecked and duplicate results.
+                    const filter = new MultiFrameResultCrossFilter();
+                    // Filter out unchecked barcodes.
+                    filter.enableResultCrossVerification("barcode", true);
+                    // Filter out duplicate barcodes within 3 seconds.
+                    filter.enableResultDeduplication("barcode", true);
+                    await cvRouter.addResultFilter(filter);
 
-        // Filter out unchecked and duplicate results.
-        const filter = new MultiFrameResultCrossFilter();
-        // Filter out unchecked barcodes.
-        filter.enableResultCrossVerification("barcode", true);
-        // Filter out duplicate barcodes within 3 seconds.
-        filter.enableResultDeduplication("barcode", true);
-        await cvRouter.addResultFilter(filter);
-
-        // Open camera and start scanning single barcode.
-        await cameraEnhancer.open();
-        await cvRouter.startCapturing("ReadSingleBarcode");
-      } catch (ex) {
-        let errMsg = ex.message || ex;
-        console.error(errMsg);
-        alert(errMsg);
-      }
-    })();
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+                    // Open camera and start scanning single barcode.
+                    await cameraEnhancer.open();
+                    await cvRouter.startCapturing("ReadSingleBarcode");
+                } catch (ex) {
+                    let errMsg = ex.message || ex;
+                    console.error(errMsg);
+                    alert(errMsg);
+                }
+            })();
+        </script>
+    </body>
+</html>
diff --git a/hello-world/hello-world.html b/hello-world/hello-world.html
index 394bc99f..fbf84256 100644
--- a/hello-world/hello-world.html
+++ b/hello-world/hello-world.html
@@ -1,84 +1,85 @@
 <!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="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."/>
-    <meta name="keywords" content="barcode, camera" />
-    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html"/>
-    <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
-  </head>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <meta
+            name="description"
+            content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
+        />
+        <meta name="keywords" content="barcode, camera" />
+        <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+        <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
+    </head>
 
-  <body>
-    <h1>Hello World (Decode via Camera)</h1>
-    <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
-    Results:<br>
-    <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.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.
-       */
+    <body>
+        <h1>Hello World (Decode via Camera)</h1>
+        <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
+        Results:<br />
+        <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto"></div>
+        <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.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");
+            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
-       */
+            /**
+             * 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
+             */
 
-      // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-      Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-      // Defined globally for easy debugging.
-      let cameraEnhancer, cvRouter;
+            // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+            Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
+            // Defined globally for easy debugging.
+            let cameraEnhancer, cvRouter;
 
-      (async () => {
-        try {
-          // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-          const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-          cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-          // Get default UI and append it to DOM.
-          document.querySelector("#div-ui-container").append(cameraView.getUIElement()); 
+            (async () => {
+                try {
+                    // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+                    const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+                    cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+                    // Get default UI and append it to DOM.
+                    document.querySelector("#div-ui-container").append(cameraView.getUIElement());
 
-          // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-          cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-          cvRouter.setInput(cameraEnhancer);
+                    // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+                    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+                    cvRouter.setInput(cameraEnhancer);
 
-          // Define a callback for results.
-          cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-            if (!result.barcodeResultItems.length) return;
+                    // Define a callback for results.
+                    cvRouter.addResultReceiver({
+                        onDecodedBarcodesReceived: (result) => {
+                            if (!result.barcodeResultItems.length) return;
 
-            const resultsContainer = document.querySelector("#div-results-container");
-            resultsContainer.textContent = '';
-            console.log(result);
-            for (let item of result.barcodeResultItems) {
-              resultsContainer.append(
-                `${item.formatString}: ${item.text}`,
-                document.createElement('br'),
-                document.createElement('hr'),
-              );
-            }
-          }});
+                            const resultsContainer = document.querySelector("#div-results-container");
+                            resultsContainer.textContent = "";
+                            console.log(result);
+                            for (let item of result.barcodeResultItems) {
+                                resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+                            }
+                        },
+                    });
 
-          // Filter out unchecked and duplicate results.
-          const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-          // Filter out unchecked barcodes.
-          filter.enableResultCrossVerification("barcode", true);
-          // Filter out duplicate barcodes within 3 seconds.
-          filter.enableResultDeduplication("barcode", true);
-          await cvRouter.addResultFilter(filter);
+                    // Filter out unchecked and duplicate results.
+                    const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+                    // Filter out unchecked barcodes.
+                    filter.enableResultCrossVerification("barcode", true);
+                    // Filter out duplicate barcodes within 3 seconds.
+                    filter.enableResultDeduplication("barcode", true);
+                    await cvRouter.addResultFilter(filter);
 
-          // Open camera and start scanning single barcode.
-          await cameraEnhancer.open();
-          await cvRouter.startCapturing("ReadSingleBarcode");
-        } catch (ex) {
-          let errMsg = ex.message || ex;
-          console.error(errMsg);
-          alert(errMsg);
-        }
-      })();
-    </script>
-  </body>
+                    // Open camera and start scanning single barcode.
+                    await cameraEnhancer.open();
+                    await cvRouter.startCapturing("ReadSingleBarcode");
+                } catch (ex) {
+                    let errMsg = ex.message || ex;
+                    console.error(errMsg);
+                    alert(errMsg);
+                }
+            })();
+        </script>
+    </body>
 </html>
diff --git a/hello-world/requirejs.html b/hello-world/requirejs.html
index 68e95224..c6640347 100644
--- a/hello-world/requirejs.html
+++ b/hello-world/requirejs.html
@@ -1,106 +1,105 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <meta
+            name="description"
+            content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."
+        />
+        <meta name="keywords" content="barcode, camera, RequireJS" />
+        <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/requirejs.html" />
+        <title>Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera)</title>
+        <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
+    </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
-  <meta name="keywords" content="barcode, camera, RequireJS" />
-  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/requirejs.html" />
-  <title>Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera)</title>
-  <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
-</head>
+    <body>
+        <h1>Hello World for RequireJS (Decode via Camera)</h1>
+        <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
+        Results:
+        <br />
+        <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto"></div>
+        <script>
+            requirejs(
+                ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"],
+                ({
+                    Core: {CoreModule},
+                    License: {LicenseManager},
+                    Utility: {MultiFrameResultCrossFilter},
+                    CVR: {CaptureVisionRouter},
+                    DCE: {CameraView, CameraEnhancer},
+                }) => {
+                    /** LICENSE ALERT - README
+                     * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+                     */
 
-<body>
-  <h1>Hello World for RequireJS (Decode via Camera)</h1>
-  <div id="div-ui-container" style="width: 100%; height: 80vh"></div>
-  Results:
-  <br>
-  <div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
-  <script>
-    requirejs(
-      ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"],
-      ({
-        Core: { CoreModule },
-        License: { LicenseManager },
-        Utility: { MultiFrameResultCrossFilter },
-        CVR: { CaptureVisionRouter },
-        DCE: { CameraView, CameraEnhancer }
-      }) => {
-        /** LICENSE ALERT - README
-         * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
-         */
+                    LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
 
-        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
+                     */
 
-        /**
-         * 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
-         */
+                    CoreModule.engineResourcePaths = {
+                        std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
+                        dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
+                        core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
+                        license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
+                        cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
+                        dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
+                        dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
+                    };
 
-        CoreModule.engineResourcePaths = {
-          std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-          dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-          core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-          license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-          cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-          dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-          dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-        };
+                    // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+                    CoreModule.loadWasm(["DBR"]);
 
-        // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-        CoreModule.loadWasm(["DBR"]);
+                    (async () => {
+                        try {
+                            // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+                            const cameraView = await CameraView.createInstance();
+                            const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
+                            // Get default UI and append it to DOM.
+                            document.querySelector("#div-ui-container").append(cameraView.getUIElement());
 
-        (async () => {
-          try {
-            // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-            const cameraView = await CameraView.createInstance();
-            const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
-             // Get default UI and append it to DOM.
-            document.querySelector("#div-ui-container").append(cameraView.getUIElement());
+                            // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+                            const cvRouter = await CaptureVisionRouter.createInstance();
+                            cvRouter.setInput(cameraEnhancer);
 
-            // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-            const cvRouter = await CaptureVisionRouter.createInstance();
-            cvRouter.setInput(cameraEnhancer);
+                            // Define a callback for results.
+                            cvRouter.addResultReceiver({
+                                onDecodedBarcodesReceived: (result) => {
+                                    if (!result.barcodeResultItems.length) return;
 
-            // Define a callback for results.
-            cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-              if (!result.barcodeResultItems.length) return;
+                                    const resultsContainer = document.querySelector("#div-results-container");
+                                    resultsContainer.textContent = "";
+                                    console.log(result);
+                                    for (let item of result.barcodeResultItems) {
+                                        resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+                                    }
+                                },
+                            });
 
-              const resultsContainer = document.querySelector("#div-results-container");
-              resultsContainer.textContent = '';
-              console.log(result);
-              for (let item of result.barcodeResultItems) {
-                resultsContainer.append(
-                  `${item.formatString}: ${item.text}`,
-                  document.createElement('br'),
-                  document.createElement('hr'),
-                );
-              }
-            }});
+                            // Filter out unchecked and duplicate results.
+                            const filter = new MultiFrameResultCrossFilter();
+                            // Filter out unchecked barcodes.
+                            filter.enableResultCrossVerification("barcode", true);
+                            // Filter out duplicate barcodes within 3 seconds.
+                            filter.enableResultDeduplication("barcode", true);
+                            await cvRouter.addResultFilter(filter);
 
-            // Filter out unchecked and duplicate results.
-            const filter = new MultiFrameResultCrossFilter();
-            // Filter out unchecked barcodes.
-            filter.enableResultCrossVerification("barcode", true);
-            // Filter out duplicate barcodes within 3 seconds.
-            filter.enableResultDeduplication("barcode", true);
-            await cvRouter.addResultFilter(filter);
-
-            // Open camera and start scanning single barcode.
-            await cameraEnhancer.open();
-            await cvRouter.startCapturing("ReadSingleBarcode");
-          } catch (ex) {
-            let errMsg = ex.message || ex;
-            console.error(errMsg);
-            alert(errMsg);
-          }
-        })();
-      }
-    );
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+                            // Open camera and start scanning single barcode.
+                            await cameraEnhancer.open();
+                            await cvRouter.startCapturing("ReadSingleBarcode");
+                        } catch (ex) {
+                            let errMsg = ex.message || ex;
+                            console.error(errMsg);
+                            alert(errMsg);
+                        }
+                    })();
+                }
+            );
+        </script>
+    </body>
+</html>
