Update camera toggle area for improved accessibility and interaction

Author: Justin-dynamsoft

scenarios/scan-and-search/index.css

@@ -36,7 +36,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  pointer-events: none; /* let SDK controls below receive clicks */
   z-index: 10;
 }
 
@@ -51,7 +51,8 @@ body {
   justify-content: center;
   opacity: 0;
   transition: opacity 0.2s;
-  pointer-events: none;
+  pointer-events: auto; /* clickable */
+  cursor: pointer;
 }
 
 /* Loading spinner — shown while SDK initialises */

scenarios/scan-and-search/index.html

@@ -19,9 +19,9 @@ <h2>Scan or enter a barcode to search for product data</h2>
   <!-- Always-visible camera view -->
   <div id="barcode-scanner-view">
     <!-- Transparent overlay covering the full view; center click toggles play/pause -->
-    <div id="camera-toggle-area" class="loading" role="button" tabindex="0" aria-label="Loading...">
+    <div id="camera-toggle-area" class="loading" aria-hidden="true">
       <div id="loading-spinner"></div>
-      <div id="play-pause-icon"></div>
+      <div id="play-pause-icon" role="button" tabindex="0" aria-label="Toggle scanning"></div>
     </div>
   </div>
 
@@ -137,6 +137,7 @@ <h3 class="filter-section-title">Keyword Rules <span class="filter-hint">(all mu
     const inputBox             = document.getElementById("text-input");
     const barcodeScannerView   = document.getElementById("barcode-scanner-view");
     const cameraToggleArea     = document.getElementById("camera-toggle-area");
+    const playPauseIcon        = document.getElementById("play-pause-icon");
     const searchResult         = document.getElementById("search-result");
     const filterToggleBtn      = document.getElementById("filter-toggle-btn");
     const filtersPanel         = document.getElementById("filters-panel");
@@ -353,16 +354,18 @@ <h3 class="filter-section-title">Keyword Rules <span class="filter-hint">(all mu
     function updateToggleUI() {
       cameraToggleArea.classList.remove("loading", "paused");
       if (!isCapturing) cameraToggleArea.classList.add("paused");
-      cameraToggleArea.setAttribute("aria-label", isCapturing ? "Pause scanning" : "Resume scanning");
+        cameraToggleArea.setAttribute("aria-label", isCapturing ? "Pause scanning" : "Resume scanning");
     }
 
     async function toggleCapturing() {
       if (!scanner || cameraToggleArea.classList.contains("loading")) return;
       if (isCapturing) {
         scanner.cvRouter.stopCapturing();
+        scanner.cameraEnhancer.pause();
         isCapturing = false;
       } else {
         await applySDKFilters();
+        await scanner.cameraEnhancer.resume();
         await scanner.cvRouter.startCapturing("ReadSingleBarcode");
         isCapturing = true;
       }
@@ -403,6 +406,7 @@ <h3 class="filter-section-title">Keyword Rules <span class="filter-hint">(all mu
         inputBox.value = item.text;
         // Pause scanning after a successful read so the user can review the result
         cvRouter.stopCapturing();
+        cameraEnhancer.pause();
         isCapturing = false;
         updateToggleUI();
       };
@@ -421,8 +425,8 @@ <h3 class="filter-section-title">Keyword Rules <span class="filter-hint">(all mu
     })();
 
     // ── Event listeners ────────────────────────────────────────────────────────
-    cameraToggleArea.addEventListener("click", toggleCapturing);
-    cameraToggleArea.addEventListener("keydown", e => {
+    playPauseIcon.addEventListener("click", toggleCapturing);
+    playPauseIcon.addEventListener("keydown", e => {
       if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleCapturing(); }
     });