update

Cube-J · Cube-J · commit 071d1f45d47f · 2023-10-30T15:48:08.000+08:00
diff --git a/use-case/read-a-drivers-license.html b/use-case/read-a-drivers-license.html
@@ -283,8 +283,6 @@ <h1>Read A Driver's License</h1>
       Dynamsoft.License.LicenseManager.initLicense(
         "DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ=="
       );
-      Dynamsoft.DCP.CodeParser.license =
-        "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.
@@ -293,6 +291,17 @@ <h1>Read A Driver's License</h1>
        * LICENSE ALERT - THE END
        */
 
+      /** LICENSE ALERT - README
+       * DCP
+       * To use the library, you need to first specify a license key using the API "license" as shown below.
+       */
+      Dynamsoft.DCP.CodeParser.license =
+        "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
+      /**
+       * You can contact Dynamsoft Support Team (https://www.dynamsoft.com/Company/Contact.aspx) to obtain a license.
+       * LICENSE ALERT - THE END
+       */
+
       // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
       Dynamsoft.CVR.CaptureVisionRouter.preloadModule(["DBR"]).catch((ex) => {
         let errMsg;
@@ -476,7 +485,7 @@ <h1>Read A Driver's License</h1>
         cameraEnhancer.close();
         cameraEnhancer.singleFrameMode = "disabled";
         await cameraEnhancer.open();
-        await router.startCapturing("ReadSingleBarcode");
+        await router.startCapturing("ReadDenseBarcodes");
 
         timer = setTimeout(() => {
           if (cameraEnhancer.singleFrameMode === "disabled") {
diff --git a/use-case/show-result-texts-on-the-video.html b/use-case/show-result-texts-on-the-video.html
@@ -10,31 +10,36 @@
     <meta name="keywords" content="read barcode from camera, custom style" />
     <link
       rel="canonical"
-      href="https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html"
+      href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html"
     />
     <title>
       Dynamsoft Barcode Reader Sample - Show Result Texts on the Video
     </title>
+    <script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-core@3.0.20-dev-20231010152155/dist/core.js"></script>
+    <script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-utility@1.0.10-dev-20231023103736/dist/utility.js"></script>
+    <script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-barcode-reader@10.0.20-dev-20231020140243/dist/dbr.js"></script>
+    <script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-capture-vision-router@2.0.20-dev-20231027145739/dist/cvr.js"></script>
+    <script src="https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft-camera-enhancer@4.0.1-dev-20231023131759/dist/dce.js"></script>
     <style>
       .bubble-box-container {
         position: absolute;
         display: flex;
         justify-content: center;
       }
-      .bubble-box-container>.bubble-box{
+      .bubble-box-container > .bubble-box {
         position: absolute;
         width: max-content;
         max-width: 20rem;
         background: white;
-        border-radius: 4px; 
+        border-radius: 4px;
         padding: 4px;
         word-break: break-all;
         word-wrap: break-word;
-        box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
+        box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.2);
         transform: translateY(calc(-100% - 4px));
       }
-      .bubble-box-container>.bubble-box::after{
-        content: '';
+      .bubble-box-container > .bubble-box::after {
+        content: "";
         position: absolute;
         bottom: -8px;
         left: calc(50% - 8px);
@@ -47,96 +52,128 @@
   <body>
     <div id="div-ui-container" style="width: 100%; height: 90vh"></div>
     <div id="div-information-containers"></div>
-    <!--
-    This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
-    library offline. Please see the guide on how to host the library: 
-    https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
-    -->
-    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.31/dist/dbr.js"></script>
     <script>
       if (location.protocol === "file:") {
-        const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
+        const message = `The page is opened via file:// and our SDKs may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
         console.warn(message);
         alert(message);
       }
     </script>
     <script>
       /** LICENSE ALERT - README
-       * To use the library, you need to first specify a license key using the API "license" as shown below.
+       * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
        */
 
-      Dynamsoft.DBR.BarcodeReader.license =
-        "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
+      Dynamsoft.License.LicenseManager.initLicense(
+        "DLS2eyJoYW5kc2hha2VDb2RlIjoiNjY2Ni03Nzc3IiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vMTkyLjE2OC44LjEyMi9kbHMvIiwib3JnYW5pemF0aW9uSUQiOiI2NjY2IiwiY2hlY2tDb2RlIjoxNTEyMTgzMzg3fQ=="
+      );
 
       /**
        * 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=9.6.31&utm_source=github#specify-the-license or contact support@dynamsoft.com.
+       * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.20&utm_source=github#specify-the-license or contact support@dynamsoft.com.
        * LICENSE ALERT - THE END
        */
 
-      const divInfContainers = document.querySelector("#div-information-containers");
-      let scanner;
+      const divInfContainers = document.querySelector(
+        "#div-information-containers"
+      );
 
       (async () => {
         try {
-          scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-          await scanner.updateRuntimeSettings("speed");
-
-          // Get ui by 'getUIElement()' and append it to DOM.
+          // 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);
           document
             .querySelector("#div-ui-container")
-            .append(scanner.getUIElement());
+            .append(cameraView.getUIElement()); // Get default UI and append it to DOM.
 
-          /**
-           * 'onFrameRead' is triggered after the library finishes reading a frame image.
-           * There can be multiple barcodes on one image.
-           */
-          scanner.onFrameRead = (results) => {
-            console.log(results);
+          // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+          const router =
+            await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+          router.setInput(cameraEnhancer);
 
-            // Clear previous result text elements.
+          // Define a callback for results.
+          const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
+          resultReceiver.onCapturedResultReceived = (result) => {
             divInfContainers.innerText = "";
 
-            for (let result of results) {
-              const l = result.localizationResult;
+            const resultItems = result.items;
+            for (let item of resultItems) {
+              if (
+                item.type !=
+                Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE
+              )
+                continue;
+
+              const l = item.location;
               const p1 = {
-                x: Math.min(l.x1, l.x2, l.x3, l.x4),
-                y: Math.min(l.y1, l.y2, l.y3, l.y4),
+                x: Math.min(
+                  l.points[0].x,
+                  l.points[1].x,
+                  l.points[2].x,
+                  l.points[3].x
+                ),
+                y: Math.min(
+                  l.points[0].y,
+                  l.points[1].y,
+                  l.points[2].y,
+                  l.points[3].y
+                ),
               };
               const p2 = {
-                x: Math.max(l.x1, l.x2, l.x3, l.x4),
-                y: Math.max(l.y1, l.y2, l.y3, l.y4),
+                x: Math.max(
+                  l.points[0].x,
+                  l.points[1].x,
+                  l.points[2].x,
+                  l.points[3].x
+                ),
+                y: Math.max(
+                  l.points[0].y,
+                  l.points[1].y,
+                  l.points[2].y,
+                  l.points[3].y
+                ),
               };
-              
+
               const divInfContainer = document.createElement("div");
               divInfContainer.className = "bubble-box-container";
               const divInf = document.createElement("div");
               divInf.className = "bubble-box";
-              divInf.innerText = result.barcodeText;
+              divInf.innerText = item.text;
               divInfContainer.append(divInf);
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position === "static") {
                 /**
                  * 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document.
                  * Then we can place a div element according to the converted coordinate.
                  */
-                const pageP1 = scanner.convertToPageCoordinates(p1);
-                const pageP2 = scanner.convertToPageCoordinates(p2);
+                const pageP1 = cameraEnhancer.convertToPageCoordinates(p1);
+                const pageP2 = cameraEnhancer.convertToPageCoordinates(p2);
                 const pageMidX = (pageP1.x + pageP2.x) / 2;
                 divInfContainer.style.top = `${pageP1.y}px`;
                 divInfContainer.style.left = `${pageMidX}px`;
-              } else { // if you set body `position` as `relative`, `absolute`, and so on, things can get complicated.
+              } else {
+                // if you set body `position` as `relative`, `absolute`, and so on, things can get complicated.
                 /**
                  * 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the viewport.
                  * Then we can place a div element according to the converted coordinate.
                  */
-                const clientP1 = scanner.convertToClientCoordinates(p1);
-                const clientP2 = scanner.convertToClientCoordinates(p2);
+                const clientP1 = cameraEnhancer.convertToClientCoordinates(p1);
+                const clientP2 = cameraEnhancer.convertToClientCoordinates(p2);
                 const clientMidX = (clientP1.x + clientP2.x) / 2;
                 const bodyRect = document.body.getBoundingClientRect();
-                divInfContainer.style.top = `${clientP1.y - bodyRect.top - parseFloat(bodyStyle.borderTopWidth)}px`;
-                divInfContainer.style.left = `${clientMidX - bodyRect.left - parseFloat(bodyStyle.borderLeftWidth)}px`;
+                divInfContainer.style.top = `${
+                  clientP1.y -
+                  bodyRect.top -
+                  parseFloat(bodyStyle.borderTopWidth)
+                }px`;
+                divInfContainer.style.left = `${
+                  clientMidX -
+                  bodyRect.left -
+                  parseFloat(bodyStyle.borderLeftWidth)
+                }px`;
               }
               divInfContainers.append(divInfContainer);
 
@@ -145,12 +182,18 @@
                */
             }
           };
+          router.addResultReceiver(resultReceiver);
+
+          // Filter out unchecked and duplicate results.
+          const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+          filter.enableResultCrossVerification(
+            Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE,
+            true
+          ); // Filter out unchecked barcodes.
 
-          /**
-           * 'open()' opens the camera.
-           * After that, the library starts to scan the frame images continuously.
-           */
-          await scanner.open();
+          // Open camera and start scanning single barcode.
+          await cameraEnhancer.open();
+          await router.startCapturing("ReadBarcodes_SpeedFirst");
         } catch (ex) {
           let errMsg;
           if (ex.message.includes("network connection error")) {
