Dynamsoft · Shen-wb · Aug 22, 2023 · Aug 22, 2023
diff --git a/hello-world/read-video-angular/src/app/video-normalizer/video-normalizer.component.ts b/hello-world/read-video-angular/src/app/video-normalizer/video-normalizer.component.ts
@@ -30,46 +30,49 @@ export class VideoNormalizerComponent {
 
   async ngOnInit(): Promise<void> {
     try {
-      /* initDCE */
       const view = await CameraView.createInstance();
       const dce = await (this.cameraEnhancer = CameraEnhancer.createInstance(view));
       const imageEditorView = await ImageEditorView.createInstance();
-      /* Create an image editing layer view */
+      /* Creates an image editing layer for drawing found document boundaries. */
       const layer = imageEditorView.createDrawingLayer();
 
-      /* initCVR */
+      /**
+      * Creates a CaptureVisionRouter instance and configure the task to detect document boundaries.
+      * Also, make sure the original image is returned after it has been processed.
+      */
       const normalizer = await (this.router = CaptureVisionRouter.createInstance());
       normalizer.setInput(dce);
-      /* Set the result type to be returned, because we need to normalize the original image later, so here we set the return result type to quadrilateral and original image data */
+      /**
+      * Sets the result types to be returned.
+      * Because we need to normalize the original image later, here we set the return result type to
+      * include both the quadrilateral and original image data.
+      */
       let newSettings = await normalizer.getSimplifiedSettings("detect-document-boundaries");
       newSettings!.capturedResultItemTypes = EnumCapturedResultItemType.CRIT_DETECTED_QUAD | EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
       await normalizer.updateSettings("detect-document-boundaries", newSettings!);
       this.cameraViewContainerRef.nativeElement!.append(view.getUIElement());
       this.imageEditorViewContainerRef.nativeElement!.append(imageEditorView.getUIElement());
 
-      /* Add result receiver */
+      /* Defines the result receiver for the task.*/
       const resultReceiver = new CapturedResultReceiver();
-      /* onCapturedResultReceived will return all result items */
       resultReceiver.onDetectedQuadsReceived = async (result) => {
         console.log(result);
         this.items = result.quadsResultItems;
       }
       resultReceiver.onOriginalImageResultReceived = (result) => {
         this.image = result.imageData;
       }
-      /* Specifiy the result receiver */
       normalizer.addResultReceiver(resultReceiver);
 
       this.confirmTheBoundary = () => {
         if(!dce.isOpen() || !this.items.length) return;
-        /* Hide video view */
+        /* Hides the cameraView and shows the imageEditorView. */
         this.bShowUiContainer = false
-        /* Show editor view */
         this.bShowImageContainer = true;
-        /* Set the acquired image data to editor view */
+        /* Draws the image on the imageEditorView first. */
         imageEditorView.setOriginalImage(this.image!);
         this.quads = [];
-        /* Create a graphical element of the detected quadrilateral and add it to the edit view layer */
+        /* Draws the document boundary (quad) over the image. */
         for (let i = 0; i < this.items.length; i++) {
           if (this.items[i].type === EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE) continue;
           const points = this.items[i].location.points;
@@ -83,7 +86,9 @@ export class VideoNormalizerComponent {
       }
 
       this.normalze = async () => {
+        /* Hides the imageEditorView. */
         this.bShowImageContainer = false;
+        /* Removes the old normalized image if any. */
         this.normalizedImageContainerRef.nativeElement!.innerHTML = "";
         /* Get the selected quadrilateral */
         let seletedItems = imageEditorView.getSelectedDrawingItems();
@@ -93,12 +98,15 @@ export class VideoNormalizerComponent {
         } else {
           quad = this.items[0].location;
         }
-        /* Set roi */
+        /**
+         * Sets the coordinates of the ROI (region of interest)
+         * in the built-in template "normalize-document".
+         */
         let ss = await normalizer.getSimplifiedSettings("normalize-document") as SimplifiedCaptureVisionSettings;
         ss.roiMeasuredInPercentage = false;
         ss.roi.points = quad.points;
         await normalizer.updateSettings("normalize-document", ss);
-        /* Capture executes the normalize task */
+        /* Executes the normalization and shows the result on the page */
         let norRes = await normalizer.capture(this.image!, "normalize-document");
         this.normalizedImageContainerRef.nativeElement!.append((norRes.items[0] as NormalizedImageResultItem).toCanvas());
         layer.clearDrawingItems();
@@ -111,6 +119,7 @@ export class VideoNormalizerComponent {
       }
 
       await dce.open();
+      /* Uses the built-in template "detect-document-boundaries" to start a continuous boundary detection task. */
       await normalizer.startCapturing("detect-document-boundaries");
       this.bShowLoading = false;
     } catch (ex: any) {

diff --git a/hello-world/read-video-angular/src/cvr.ts b/hello-world/read-video-angular/src/cvr.ts
@@ -1,14 +1,13 @@
 import { CaptureVisionRouter, LicenseManager } from "@dynamsoft/cvrjs";
 
 CaptureVisionRouter.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/cvrjs@0.20230815103342.0/dist/";
-/** LICENSE ALERT - README
- * To use the library, you need to first specify a license key using the API "license" as shown below.
+/** LICENSE ALERT - README 
+ * To use the library, you need to first call the method initLicense() to initialize the license using a license key string.
  */
 LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
 /**
+ * The license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" is a temporary license for testing good for 24 hours.
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&architecture=dcv&product=ddn&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://dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/?ver=2.0.10&utm_source=github#configure-the-license or contact support@dynamsoft.com.
  * LICENSE ALERT - THE END
  */
 CaptureVisionRouter.preloadModule(["DDN"]);
diff --git a/hello-world/read-video-react/src/components/VideoNormalizer/VideoNormalizer.tsx b/hello-world/read-video-react/src/components/VideoNormalizer/VideoNormalizer.tsx
@@ -30,36 +30,41 @@ function VideoRecognizer() {
     useEffect((): any => {
         const init = async () => {
             try {
-                /* initDCE */
                 view.current = await CameraView.createInstance();
                 dce.current = await (cameraEnhancer.current = CameraEnhancer.createInstance(view.current));
                 imageEditorView.current = await ImageEditorView.createInstance(imageEditorViewContainerRef.current as HTMLDivElement);
-                /* Create an image editing layer view */
+                /* Creates an image editing layer for drawing found document boundaries. */
                 layer.current = imageEditorView.current.createDrawingLayer();
 
-                /* initCVR */
+                /**
+                 * Creates a CaptureVisionRouter instance and configure the task to detect document boundaries.
+                 * Also, make sure the original image is returned after it has been processed.
+                 */
                 normalizer.current = await (router.current = CaptureVisionRouter.createInstance());
                 normalizer.current.setInput(dce.current);
-                /* Set the result type to be returned, because we need to normalize the original image later, so here we set the return result type to quadrilateral and original image data */
+                /**
+                 * Sets the result types to be returned.
+                 * Because we need to normalize the original image later, here we set the return result type to
+                 * include both the quadrilateral and original image data.
+                 */
                 let newSettings = await normalizer.current .getSimplifiedSettings("detect-document-boundaries");
                 newSettings!.capturedResultItemTypes = EnumCapturedResultItemType.CRIT_DETECTED_QUAD | EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
                 await normalizer.current .updateSettings("detect-document-boundaries", newSettings!);
                 cameraViewContainerRef.current!.append(view.current.getUIElement());
 
-                /* Add result receiver */
+                /* Defines the result receiver for the task.*/
                 const resultReceiver = new CapturedResultReceiver();
-                /* onCapturedResultReceived will return all result items */
                 resultReceiver.onDetectedQuadsReceived = async (result) => {
                     console.log(result);
                     items.current = result.quadsResultItems;
                 }
                 resultReceiver.onOriginalImageResultReceived = (result) => {
                     image.current = result.imageData;
                 }
-                /* Specifiy the result receiver */
                 normalizer.current.addResultReceiver(resultReceiver);
 
                 await dce.current.open();
+                /* Uses the built-in template "detect-document-boundaries" to start a continuous boundary detection task. */
                 await normalizer.current.startCapturing("detect-document-boundaries");
                 setShowLoading(false);
             } catch (ex: any) {
@@ -84,14 +89,13 @@ function VideoRecognizer() {
 
     const confirmTheBoundary = () => {
         if(!dce.current!.isOpen() || !items.current.length) return;
-        /* Hide video view */
+        /* Hides the cameraView and shows the imageEditorView. */
         setShowUiContainer(false);
-        /* Show editor view */
         setShowImageContainer(true);
-        /* Set the acquired image data to editor view */
+        /* Draws the image on the imageEditorView first. */
         imageEditorView.current!.setOriginalImage(image.current!);
         quads = [];
-        /* Create a graphical element of the detected quadrilateral and add it to the edit view layer */
+        /* Draws the document boundary (quad) over the image. */
         for (let i = 0; i < items.current.length; i++) {
             if (items.current[i].type === EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE) continue;
             const points = items.current[i].location.points;
@@ -105,7 +109,9 @@ function VideoRecognizer() {
     }
 
     const normalze = async () => {
+        /* Hides the imageEditorView. */
         setShowImageContainer(false);
+        /* Removes the old normalized image if any. */
         normalizedImageContainer.current!.innerHTML = "";
         /* Get the selected quadrilateral */
         let seletedItems = imageEditorView.current!.getSelectedDrawingItems();
@@ -115,12 +121,15 @@ function VideoRecognizer() {
         } else {
             quad = items.current[0].location;
         }
-        /* Set roi */
+        /**
+         * Sets the coordinates of the ROI (region of interest)
+         * in the built-in template "normalize-document".
+         */
         let ss = await normalizer.current!.getSimplifiedSettings("normalize-document") as SimplifiedCaptureVisionSettings;
         ss.roiMeasuredInPercentage = false;
         ss.roi.points = quad.points;
         await normalizer.current!.updateSettings("normalize-document", ss);
-        /* Capture executes the normalize task */
+        /* Executes the normalization and shows the result on the page */
         let norRes = await normalizer.current!.capture(image.current!, "normalize-document");
         normalizedImageContainer.current!.append((norRes.items[0] as NormalizedImageResultItem).toCanvas());
         layer.current!.clearDrawingItems();

diff --git a/hello-world/read-video-react/src/cvr.ts b/hello-world/read-video-react/src/cvr.ts
@@ -2,13 +2,12 @@ import { CaptureVisionRouter, LicenseManager } from "@dynamsoft/cvrjs";
 
 CaptureVisionRouter.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/cvrjs@0.20230815103342.0/dist/";
 /** 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 call the method initLicense() to initialize the license using a license key string.
  */
 LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-/** 
- * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&architecture=dcv&product=ddn&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://dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/?ver=2.0.10&utm_source=github#configure-the-license or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END 
+/**
+ * The license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" is a temporary license for testing good for 24 hours.
+ * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&architecture=dcv&product=ddn&package=js to get your own trial license good for 30 days.
+ * LICENSE ALERT - THE END
  */
 CaptureVisionRouter.preloadModule(["DDN"]);
diff --git a/hello-world/read-video-vue3/src/components/VideoNormalizer.vue b/hello-world/read-video-vue3/src/components/VideoNormalizer.vue
@@ -24,23 +24,29 @@ let normalze: () => void;
 
 onMounted(async () => {
     try {
-        /* initDCE */
         const view = await CameraView.createInstance();
         const dce = await (cameraEnhancer.value = CameraEnhancer.createInstance(view));
         const imageEditorView = await ImageEditorView.createInstance(imageEditorViewContainerRef.value as HTMLDivElement);
-        /* Create an image editing layer view */
+        /* Creates an image editing layer for drawing found document boundaries. */
         const layer = imageEditorView.createDrawingLayer();
 
-        /* initCVR */
+        /**
+         * Creates a CaptureVisionRouter instance and configure the task to detect document boundaries.
+         * Also, make sure the original image is returned after it has been processed.
+         */
         const normalizer = await (router.value = CaptureVisionRouter.createInstance());
         normalizer.setInput(dce);
-        /* Set the result type to be returned, because we need to normalize the original image later, so here we set the return result type to quadrilateral and original image data */
+        /**
+         * Sets the result types to be returned.
+         * Because we need to normalize the original image later, here we set the return result type to
+         * include both the quadrilateral and original image data.
+         */
         let newSettings = await normalizer.getSimplifiedSettings("detect-document-boundaries");
         newSettings!.capturedResultItemTypes = EnumCapturedResultItemType.CRIT_DETECTED_QUAD | EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
         await normalizer.updateSettings("detect-document-boundaries", newSettings!);
         cameraViewContainerRef.value!.append(view.getUIElement());
 
-        /* Add result receiver */
+        /* Defines the result receiver for the task.*/
         const resultReceiver = new CapturedResultReceiver();
         resultReceiver.onDetectedQuadsReceived = (result) => {
             console.log(result);
@@ -49,19 +55,17 @@ onMounted(async () => {
         resultReceiver.onOriginalImageResultReceived = (result) => {
             image = result.imageData;
         }
-        /* Specifiy the result receiver */
         normalizer.addResultReceiver(resultReceiver);
 
         confirmTheBoundary = () => {
             if(!dce.isOpen() || !items.length) return;
-            /* Hide video view */
+            /* Hides the cameraView and shows the imageEditorView. */
             bShowUiContainer.value = false
-            /* Show editor view */
             bShowImageContainer.value = true;
-            /* Set the acquired image data to editor view */
+            /* Draws the image on the imageEditorView first. */
             imageEditorView.setOriginalImage(image);
             quads = [];
-            /* Create a graphical element of the detected quadrilateral and add it to the edit view layer */
+            /* Draws the document boundary (quad) over the image. */
             for (let i = 0; i < items.length; i++) {
                 if (items[i].type === EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE) continue;
                 const points = items[i].location.points;
@@ -75,7 +79,9 @@ onMounted(async () => {
         }
 
         normalze = async () => {
+            /* Hides the imageEditorView. */
             bShowImageContainer.value = false;
+            /* Removes the old normalized image if any. */
             normalizedImageContainer.value!.innerHTML = "";
             /* Get the selected quadrilateral */
             let seletedItems = imageEditorView.getSelectedDrawingItems();
@@ -85,12 +91,15 @@ onMounted(async () => {
             } else {
                 quad = items[0].location;
             }
-            /* Set roi */
+            /**
+             * Sets the coordinates of the ROI (region of interest)
+             * in the built-in template "normalize-document".
+             */
             let ss = await normalizer.getSimplifiedSettings("normalize-document") as SimplifiedCaptureVisionSettings;
             ss.roiMeasuredInPercentage = false;
             ss.roi.points = quad.points;
             await normalizer.updateSettings("normalize-document", ss);
-            /* Capture executes the normalize task */
+            /* Executes the normalization and shows the result on the page */
             let normalizeResult = await normalizer.capture(image, "normalize-document");
             normalizedImageContainer.value!.append((normalizeResult.items[0] as NormalizedImageResultItem).toCanvas());
             layer.clearDrawingItems();
@@ -103,6 +112,7 @@ onMounted(async () => {
         }
 
         await dce.open();
+        /* Uses the built-in template "detect-document-boundaries" to start a continuous boundary detection task. */
         await normalizer.startCapturing("detect-document-boundaries");
         bShowLoading.value = false;
     } catch (ex: any) {

diff --git a/hello-world/read-video-vue3/src/cvr.ts b/hello-world/read-video-vue3/src/cvr.ts
@@ -2,13 +2,12 @@ import { CaptureVisionRouter, LicenseManager } from "@dynamsoft/cvrjs";
 
 CaptureVisionRouter.engineResourcePath = "https://npm.scannerproxy.com/cdn/@dynamsoft/cvrjs@0.20230815103342.0/dist/";
 /** 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 call the method initLicense() to initialize the license using a license key string.
  */
 LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-/** 
- * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&architecture=dcv&product=ddn&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://dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/?ver=2.0.10&utm_source=github#configure-the-license or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END 
+/**
+ * The license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" is a temporary license for testing good for 24 hours.
+ * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&architecture=dcv&product=ddn&package=js to get your own trial license good for 30 days.
+ * LICENSE ALERT - THE END
  */
 CaptureVisionRouter.preloadModule(["DDN"]);