simple-dynamsoft-mcp 4.0.0 → 6.2.0

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/pick-one-to-fill/README.md

@@ -1,35 +0,0 @@
-# ✅ Pick One to Fill
-
-A compact demo that helps pick the correct item from several candidates by scanning barcodes. The sample uses the Dynamsoft Barcode Reader bundle to decode barcodes from camera or image input and demonstrates a simple match-and-highlight UX.
-
-## Included files
-
-- `index.html` — main demo page.  
-- `index.css` — styles for the demo.  
-- `package-label.png` — sample product label used by the demo.
-
-## ✨ Features
-
-- Field-specific Camera Activation Open the camera individually for different fields.
-- Manual control when to start decoding Start decoding manually after aiming at the target to reduce the risk of misreads and missed barcodes.
-- Auto-Fill with Scan Result Automatically populates input fields with scanned barcode values.
-
-## 🔄 Sample Usage Flow
-
-1. Click the "Open Camera" button to activate the camera.
-2. Aim at the sample image shown below.
-3. Click the "Decode" button to start barcode recognition.
-4. If only one barcode is detected, its value will be automatically filled into the corresponding field. If multiple barcodes are detected, the video stream will freeze, and you’ll need to manually select one from the decoded results to fill in.
-
-## Quick start
-
-Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
-
-1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
-
-2. Right-click on `index.html` and select "Open with Five Server".
-
-## 📌 Notes
-
-- This usage is especially suitable for scenarios with densely packed barcodes, where secondary confirmation or manual selection is highly needed.
-- You can find a sample reference image in ·./pick-one-to-fill/·

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/pick-one-to-fill/index.css

