Merge branch '_dev' of https://github.com/Dynamsoft/barcode-reader-javascript-samples into _dev

Author: Keillion

2.ui-tweaking/3.read-video-with-external-control.html

@@ -158,11 +158,11 @@ <h1 style="font-size: 1.5em;">Customized UI</h1>
             let scanner = await pScanner;
             scanner && scanner.hide();
         });
-        document.getElementById('toggleSound').addEventListener("click", async() => {
+        document.getElementById('toggleSound').addEventListener("click", async(e) => {
             if (pScanner) {
                 let scanner = await pScanner;
                 let scanSettings = await scanner.getScanSettings();
-                scanSettings.whenToPlaySoundforSuccessfulRead = this.checked ? "frame" : "never";
+                scanSettings.whenToPlaySoundforSuccessfulRead = document.getElementById("toggleSound").checked ? "frame" : "never";
                 await scanner.updateScanSettings(scanSettings);
             }
         });
@@ -274,15 +274,15 @@ <h1 style="font-size: 1.5em;">Customized UI</h1>
                 let li = document.createElement("li");
                 let span = document.createElement("span");
                 span.setAttribute("id", camera.deviceId);
-                span.innerText = camera.label;
+                span.textContent = camera.label;
                 li.appendChild(span);
                 document.getElementById("ul_options_camera").appendChild(li);
             });
             const camOption = document.querySelectorAll("#ul_options_camera span");
             camOption.forEach(sapn => {
                 sapn.addEventListener("click", camOptionSelected);
                 if (!currentCamera || sapn.id === currentCamera.deviceId) {
-                    document.getElementById("selector_input_camera").value = sapn.innerText;
+                    document.getElementById("selector_input_camera").value = sapn.textContent;
                     sapn.classList.add("selected");
                 } else {
                     sapn.classList.remove("selected");
@@ -297,10 +297,10 @@ <h1 style="font-size: 1.5em;">Customized UI</h1>
             let scanner = await pScanner;
             const currentResolution = await scanner.getResolution();
             let gotResolution = document.querySelector("#gotResolution span");
-            gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
+            gotResolution.textContent = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
             gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
             gotResolution.classList.add("selected");
-            document.getElementById("selector_input_resolution").value = gotResolution.innerText;
+            document.getElementById("selector_input_resolution").value = gotResolution.textContent;
             const checked = document.getElementById("toggleScanLight").checked;
             setScanLightView(checked);
         }

2.ui-tweaking/5.read-video-with-custom-default-ui.html

@@ -135,7 +135,7 @@ <h1>Customized Default UI</h1>
                 let span = document.createElement("span");
                 span.addEventListener("click", camOptionSelected);
                 span.setAttribute("id", camera.deviceId);
-                span.innerText = camera.label;
+                span.textContent = camera.label;
                 if (camera.deviceId === currentCamera.deviceId) {
                     document.getElementById("selector_input_camera").value = camera.label;
                     span.classList.add("selected");
@@ -151,10 +151,10 @@ <h1>Customized Default UI</h1>
             const currentResolution = await scanner.getResolution();
             const gotResolution = document.querySelector("#gotResolution span");
             const resOptions = document.querySelectorAll("#ul_options_resolution span");
-            gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
+            gotResolution.textContent = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
             gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
             gotResolution.classList.add("selected");
-            document.getElementById("selector_input_resolution").value = gotResolution.innerText;
+            document.getElementById("selector_input_resolution").value = gotResolution.textContent;
             for (let i = 0; i < resOptions.length; i++) {
                 resOptions[i].addEventListener("click", resOptionSelected);
             };
@@ -199,7 +199,7 @@ <h1>Customized Default UI</h1>
                     const _currentCamera = await scanner.getCurrentCamera();
                     camOptions.forEach(span => {
                         if (span.id === _currentCamera.deviceId) {
-                            document.getElementById("selector_input_camera").value = span.innerText;
+                            document.getElementById("selector_input_camera").value = span.textContent;
                             span.classList.add("selected");
                         } else {
                             span.classList.remove("selected");
@@ -222,9 +222,9 @@ <h1>Customized Default UI</h1>
             const _currentResolution = await scanner.getResolution();
             const gotResolution = document.querySelector("#gotResolution span");
             const resOptions = document.querySelectorAll("#ul_options_resolution span");
-            gotResolution.innerText = 'got ' + _currentResolution[0] + ' x ' + _currentResolution[1];
+            gotResolution.textContent = 'got ' + _currentResolution[0] + ' x ' + _currentResolution[1];
             gotResolution.id = _currentResolution[0] + 'x' + _currentResolution[1];
-            document.getElementById("selector_input_resolution").value = gotResolution.innerText;
+            document.getElementById("selector_input_resolution").value = gotResolution.textContent;
             toggleMaskView();
         }
         // camera's styles mask show or not