Merge branch 'main' of https://github.com/Dynamsoft/capture-vision-ja…

…vascript-samples into playwright-test

.github/workflows/preview.yml

@@ -0,0 +1,25 @@
+name: Deploy PR previews
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Deploy PR Preview
+        uses: rossjrw/[email protected]
+        with:
+          token: ${{ secrets.PREVIEW_TOKEN }}
+          preview-branch: gh-pages
+          source-dir: .
+          umbrella-dir: pr-preview
+          action: auto

README.md

@@ -22,9 +22,82 @@ Execute playwright code coverage test by simply run
 npm test
 ```
 
-## License
+## Request a Trial License
+
+The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the <a href="https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=docs&package=js" target="_blank">Request a Trial License</a> link.
+
+## Project Structure
+
+```text
+Sample Project
+├── assets
+│   ├── ...
+│   ├── ...
+│   └── ...
+├── css
+│   └── index.css
+├── font
+│   ├── ...
+│   ├── ...
+│   └── ...
+├── js
+│   ├── const.js
+│   ├── index.js
+│   ├── init.js
+│   └── util.js
+├── index.html
+└── template.json
+```
+
+ * `/assets` : This directory contains all the static files such as images, icons, etc. that are used in the project.
+ * `/css` : This directory contains the CSS file(s) used for styling the project.
+ * `/font` : This directory contains the font files used in the project.
+ * `/js` : This directory contains all the JavaScript files used in the project.
+   * `const.js` : This file contains definitions of certain constants or variables used across the project.
+   * `index.js`: This is the main JavaScript file where the core logic of the project is implemented.
+   * `init.js` : This file is used for initialization purposes, such as initializing license, load resources, etc.
+   * `util.js` : This file contains utility functions that are used across the project.
+ * `index.html` : This is the main HTML file that represents the homepage of the project.
+ * `template.json` : This file contains predefined templates used in the project.
+ * `minimum-elements.html` : This HTML file includes the sample project with minimal elements and limited CSS, all contained within a single page.
+
+## System Requirements
+
+This project requires the following features to work:
+
+- Secure context (HTTPS deployment)
+
+  When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons
+
+  - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
+  > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.
+  
+  - Dynamsoft License requires a secure context to work.
+
+- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`
+
+  The above four features are required for the SDK to work.
+
+- `MediaDevices`/`getUserMedia`
+
+  This API is required for in-browser video streaming.
+
+- `getSettings`
+
+  This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.
+
+The following table is a list of supported browsers based on the above requirements:
+
+  | Browser Name |     Version      |
+  | :----------: | :--------------: |
+  |    Chrome    | v78+<sup>1</sup> |
+  |   Firefox    | v63+<sup>1</sup> |
+  |     Edge     |       v79+       |
+  |    Safari    |       v14+       |
+
+  <sup>1</sup> devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews.
 