@@ -1,112 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
-}
-
-input {
-  height: 100%;
-  flex: 1;
-  min-width: 0;
-  border: 1px solid #AAAAAA;
-  padding: 0 5px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.container .barcode-scanner-view {
-  width: 100%;
-  height: 60%;
-  display: none;
-}
-
-.container .guide-view {
-  width: 100%;
-  height: 60%;
-  background-color: #202020;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 50px;
-  color: #5D5D5D;
-  font-size: 16px;
-  text-align: center;
-}
-
-.container .form-view {
-  width: 100%;
-  height: 40%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.container .form-view .item {
-  width: calc(100% - 30px);
-  height: 42px;
-  display: flex;
-  align-items: center;
-}
-
-.container .form-view .item .content {
-  width: 83%;
-  height: 100%;
-  display: flex;
-}
-
-.container .form-view .sn .content input,
-.container .form-view .mac .content input,
-.container .form-view .eid .content input {
-  border-right: unset;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.container .form-view .item .title {
-  width: 17%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.container .form-view .item .content .open-btn,
-.container .form-view .item .content .decode-btn {
-  height: 100%;
-  border: unset;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  color: #FFFFFF;
-  font-size: 16px;
-  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
-  cursor: pointer;
-}
-
-.container .form-view .item .content .open-btn {
-  width: 35%;
-  background-color: #306877;
-}
-
-.container .form-view .item .content .decode-btn {
-  width: 50%;
-  background-color: #FE8E14;
-  display: none;
-}

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/pick-one-to-fill/index.html

@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Pick One To Fill with BarcodeScanner</title>
-  <link rel="stylesheet" href="./index.css">
-  <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
-  <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../dist/dbr.bundle.js"></script> -->
-</head>
-
-<body>
-  <div class="container">
-    <!-- This div will host the barcode scanner's camera view -->
-    <div class="barcode-scanner-view"></div>
-    <div class="guide-view">
-      <span>Please click the "<span style="color: #999999;">Open Camera</span>" button below to open the scanning
-        interface.</span>
-    </div>
-
-    <div class="form-view">
-      <div class="item pn">
-        <label class="title">Product Name: </label>
-        <input type="text">
-      </div>
-      <div class="item sn">
-        <label class="title">SN: </label>
-        <div class="content">
-          <input type="text">
-          <button class="open-btn open-sn">Open Camera</button>
-          <button class="decode-btn decode-sn">Decode to Auto-Fill</button>
-        </div>
-      </div>
-      <div class="item mac">
-        <label class="title">MAC: </label>
-        <div class="content">
-          <input type="text">
-          <button class="open-btn open-mac">Open Camera</button>
-          <button class="decode-btn decode-mac">Decode to Auto-Fill</button>
-        </div>
-      </div>
-      <div class="item eid">
-        <label class="title">EID: </label>
-        <div class="content">
-          <input type="text">
-          <button class="open-btn open-eid">Open Camera</button>
-          <button class="decode-btn decode-mac">Decode to Auto-Fill</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    const guideView = document.querySelector(".guide-view");
-    const barcodeScannerView = document.querySelector(".barcode-scanner-view");
-    const scanBtns = document.querySelectorAll(".open-btn");
-    const decodeBtns = document.querySelectorAll(".decode-btn");
-    let barcodeScanner = null;
-    let cvRouter = null;
-
-    for (let i = 0; i < scanBtns.length; i++) {
-      const scanBtn = scanBtns[i];
-      const decodeBtn = decodeBtns[i];
-
-      scanBtn.addEventListener("click", (e) => {
-        if (barcodeScanner) return;
-        // Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig
-        let config = {
-          license: "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==", // Replace with your Dynamsoft license key
-          container: barcodeScannerView, // Specify where to render the scanner UI
-          autoStartCapturing: false,
-          onInitReady: (components) => {
-            components.cameraView.setVideoFit("contain");
-            cvRouter = components.cvRouter;
-          }
-        };
-
-        // Create a new instance of the Dynamsoft Barcode Scanner
-        barcodeScanner = new Dynamsoft.BarcodeScanner(config);
-
-        guideView.style.display = "none";
-        barcodeScannerView.style.display = "block";
-        scanBtn.style.display = "none";
-        decodeBtn.style.display = "inline-block";
-
-        const target = e.target.classList[1].split("-")[1];
-        const targetInput = document.querySelector(`.${target} input`)
-
-        // Launch the scanner and handle the scanned result
-        barcodeScanner.launch().then((result) => {
-          // Display the first detected barcode's text in an alert
-          if (result.barcodeResults.length) {
-            targetInput.value = result.barcodeResults[0].text;
-          }
-          guideView.style.display = "flex";
-          barcodeScannerView.style.display = "none";
-          scanBtn.style.display = "inline-block";
-          decodeBtn.style.display = "none";
-          barcodeScanner = null;
-        });
-      })
-
-      decodeBtn.addEventListener("click", () => {
-        cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
-      })
-    }
-  </script>
-</body>
-
-</html>

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/read-a-drivers-license/README.md

@@ -1,39 +0,0 @@
-# 🚗 Read a Driver's License
-
-A focused demo that decodes and parses barcode data from driver's license images (camera or file input). The sample demonstrates extracting structured fields (name, DOB, license number, address, etc.) using a parsing template.
-
-## Included files
-
-- `index.html` — main demo page (camera + image input UI).  
-- `SampleDriversLicense.jpg` — example license image.  
-- `read_dl.json` — JSON template used by the sample.  
-
-## ✨ Features
-
-- Decode driver's license barcode (PDF417 / AAMVA formats) from camera or static image  
-- Parse and display structured fields
-- Simple UI for testing and validating parsing rules
-
-## 🔧 How it works
-
-- The page initializes the barcode scanner to decode the license barcode from an image or live video frame.
-- The sample parsed fields are rendered in the UI alongside the raw decoded text; the sample also highlights parsing errors or missing fields for easier troubleshooting.
-
-## Quick start
-
-Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
-
-1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
-
-2. Right-click on `index.html` and select "Open with Five Server".
-
-## 💡 Tips
-
-- Use high-resolution images or a higher camera resolution for reliable decoding and parsing.  
-- Test with multiple sample licenses to ensure the parsing template covers expected variants.  
-
-## 📌 Notes
-
-- Serve via localhost or HTTPS to enable camera access.  
-- Replace the included trial/demo license with a valid Dynamsoft license for extended evaluation.  
-- See the repository root `README.md` for running instructions and API documentation.

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/read-a-drivers-license/index.html

@@ -1,170 +0,0 @@
-<!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="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/scenarios/read-a-drivers-license/index.html" />
-  <title>Dynamsoft Barcode Reader Sample - Read a Driver's License</title>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-
-<body>
-  <div class="home-page">
-    <h1 class="home-page-title">Read a Driver's License</h1>
-    <div class="start-btn">
-      <div class="start-icon"></div>
-      <div class="loading"></div>
-
-    </div>
-    <img class="logo-dynamsoft" src="./logo-dynamsoft.png" alt="logo-dynamsoft">
-  </div>
-  <div class="parsed-result-view">
-    <div class="barcode-text"></div>
-    <ul class="parsed-result-list"></ul>
-    <div class="back-to-scan">Back to Scan</div>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
-  <script>
-    const parsedResultView = document.querySelector(".parsed-result-view");
-    const homePage = document.querySelector(".home-page");
-    const startIcon = document.querySelector(".start-icon");
-    const startBtn = document.querySelector(".start-btn");
-    const loading = document.querySelector(".loading");
-    const barcodeText = document.querySelector(".barcode-text");
-    const parsedResultList = document.querySelector(".parsed-result-list");
-    const backToScan = document.querySelector(".back-to-scan");
-
-    const licenseString = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==";
-
-    Dynamsoft.License.LicenseManager.initLicense(licenseString);
-    Dynamsoft.DCP.CodeParserModule.loadSpec(["AAMVA_DL_ID", "AAMVA_DL_ID_WITH_MAG_STRIPE", "SOUTH_AFRICA_DL"]);
-
-    (async () => {
-      let pParser;
-
-      async function launch() {
-        const scanner = new Dynamsoft.BarcodeScanner({
-          license: licenseString,
-          templateFilePath: "./read_dl.json",
-          showUploadImageButton: true,
-          utilizedTemplateNames: {
-            "single": "ReadDriversLicense",
-            "multi_unique": "ReadDriversLicense",
-            "image": "ReadDriversLicense"
-          },
-          scannerViewConfig: {
-            showFlashButton: true,
-            showCloseButton: false,
-            cameraSwitchControl: "toggleFrontBack",
-          },
-          onInitReady: () => {
-            homePage.style.display = "none";
-          }
-        });
-
-        const result = await scanner.launch();
-        if (result.barcodeResults.length > 0) {
-          let processedResult;
-          try {
-            const parser = await (pParser || (pParser = Dynamsoft.DCP.CodeParser.createInstance()));
-            const parsedResult = await parser.parse(result.barcodeResults[0].bytes);
-            processedResult = handleDLResult(parsedResult);
-          } catch (ex) {
-            processedResult = [
-              { description: "Error", value: ex.message || "parse failed." },
-              {
-                description: "Original text",
-                value: result.barcodeResults[0].text,
-              },
-            ]
-          } finally {
-            generateResultList(processedResult);
-            barcodeText.innerText = result.barcodeResults[0].text.replace(/\n/g, "");
-          }
-          parsedResultView.style.display = "block";
-        }
-      }
-
-      function handleDLResult(parsedResult) {
-        const oriParseInfo = [];
-        const resultInfo = JSON.parse(parsedResult.jsonString);
-        if (parsedResult.codeType === "AAMVA_DL_ID") {
-          for (let info of resultInfo.ResultInfo) {
-            if (info.FieldName !== "commonSubfile") continue;
-            if (info.ChildFields) {
-              wrapResultObject(info.ChildFields);
-            }
-          }
-        } else if (parsedResult.codeType === "AAMVA_DL_ID_WITH_MAG_STRIPE") {
-          for (let info of resultInfo.ResultInfo) {
-            if (info.FieldName.includes("track")) {
-              if (info.ChildFields) {
-                wrapResultObject(info.ChildFields);
-              }
-            }
-          }
-        } else if (parsedResult.codeType === "SOUTH_AFRICA_DL") {
-          for (let info of resultInfo.ResultInfo) {
-            if (info.ChildFields) {
-              wrapResultObject(info.ChildFields);
-            } else {
-              if (info.Value) {
-                oriParseInfo.push({
-                  description: info.FieldName,
-                  value: info.Value,
-                });
-              }
-            }
-          }
-        }
-
-        function wrapResultObject(childFields) {
-          for (let childField of childFields) {
-            for (let field of childField) {
-              if (!["dataElementSeparator", "segmentTerminator", "subfile", "subfileType"].includes(field.FieldName)) {
-                if (field.Value) {
-                  oriParseInfo.push({
-                    description: field.FieldName,
-                    value: field.Value,
-                  });
-                }
-              }
-              if (field.ChildFields) {
-                wrapResultObject(field.ChildFields);
-              }
-            }
-          }
-        }
-        return oriParseInfo;
-      }
-
-      function generateResultList(processedResult) {
-        parsedResultList.innerHTML = "";
-        const resultList = [];
-        for (let item of processedResult) {
-          const resultItem = document.createElement("li");
-          resultItem.className = "parsed-result-item";
-          resultItem.innerHTML = `<strong>${item.description}: </strong><span>${item.value}</span>`;
-          resultList.push(resultItem);
-        }
-        parsedResultList.append(...resultList);
-      }
-
-      startBtn.addEventListener("click", () => {
-        loading.style.display = "block";
-        startIcon.style.display = "none";
-        launch();
-      })
-
-      backToScan.addEventListener("click", () => {
-        parsedResultView.style.display = "none";
-        launch();
-      })
-    })();
-  </script>
-</body>
-
-</html>

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/read-a-drivers-license/read_dl.json

@@ -1,124 +0,0 @@
-{
-  "BarcodeReaderTaskSettingOptions": [
-    {
-      "Name": "task_pdf417_barcode",
-      "MaxThreadsInOneTask":1,
-      "ExpectedBarcodesCount": 1,
-      "BarcodeFormatIds": [
-        "BF_PDF417"
-      ],
-      "SectionArray": [
-        {
-          "Section": "ST_BARCODE_LOCALIZATION",
-          "ImageParameterName": "ip",
-          "StageArray": [
-            {
-              "LocalizationModes": [
-                {
-                  "Mode": "LM_CONNECTED_BLOCKS"
-                },
-                {
-                  "Mode": "LM_SCAN_DIRECTLY"
-                }              
-              ],
-              "Stage": "SST_LOCALIZE_CANDIDATE_BARCODES"
-            },
-            {
-              "Stage": "SST_LOCALIZE_BARCODES"
-            }
-          ]
-        },
-        {
-          "Section": "ST_BARCODE_DECODING",
-          "ImageParameterName": "ip",
-          "StageArray": [
-            {
-              "DeblurModes": [
-                {
-                  "Mode": "DM_BASED_ON_LOC_BIN"
-                },
-                {
-                  "Mode": "DM_THRESHOLD_BINARIZATION"
-                },
-                {
-                  "Mode": "DM_DEEP_ANALYSIS",
-                  "Methods": ["TwoDGeneral"]
-                }
-              ],
-              "Stage": "SST_DECODE_BARCODES"
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "CaptureVisionTemplates": [
-    {
-      "Name": "ReadDriversLicense",
-      "ImageROIProcessingNameArray": [
-        "roi_pdf417_barcode"
-      ]
-    }
-  ],
-  "ImageParameterOptions": [
-    {
-      "Name": "ip",
-      "ApplicableStages": [
-        {
-          "Stage": "SST_INPUT_COLOR_IMAGE"
-        },
-        {
-          "ImageScaleSetting": {
-            "EdgeLengthThreshold": 100000,
-            "ScaleType": "ST_SCALE_DOWN"
-          },
-          "Stage": "SST_SCALE_IMAGE"
-        },
-        {
-          "Stage": "SST_CONVERT_TO_GRAYSCALE"
-        },
-        {
-          "Stage": "SST_TRANSFORM_GRAYSCALE"
-        },
-        {
-          "Stage": "SST_ENHANCE_GRAYSCALE"
-        },
-        {
-          "Stage": "SST_BINARIZE_IMAGE"
-        },
-        {
-          "Stage": "SST_DETECT_TEXTURE"
-        },
-        {
-          "Stage": "SST_REMOVE_TEXTURE_FROM_GRAYSCALE"
-        },
-        {
-          "Stage": "SST_BINARIZE_TEXTURE_REMOVED_GRAYSCALE"
-        },
-        {
-          "Stage": "SST_FIND_CONTOURS"
-        },
-        {
-          "Stage": "SST_DETECT_SHORTLINES"
-        },
-        {
-          "Stage": "SST_ASSEMBLE_LINES"
-        },
-        {
-          "Stage": "SST_DETECT_TEXT_ZONES"
-        },
-        {
-          "Stage": "SST_REMOVE_TEXT_ZONES_FROM_BINARY"
-        }
-      ]
-    }
-  ],
-  "TargetROIDefOptions": [
-    {
-      "Name": "roi_pdf417_barcode",
-      "TaskSettingNameArray": [
-        "task_pdf417_barcode"
-      ]
-    }
-  ]
-}