npm - simple-dynamsoft-mcp - Versions diffs - 5.0.0 → 6.3.0 - Mend

simple-dynamsoft-mcp 5.0.0 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1061) hide show

package/code-snippet/dynamsoft-barcode-reader/web/scenarios/locate-an-item-with-barcode/index.html DELETED Viewed

@@ -1,735 +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="Locate an item quickly with Dynamsoft Barcode Reader." />
-  <meta name="keywords" content="locate item barcode, locate item barcode" />
-  <title>Dynamsoft Barcode Reader Sample - Locate an Item with Barcode</title>
-  <style>
-    body {
-      width: 100vw;
-      height: 100vh;
-      margin: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      gap: 1rem;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", sans-serif;
-      color: white;
-      background-color: rgb(34, 34, 34);
-      overscroll-behavior-y: none;
-      overflow: hidden;
-    }
-    .dls-license-msg-content {
-      color: black;
-    }
-    #inputs-container {
-      margin: 2rem;
-      padding-bottom: 2rem;
-      background-color: rgb(68, 68, 68);
-      border-radius: 0.2rem;
-    }
-    #item-id {
-      display: block;
-      margin: 0 auto;
-      padding: 0.4rem 0.8rem;
-      color: black;
-      border: 1px solid #fe8e14;
-      font-size: 1rem;
-      border-radius: 0.2rem;
-    }
-    #item-id::placeholder {
-      color: #b0bec5;
-    }
-    #item-id:focus {
-      outline: none;
-      box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
-    }
-    @keyframes shake {
-      0% {
-        transform: translateX(0);
-      }
-      25% {
-        transform: translateX(-5px);
-      }
-      50% {
-        transform: translateX(5px);
-      }
-      75% {
-        transform: translateX(-5px);
-      }
-      100% {
-        transform: translateX(0);
-      }
-    }
-    @keyframes dce-rotate {
-      from {
-        transform: rotate(0turn);
-      }
-      to {
-        transform: rotate(1turn);
-      }
-    }
-    .error-animation {
-      animation: shake 0.1s;
-      animation-iteration-count: 2;
-    }
-    #camera-view-container {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-    #camera-view-options {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      padding: 1rem;
-    }
-    #select-camera-dropdown {
-      color: white;
-      background-color: rgb(34, 34, 34, 0.4);
-      border: 0;
-      border-radius: 0.2rem;
-      padding: 0.5rem;
-      font-size: 1rem;
-      overflow: hidden;
-      max-width: 10rem;
-    }
-    #camera-view-title {
-      text-align: center;
-      border-radius: 0.2rem;
-      padding: 0.5rem;
-      width: -moz-fit-content;
-      width: fit-content;
-    }
-    .banner-default {
-      background-color: rgb(254, 142, 20, 0.4);
-      border: 1px solid #fe8e14;
-    }
-    .banner-error {
-      background-color: rgb(252, 2, 0, 0.4);
-      border: 1px solid #fc0200;
-    }
-    .banner-success {
-      background-color: rgb(124, 252, 0, 0.4);
-      border: 1px solid #7cfc00;
-    }
-    #camera-switch-notification {
-      text-align: center;
-      border-radius: 0.2rem;
-      padding: 0.5rem;
-      margin: 0;
-      width: -moz-fit-content;
-      width: fit-content;
-      /* Fade in animation */
-      opacity: 0;
-      transition: opacity 500ms;
-    }
-    button {
-      padding: 0.5rem;
-      background-color: #fe8e14;
-      font-size: 1rem;
-      border: 0;
-      border-radius: 0.2rem;
-      color: white;
-      transition: ease-in 0.2s all;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: bold;
-      white-space: nowrap;
-    }
-    button:hover {
-      box-shadow: -0.5rem 0.5rem 0 0px rgb(34, 34, 34);
-      transform: translate(0.5rem, -0.5rem);
-    }
-    #scan-id-button {
-      background-color: rgb(34, 34, 34);
-      border: 1px solid #fe8e14;
-    }
-    #search-button {
-      width: 100%;
-    }
-    #close-button {
-      font-size: 1rem;
-      font-weight: unset;
-    }
-    .bubble-box-container {
-      position: absolute;
-      z-index: 2;
-      display: flex;
-      color: black;
-      justify-content: center;
-    }
-    .bubble-box-container>.bubble-box {
-      position: absolute;
-      width: max-content;
-      max-width: 20rem;
-      background: white;
-      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);
-      transform: translateY(calc(-100% - 4px));
-    }
-    .bubble-box-container>.bubble-box::after {
-      content: "";
-      position: absolute;
-      bottom: -8px;
-      left: calc(50% - 8px);
-      border-left: 8px solid transparent;
-      border-top: 8px solid white;
-      border-right: 8px solid transparent;
-    }
-    @media screen and (min-width: 600px) {
-      #inputs-container {
-        margin: 0 auto;
-      }
-      #item-id,
-      select,
-      button {
-        font-size: 1.5rem;
-      }
-      #select-camera-dropdown {
-        max-width: unset;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- Container to retrieve user input -->
-  <div id="inputs-container">
-    <div style="border-bottom: 2px solid #fe8e14; padding: 0 2rem">
-      <h3 style="text-align: center">Locate an Item with Barcode</h3>
-    </div>
-    <div style="padding: 0 2rem">
-      <p>1. Enter or Scan the Item ID that you're seaching for:</p>
-      <div style="display: flex; gap: 1rem">
-        <!-- Manual ID Input -->
-        <input type="search" id="item-id" placeholder="Enter Item ID" style="flex: 8; width: 0" />
-        <!-- Button to scan barcode to retrieve item ID -->
-        <button type="button" id="scan-id-button" style="flex: 1">
-          <img src="icons/scan-barcode-icon.svg" alt="scan" style="width: 1rem; height: 1rem" />
-        </button>
-      </div>
-      <p id="error-message" style="margin: 0 auto; color: red; display: none">Please enter the item ID</p>
-      <p>2. Start searching for the item</p>
-      <!-- Button to start searching for barcode -->
-      <button type="button" id="search-button">Start Searching</button>
-    </div>
-  </div>
-  <!-- Footer -->
-  <a href="https://www.dynamsoft.com" target="_blank"> <img src="icons/dynamsoft-logo.png" alt="Dynamsoft" /></a>
-  <!-- Loading library message -->
-  <span id="lib-load" style="font-size: x-large; padding: 2rem; display: none">Loading Library...</span>
-  <!-- [Optional] - Create custom UI for CameraView -->
-  <!-- Ref: https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#createInstance -->
-  <!-- Ref: https://github.com/Dynamsoft/camera-enhancer-javascript-samples/blob/main/customize-ui/customize-ui.html -->
-  <div id="camera-view-container" style="display: none">
-    <div style="position: relative; width: 100%; height: 100%; background: rgb(34, 34, 34)">
-      <!-- DCE loading component -->
-      <svg class="dce-bg-loading" style="
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            margin: auto;
-            width: 40%;
-            height: 40%;
-            fill: #aaa;
-            animation: 1s linear infinite dce-rotate;
-          " viewBox="0 0 1792 1792">
-        <path
-          d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" />
-      </svg>
-      <div class="dce-video-container" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
-      <div id="camera-view-options">
-        <div style="display: flex; justify-content: space-between; align-items: center; gap: 2rem">
-          <!-- [Optional - Custom UI to select camera and resolution -->
-          <select type="button" id="select-camera-dropdown"></select>
-          <!-- Close Camera View button -->
-          <button id="close-button" type="button"></button>
-        </div>
-        <!-- [Optional] Title for Camera View -->
-        <div style="display: flex; justify-content: center; flex-direction: column; align-items: center">
-          <h3 id="camera-view-title"></h3>
-          <h6 id="camera-switch-notification"></h6>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Scanned barcode information containers -->
-  <div id="results"></div>
-  <!-- Images to indicate barcodes -->
-  <img hidden id="checkmark-icon" src="icons/checkmark-icon.svg" />
-  <img hidden id="cross-icon" src="icons/cross-icon.svg" />
-  <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> -->
-  <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("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==");
-    /**
-     * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&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/docs/web/programming/javascript/user-guide/index.html?ver=11.2.4000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
-     * LICENSE ALERT - THE END
-     */
-    // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-    Dynamsoft.Core.CoreModule.loadWasm();
-    const cameraViewContainer = document.getElementById("camera-view-container");
-    const cameraViewTitle = document.getElementById("camera-view-title");
-    const closeButton = document.getElementById("close-button");
-    const inputsContainer = document.getElementById("inputs-container");
-    const errorMessage = document.getElementById("error-message");
-    const loadingIndicator = document.getElementById("lib-load");
-    const cameraSwitchNotification = document.getElementById("camera-switch-notification");
-    const resultsContainer = document.getElementById("results");
-    // Create Custom Drawing Layer to create our Barcode Indicators
-    let customDrawingLayer;
-    // [Optional] - Custom UI to select camera and resolution
-    // Ref: https://github.com/Dynamsoft/barcode-reader-javascript-demo
-    const cameraDropdownElement = document.getElementById("select-camera-dropdown");
-    const resolutionList = ["Full HD", "HD"];
-    const resolution = {
-      [resolutionList[0]]: [1920, 1080], // Full HD
-      [resolutionList[1]]: [1280, 720], // HD
-    };
-    /** Check if current resolution is Full HD or HD
-     * Ref: https://github.com/Dynamsoft/barcode-reader-javascript-demo/blob/main/src/views/BarcodeScanner.vue
-     * @params {Object} currentResolution - an object with `width` and `height` to represent the current resolution of the camera
-     * @returns {string} Either "HD" or "Full HD" depending of the resolution of the screen
-     */
-    const judgeCurResolution = (currentResolution) => {
-      const { width, height } = currentResolution;
-      const minValue = Math.min(width, height);
-      const maxValue = Math.max(width, height);
-      if (minValue > 480 && minValue < 960 && maxValue > 960 && maxValue < 1440) {
-        return "HD";
-      } else if (minValue > 900 && minValue < 1440 && maxValue > 1400 && maxValue < 2160) {
-        return "Full HD";
-      }
-    };
-    // Initialize Image Procesing through CaptureVisionRouter
-    const init = async () => {
-      // Show loading library message
-      inputsContainer.style.display = "none";
-      loadingIndicator.style.display = "";
-      // [Optional] - Create custom UI for CameraView
-      // Ref: https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#createInstance
-      const cameraView = await Dynamsoft.DCE.CameraView.createInstance(cameraViewContainer);
-      // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-      const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-      cameraView.setVideoFit("cover");
-      // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-      const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-      cvRouter.setInput(cameraEnhancer);
-      // Filter out unchecked and duplicate results.
-      const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-      // Filter out unchecked barcodes.
-      filter.enableResultCrossVerification("barcode", true);
-      await cvRouter.addResultFilter(filter);
-      // Remove library loading message
-      loadingIndicator.style.display = "none";
-      // The DrawingLayerId for BarcodeReader results is 2.
-      // We want to remove the default indicator, QuadDrawingItem, to replace with an ImageDrawingItem. See L390
-      // Ref: https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/drawinglayer.html
-      const dbrDrawingLayer = cameraView.getDrawingLayer(2);
-      dbrDrawingLayer.setVisible(false);
-      // Create the custom Drawing Layer
-      customDrawingLayer = cameraEnhancer.getCameraView().createDrawingLayer();
-      // [Optional] - Custom UI to select camera and resolution
-      try {
-        await cameraEnhancer.open();
-        // Populate a list of cameras and the resolution
-        const cameraList = await cameraEnhancer.getAllCameras();
-        // Get current camera and current resolution to set as selected
-        const currentCamera = await cameraEnhancer.getSelectedCamera();
-        const currentResolution = await cameraEnhancer.getResolution();
-        if (cameraList.length > 0) {
-          for (let i of cameraList) {
-            for (let j of resolutionList) {
-              const cameraAndResolutionOption = document.createElement("option");
-              cameraAndResolutionOption.innerText = `${i?.label} (${j})`;
-              cameraAndResolutionOption.value = [i?.deviceId, j];
-              // Set as selected if option matches current camera and resolution
-              // Note: We checked with `resolution.includes(width)` and `resolution.includes(height)`
-              // instead of matching the width and height respectively because on mobile,
-              // the width and the height are switched.
-              if (currentCamera.deviceId === i.deviceId && judgeCurResolution(currentResolution) === j) {
-                cameraAndResolutionOption.selected = true;
-              }
-              // Add camera and resolution options to the select element
-              cameraDropdownElement.append(cameraAndResolutionOption);
-            }
-          } // Open camera
-        }
-      } catch (ex) {
-        const errMsg = ex.message || ex;
-        console.error(ex);
-        alert(errMsg);
-      }
-      return {
-        cameraEnhancer,
-        cvRouter,
-        cameraView
-      };
-    };
-    let pInit; // promise of init
-    let resultReceiver; // listener for cvRouter result receiver
-    // Event listener to scan the item ID
-    document.getElementById("scan-id-button").addEventListener("click", async function (event) {
-      // Rename the Camera View title and close button to prompt users to scan the barcode ID
-      cameraViewTitle.className = "";
-      cameraViewTitle.classList.add("banner-default");
-      cameraViewTitle.innerText = "Scan the item ID by barcode";
-      closeButton.innerText = "Type the item ID";
-      const itemIdInput = document.getElementById("item-id");
-      try {
-        const { cameraEnhancer, cvRouter, cameraView } = await (pInit = pInit || init());
-        // Define a callback for results.
-        resultReceiver = {
-          onDecodedBarcodesReceived: async (result) => {
-            const resultItems = result.barcodeResultItems;
-            if (!resultItems.length) return;
-            // Set item ID input value to the scanned ID
-            const scannedId = resultItems[0].text;
-            itemIdInput.value = scannedId;
-            // Hide Camera View
-            cameraViewContainer.style.display = "none";
-            // Remove error if id is found
-            errorMessage.style.display = "none";
-            // Show inputs-container after id is scanned
-            inputsContainer.style.display = "";
-            // Close cvRouter & camera enhancer after id is scanned
-            cvRouter.stopCapturing();
-            cameraEnhancer.close();
-            cvRouter.removeResultReceiver(resultReceiver);
-          },
-        };
-        cvRouter.addResultReceiver(resultReceiver);
-        // Show camera view container
-        cameraViewContainer.style.display = "";
-        // Open camera and start scanning single barcode.
-        if (!cameraEnhancer.isOpen()) await cameraEnhancer.open();
-        // Start capturing barcodes
-        await cvRouter.startCapturing("ReadSingleBarcode");
-      } catch (ex) {
-        const errMsg = ex.message || ex;
-        console.error(ex);
-        alert(errMsg);
-      }
-    });
-    // Remove the yellow stroke surrounding the image created by DrawingStyle's default config
-    // Ref: https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/interface/drawingstyle.html
-    const imageDrawingStyleId = Dynamsoft.DCE.DrawingStyleManager.createDrawingStyle({
-      strokeStyle: "rgba(0, 0, 0, 0)",
-    });
-    /**
-     * Creates a barcode indicator with ImageDrawingItem
-     * Ref: https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/imagedrawingitem.html
-     * @param {number} xCoordinate - X-coordinate of the midpoint of the quadrilateral
-     * @param {number} yCoordinate - Y-coordinate of the midpoint of the quadrilateral
-     * @param {string} imageId - The ID of the image to be drawn
-     * @returns {Dynamsoft.DCE.ImageDrawingItem} An image drawing item styled according to the provided parameters.
-     */
-    function createBarcodeIndicator(xCoordinate, yCoordinate, imageId) {
-      const iconSize = 50;
-      // Set the ImageDrawingItem to the center of BarcodeResultItem's location - which is a Quadrilateral
-      // Ref: https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/barcode-result-item.html
-      const x = xCoordinate - iconSize / 2;
-      const y = yCoordinate - iconSize / 2;
-      const imageDrawingItem = new Dynamsoft.DCE.ImageDrawingItem(
-        document.getElementById(imageId),
-        {
-          x,
-          y,
-          width: iconSize,
-          height: iconSize,
-        },
-        true,
-        imageDrawingStyleId
-      );
-      return imageDrawingItem;
-    }
-    // Event listener to start searching for the item ID
-    document.getElementById("search-button").addEventListener("click", async function (event) {
-      const itemIdInput = document.getElementById("item-id");
-      const itemId = itemIdInput.value;
-      // If item ID not provided, show an error message to the user
-      if (!itemId) {
-        itemIdInput.classList.add("error-animation");
-        itemIdInput.style.border = "1px solid red";
-        errorMessage.style.display = "block";
-        return;
-      } else {
-        itemIdInput.classList.remove("error-animation");
-        itemIdInput.style.border = "1px solid #fe8e14";
-        errorMessage.style.display = "none";
-      }
-      // Rename the close button to prompt users to start scanning barcodes
-      closeButton.innerText = "Locate another item";
-      try {
-        const { cameraEnhancer, cvRouter, cameraView } = await (pInit = pInit || init());
-        // Prepare to show overlay of the item ID on the CameraView
-        resultsContainer.innerHTML = "";
-        resultsContainer.style.display = "";
-        resultReceiver = {
-          onCapturedResultReceived: async (result) => {
-            // Reset drawing layer & text bubble container on each result found
-            customDrawingLayer.clearDrawingItems();
-            resultsContainer.innerHTML = "";
-            // Set title to inform user to start scanning barcodes
-            cameraViewTitle.innerText = "Scan barcodes to search for the item";
-            cameraViewTitle.className = "";
-            cameraViewTitle.classList.add("banner-default");
-            // Loop every barcode
-            for (let item of result.items) {
-              // Only detect items that are barcode
-              if (item.type != Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
-                continue;
-              }
-              // If we found the barcode that we're looking for, show the code in a bubble text and display a checkmark icon
-              // Otherwise, display a cross icon
-              // Ref: https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/show-result-texts-on-the-video.html
-              const p = item.location.points; // Get the points of the quadrilateral surrounding the scanned barcode
-              const barcodeTopLeft = {
-                x: Math.min(p[0].x, p[1].x, p[2].x, p[3].x),
-                y: Math.min(p[0].y, p[1].y, p[2].y, p[3].y),
-              };
-              const barcodeBottomRight = {
-                x: Math.max(p[0].x, p[1].x, p[2].x, p[3].x),
-                y: Math.max(p[0].y, p[1].y, p[2].y, p[3].y),
-              };
-              // Get midpoints of the barcode quadrilateral to display the barcode indicators
-              const barcodeMidPoint = {
-                x: (barcodeTopLeft.x + barcodeBottomRight.x) / 2,
-                y: (barcodeTopLeft.y + barcodeBottomRight.y) / 2,
-              };
-              let searchedBarcodeMarker;
-              if (item?.text === itemId) {
-                // Create div element to show the found item ID
-                // Create an `absolute` positioned container to overlay on top of the video
-                const bubbleBoxContainer = document.createElement("div");
-                bubbleBoxContainer.className = "bubble-box-container";
-                // Create the overlay element to display decoded barcode results
-                const bubbleBoxOverlay = document.createElement("div");
-                bubbleBoxOverlay.className = "bubble-box";
-                bubbleBoxOverlay.innerText = item.text;
-                bubbleBoxContainer.append(bubbleBoxOverlay);
-                // 'convertToClientCoordinates()' is used to converts coordinate of a barcode location to the coordinate relative to the viewport.
-                // Then we can place a div element according to the converted coordinate.
-                const clientTopLeft = cameraEnhancer.convertToClientCoordinates(barcodeTopLeft);
-                const clientBottomRight = cameraEnhancer.convertToClientCoordinates(barcodeBottomRight);
-                const clientMidX = (clientTopLeft.x + clientBottomRight.x) / 2;
-                // Set the div element to start on the top and center of the barcode area
-                bubbleBoxContainer.style.top = `${clientTopLeft.y}px`;
-                bubbleBoxContainer.style.left = `${clientMidX}px`;
-                resultsContainer.append(bubbleBoxContainer);
-                // You can also add more information, such as displaying product images.
-                // Create a checkmark barcode marker to indicate that the searched item is found
-                searchedBarcodeMarker = createBarcodeIndicator(
-                  barcodeMidPoint.x,
-                  barcodeMidPoint.y,
-                  "checkmark-icon"
-                );
-                // Change the title to indicate that the item has been located
-                cameraViewTitle.innerText = "Item Found!";
-                cameraViewTitle.className = "";
-                cameraViewTitle.classList.add("banner-success");
-              } else {
-                // If barcode not found, create a cross barcode marker
-                searchedBarcodeMarker = createBarcodeIndicator(barcodeMidPoint.x, barcodeMidPoint.y, "cross-icon");
-              }
-              // Draw indicator on the new drawing layer
-              customDrawingLayer.addDrawingItem(searchedBarcodeMarker);
-            }
-          },
-        };
-        cvRouter.addResultReceiver(resultReceiver);
-        // Show camera view container
-        cameraViewContainer.style.display = "";
-        // Open camera and start scanning single barcode.
-        if (!cameraEnhancer.isOpen()) await cameraEnhancer.open();
-        // Start capturing barcodes
-        await cvRouter.startCapturing("ReadBarcodes_Balance");
-      } catch (ex) {
-        const errMsg = ex.message || ex;
-        console.error(ex);
-        alert(errMsg);
-      }
-    });
-    // Event Listener to change camera and resolution
-    cameraDropdownElement.addEventListener("change", async function (event) {
-      // Get selected cameraID and resolution from chosen option
-      const { options, selectedIndex } = event.target;
-      const [selectedCameraId, selectedRes] = (options[selectedIndex].value || "").split(",");
-      const [width, height] = resolution[selectedRes];
-      // Set the cameraId and resolution
-      try {
-        const { cameraEnhancer } = await (pInit = pInit || init());
-        await cameraEnhancer.selectCamera(selectedCameraId);
-        await cameraEnhancer.setResolution({ width, height });
-        // Confirm if camera/resolution switch is successful
-        const currentCamera = await cameraEnhancer.getSelectedCamera();
-        const currentResolution = await cameraEnhancer.getResolution();
-        // Show notification status for switching camera/resolution
-        cameraSwitchNotification.className = "";
-        if (currentCamera.deviceId !== selectedCameraId) {
-          cameraSwitchNotification.classList.add("banner-error");
-          cameraSwitchNotification.innerText = `Switch camera failed!`;
-        } else if (judgeCurResolution(currentResolution) !== selectedRes) {
-          cameraSwitchNotification.classList.add("banner-error");
-          cameraSwitchNotification.innerText = `Switch resolution failed! ${selectedRes} might be unsupported in the camera.`;
-          // Update the selected camera to the current camera if the resolution is not supported by camera
-          for (let option of options) {
-            const [optionCamera, optionRes] = (option.value || "").split(",");
-            if (optionCamera === currentCamera.deviceId && optionRes === judgeCurResolution(currentResolution)) {
-              option.selected = true;
-              // Manually dispatch a change event to update to default camera
-              const changeEvent = new Event("change", { bubbles: true });
-              event.target.dispatchEvent(changeEvent);
-              break;
-            }
-          }
-        } else {
-          cameraSwitchNotification.classList.add("banner-success");
-          cameraSwitchNotification.innerText = `Switched to ${currentCamera.label} (${selectedRes}) successfully!`;
-        }
-        // Fade in animation for notificaiton
-        cameraSwitchNotification.style.opacity = 1;
-        setTimeout(function () {
-          cameraSwitchNotification.style.opacity = 0;
-        }, 5000);
-      } catch (ex) {
-        const errMsg = ex.message || ex;
-        console.error(ex);
-        alert(errMsg);
-      }
-    });
-    // Event Listener to exit from camera view
-    closeButton.addEventListener("click", async function () {
-      try {
-        const { cameraEnhancer, cvRouter } = await (pInit = pInit || init());
-        resultsContainer.style.display = "none";
-        cameraViewContainer.style.display = "none";
-        // Clear all indicators in customDrawingLayer when the window is closed
-        customDrawingLayer.clearDrawingItems();
-        // Show inputs-container when closing camera
-        inputsContainer.style.display = "";
-        cvRouter.removeResultReceiver(resultReceiver);
-        cvRouter.stopCapturing();
-        cameraEnhancer.close();
-      } catch (ex) {
-        const errMsg = ex.message || ex;
-        console.error(ex);
-        alert(errMsg);
-      }
-    });
-  </script>
-</body>
-</html>