-You can request a 30-day trial license via the [Request a Trial License](https://www.dynamsoft.com/customer/license/trialLicense/?product=cvs&utm_source=github&package=js) link.
+Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.
 
 ## Testing
 

VINScanner/css/index.css

@@ -368,14 +368,13 @@ img {
   justify-content: center;
   align-items: center;
   border-radius: 8px;
-  opacity: 0.8;
   background-color: rgb(34, 34, 34);
 }
 
 .scan-orientation-btn .scan-orientation-icon {
   width: 24px;
   height: 24px;
-  filter: invert(0.4);
+  filter: invert(1);
 }
 
 #notification {

VINScanner/js/index.js

@@ -14,51 +14,49 @@ import {
 SCAN_MODES.forEach((mode) =>
   document.querySelector(`#scan-${mode}-btn`).addEventListener("click", async () => {
     try {
-      (async () => {
-        homePage.style.display = "none";
-        scannerContainer.style.display = "block";
+      homePage.style.display = "none";
+      scannerContainer.style.display = "block";
 
-        pInit = pInit || (await init);
+      pInit = pInit || (await init);
 
-        // Starts streaming the video
-        if (cameraEnhancer.isOpen()) {
-          await cvRouter.stopCapturing();
-          await cameraView.clearAllInnerDrawingItems();
-        } else {
-          await cameraEnhancer.open();
-        }
+      // Starts streaming the video
+      if (cameraEnhancer.isOpen()) {
+        await cvRouter.stopCapturing();
+        await cameraView.clearAllInnerDrawingItems();
+      } else {
+        await cameraEnhancer.open();
+      }
 
-        // Highlight the selected camera in the camera list container
-        const currentCamera = cameraEnhancer.getSelectedCamera();
+      // Highlight the selected camera in the camera list container
+      const currentCamera = cameraEnhancer.getSelectedCamera();
 
-        const currentResolution = judgeCurResolution(cameraEnhancer.getResolution());
-        cameraListContainer.childNodes.forEach((child) => {
-          if (currentCamera.deviceId === child.deviceId && currentResolution === child.resolution) {
-            child.className = "camera-item camera-selected";
-          }
-        });
+      const currentResolution = judgeCurResolution(cameraEnhancer.getResolution());
+      cameraListContainer.childNodes.forEach((child) => {
+        if (currentCamera.deviceId === child.deviceId && currentResolution === child.resolution) {
+          child.className = "camera-item camera-selected";
+        }
+      });
 
-        // Start capturing based on the selected scan mode template
-        await cvRouter.startCapturing(SCAN_TEMPLATES[mode]);
-        // By default, cameraEnhancer captures grayscale images to optimize performance.
-        // To capture RGB Images, we set the Pixel Format to EnumImagePixelFormat.IPF_ABGR_8888
-        cameraEnhancer.setPixelFormat(Dynamsoft.Core.EnumImagePixelFormat.IPF_ABGR_8888);
+      // Start capturing based on the selected scan mode template
+      await cvRouter.startCapturing(SCAN_TEMPLATES[mode]);
+      // By default, cameraEnhancer captures grayscale images to optimize performance.
+      // To capture RGB Images, we set the Pixel Format to EnumImagePixelFormat.IPF_ABGR_8888
+      cameraEnhancer.setPixelFormat(Dynamsoft.Core.EnumImagePixelFormat.IPF_ABGR_8888);
 
-        // Update button styles to show selected scan mode
-        document.querySelectorAll(".scan-option-btn").forEach((button) => {
-          button.classList.remove("selected");
-        });
-        document.querySelector(`#scan-${mode}-btn`).classList.add("selected");
-        showNotification(`Scan mode switched successfully`, "banner-success");
+      // Update button styles to show selected scan mode
+      document.querySelectorAll(".scan-option-btn").forEach((button) => {
+        button.classList.remove("selected");
+      });
+      document.querySelector(`#scan-${mode}-btn`).classList.add("selected");
+      showNotification(`Scan mode switched successfully`, "banner-success");
 
-        // Update the current mode to the newly selected mode and set scan orientation based on current mode
-        currentMode = mode;
-        configureScanOrientation();
-      })();
+      // Update the current mode to the newly selected mode and set scan orientation based on current mode
+      currentMode = mode;
+      configureScanOrientation();
     } catch (ex) {
       let errMsg = ex.message || ex;
-      console.error(errMsg);
-      alert(errMsg);
+      console.error(`An error occurred: ${errMsg}`);
+      alert(`An error occurred: ${errMsg}`);
     }
   })
 );
@@ -197,8 +195,8 @@ copyResultBtn.addEventListener("click", () => {
     })
     .catch((ex) => {
       let errMsg = ex.message || ex;
-      console.error(errMsg);
-      alert(errMsg);
+      console.error(`An error occured: ${errMsg}`);
+      alert(`An error occured: ${errMsg}`);
     });
 });
 
@@ -243,7 +241,7 @@ function updateScanOrientationStyles() {
     scanHelpMsg.style.display = "none"; // Hide the scan help message in portrait orientation
   } else {
     scanOrientationBtn.style.backgroundColor = "rgb(34,34,34)";
-    scanOrientationIcon.style.filter = "invert(0.4)";
+    scanOrientationIcon.style.filter = "invert(1)";
     scanHelpMsg.style.display = "block"; // Show the scan help message in landscape orientation
   }
 }

VINScanner/js/init.js

@@ -83,7 +83,7 @@ async function initDCE() {
 let init = (async function initCVR() {
   await initDCE();
   cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-  await cvRouter.initSettings("./VIN_Template.json");
+  await cvRouter.initSettings("./template.json");
   cvRouter.setInput(cameraEnhancer);
 
   /* Filter out unchecked and duplicate results. */

VINScanner/minimum-elements.html

@@ -67,7 +67,7 @@ <h3 id="scan-title"></h3>
 
         cvRouter.setInput(cameraEnhancer);
         // Set parameters to read VIN through DLR, DBR, and DCP
-        await cvRouter.initSettings("./VIN_Template.json");
+        await cvRouter.initSettings("./template.json");
 
         // Filter out unchecked and duplicate results.
         const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
@@ -164,8 +164,8 @@ <h3 id="scan-title"></h3>
             cameraEnhancer.setPixelFormat(Dynamsoft.Core.EnumImagePixelFormat.IPF_ABGR_8888);
           } catch (ex) {
             let errMsg = ex.message || ex;
-            console.error(errMsg);
-            alert(errMsg);
+            console.error(`An error occurred: ${errMsg}`);
+            alert(`An error occurred: ${errMsg}`);
           }
         })
       );