some updates

Tom-Dynamsoft · Tom-Dynamsoft · commit e228221cc605 · 2022-04-15T14:31:15.000+08:00
diff --git a/1.hello-world/1.hello-world.html b/1.hello-world/1.hello-world.html
@@ -10,6 +10,7 @@
 </head>
 
 <body>
+    Loading...
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
     <script>
         /** LICENSE ALERT - README 
@@ -28,17 +29,17 @@
         window.onload = async function() {
             try {
                 const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
-                /* 
-                 * onFrameRead is triggered after the library finishes reading a frame.
-                 * There can be multiple barcodes on one frame.
+                /** 
+                 * onFrameRead is triggered after the library finishes reading a frame image.
+                 * There can be multiple barcodes on one image.
                  */
                 scanner.onFrameRead = results => {
                     console.log("Barcodes on one frame:");
                     for (let result of results) {
                         console.log(result.barcodeFormatString + ": " + result.barcodeText);
                     }
                 };
-                /*
+                /**
                  * onUniqueRead is triggered only when a 'new' barcode is found.
                  * The amount of time that the library 'remembers' a barcode is defined by 
                  * "duplicateForgetTime" in "ScanSettings". By default it is set to 3000 ms.
@@ -47,6 +48,10 @@
                     alert(txt);
                     console.log("Unique Code Found: ", result);
                 }
+                /**
+                 * show() opens the camera and shows the video stream on the page. 
+                 * After that, the library starts to scan the frame images continuously.
+                 */
                 await scanner.show();
             } catch (ex) {
                 throw ex;
diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.html b/1.hello-world/10.read-video-pwa/helloworld-pwa.html
@@ -12,7 +12,7 @@
 
 <body>
     <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
-    <button id='readBarcode'>Read Barcode via Camera</button>
+    Loading...
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
     <script>
         /** LICENSE ALERT - README 
@@ -30,7 +30,7 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
 
         let pScanner = null;
         let latestResult = null;
-        document.getElementById('readBarcode').onclick = async function() {
+        window.onload = async function() {
             Notification.requestPermission().then((result) => {
                 if (result === 'granted') {
                     startNotificationLoop();
@@ -46,7 +46,6 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
                 };
                 scanner.onUniqueRead = (txt, result) => {
                     latestResult = txt;
-                    alert(txt, result);
                 }
                 await scanner.show();
             } catch (ex) {
diff --git a/1.hello-world/11.read-video-requirejs.html b/1.hello-world/11.read-video-requirejs.html
@@ -10,7 +10,7 @@
 
 <body>
     <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
-    <button id="readBarcode">show scanner</button>
+    Loading...
     <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
     <script>
         requirejs(['https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js'], function({
@@ -32,7 +32,7 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
 
             BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/";
             let pScanner = null;
-            document.getElementById('readBarcode').onclick = async function() {
+            window.onload = async function() {
                 try {
                     const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
                     scanner.onFrameRead = results => {
diff --git a/1.hello-world/12.read-video-es6.html b/1.hello-world/12.read-video-es6.html
@@ -10,8 +10,8 @@
 </head>
 
 <body>
-    <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
-    <button id="btn-show-scanner">Show Barcode Scanner</button>
+    <h1 style="font-size: 1.5em;">Hello World for ES6</h1>
+    Loading...
     <script type="module">
         import { BarcodeReader, BarcodeScanner } from 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.mjs';
         /** LICENSE ALERT - README 
@@ -30,7 +30,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
         BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/";
 
         let pScanner = null;
-        document.getElementById('btn-show-scanner').addEventListener('click', async () => {
+        window.onload = async () => {
             try {
                 const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
                 /* 
@@ -57,7 +57,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
                 alert(ex.message);
                 throw ex;
             }
-        });
+        };
     </script>
 </body>
 
diff --git a/1.hello-world/2.read-an-image.html b/1.hello-world/2.read-an-image.html
@@ -12,17 +12,22 @@
 <body>
     <div style="width:80vw;margin:0 auto;">
         <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
-        <input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
+        <input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif" disabled="disabled">
         <input id="ipt-readonly-last-result" title="Double click to clear!" readonly placeholder="The Last Read Barcode" style="width:80vw;margin-top:20px;">
-        <p id='p-loading' style='font-size:1.5em'>Loading Library...</p>
+        <p id='p-loading' style='font-size:1.5em'>Loading...</p>
         <p id='p-reading' style='font-size:1.5em;display:none;'>Reading Barcodes...</p>
         <div id="div-cvs-container" style="width:80vw;height:40vh;margin-top:20px;display:flex;justify-content:center;"></div>
         <p>All Results:</p>
         <div id="div-results" style="width:80vw;height:15vh;padding:16px;overflow-y:auto;border: 1px dashed grey;"></div>
     </div>
     <style>
-        .sp-resultText { color: #cE5E04 }
-        #div-cvs-container canvas { border: solid 1px gray; }
+        .sp-resultText {
+            color: #cE5E04
+        }
+        
+        #div-cvs-container canvas {
+            border: solid 1px gray;
+        }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
     <script>
@@ -43,9 +48,14 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
         (async() => {
             try {
                 await Dynamsoft.DBR.BarcodeReader.loadWasm();
-                document.getElementById('p-loading').style.display = 'none';
+                document.getElementById('p-loading').innerText = "Library loaded and ready!"
+                document.getElementById('ipt-file').disabled = false;
+                setTimeout(function() {
+                    document.getElementById('p-loading').style.display = 'none';
+                }, 1000);
             } catch (ex) {
-                alert(ex.message);
+                document.getElementById('p-loading').innerText = ex;
+                document.getElementById('ipt-file').disabled = true;
                 throw ex;
             }
         })();
@@ -70,7 +80,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
                 // show image
                 divCvsContainer.innerHTML = '';
                 divCvsContainer.appendChild(reader.getOriginalImageInACanvas());
-                
+
                 // show results
                 divResults.appendChild(createEl('h3', file.name + ": "));
                 if (0 === results.length) {
@@ -90,7 +100,6 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
                 divResults.appendChild(document.createElement('hr'));
                 divResults.scrollTop = divResults.scrollHeight;
             } catch (ex) {
-                alert(ex.message);
                 throw ex;
             } finally {
                 pReading.style.display = 'none';
@@ -105,7 +114,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
         function createEl(type, txt, className) {
             const el = document.createElement(type);
             el.textContent = txt;
-            if (className){
+            if (className) {
                 el.className = className;
             }
             return el;
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ This repository contains multiple samples that demonstrates how to use the [Dyna
 
 Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc.
 
-* **Simplest Implementation**: Minimum necessary JavaScript code to get the BarcodeScanner (video) up and running.
+* **Hello World**: Minimum necessary JavaScript code to get the BarcodeScanner (video) up and running.
 * **Read an Existing Image**: Decode barcodes using images that are stored locally, whether on mobile or desktop.
 * **Hello World in Angular**: Decode video stream in an Angular Application from a USB-connected or built-in camera (mobile or desktop).
 * **Hello World in React**: Decode video stream in a React Application from a USB-connected or built-in camera (mobile or desktop).
@@ -22,9 +22,9 @@ Get the basic features of the library working with plain/native JavaScript or wi
 ## Customize Camera UI
 
 * **Use the Default Camera UI**: Show the default camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
-* **Hide Built-in Controllers**: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream.
-* **Use External Controllers**: Use custom controllers to manipulate the Camera UI.
-* **Enlarge the Video Stream**: Enlarge the video stream temporarily to read a barcode.
+* **Hide Display Controls**: Hide built-in UI elements (camera selection, resolution selection, etc.) and show only the video stream.
+* **Set up External Controls**: Use custom controllers to manipulate the Camera UI.
+* **Changing Size of Video Viewer**: Enlarge the video stream temporarily to read a barcode.
 * **Customize the Camera UI**: Show the custom camera UI to decode video stream from a USB-connected or built-in camera (mobile or desktop).
 
 ## Parameter Settings
@@ -48,4 +48,6 @@ Use cases of the library.
 
 * **Debug**: Collect the actual image frames for debugging purposes.
 
-If you have any questions with these samples, feel free to submit an issue or [contact us](https://www.dynamsoft.com/company/contact/).
+## Support
+
+If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/overview/) via the "Let's Chat" button.
diff --git a/index.html b/index.html
@@ -19,8 +19,7 @@ <h3>Barcode Reader Samples</h3>
             <div class="file">Hello World</div>
             <div class="children">
                 <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Minimum necessary JavaScript code to get
-                    the BarcodeScanner (video) up and running." class="button title" href="1.hello-world/1.hello-world.html">Simplest
-                        Implementation</a><span id="icon001" class="tooltipIcon"></span>
+                    the BarcodeScanner (video) up and running." class="button title" href="1.hello-world/1.hello-world.html">Hello World</a><span id="icon001" class="tooltipIcon"></span>
                     <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/1.hello-world.html" title="Check code on GitHub"></a>
                 </div>
                 <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode barcodes
@@ -45,7 +44,6 @@ <h3>Barcode Reader Samples</h3>
                     <span id="icon004" class="tooltipIcon"></span>
                     <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/4.read-video-react" title="Check code on GitHub"></a>
                 </div>
-
                 <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode video stream in a Vue 2
                             Application from a USB-connected or built-in camera (mobile or desktop)." class="button title" href="1.hello-world/5.read-video-vue/dist/">
                         Hello World in
@@ -119,12 +117,12 @@ <h3>Barcode Reader Samples</h3>
                         PWA</a><span id="icon010" class="tooltipIcon"></span>
                     <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/10.read-video-pwa" title="Check code on GitHub"></a>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" target="_blank" href="https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-requirejs.html">Hello
+                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses RequireJS." class="button title" href="1.hello-world/11.read-video-requirejs.html">Hello
                         World with
                         RequireJS</a><span id="icon011" class="tooltipIcon"></span>
                     <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/master/1.hello-world/11.hello-world-requirejs.html" title="Check code on GitHub"></a>
                 </div>
-                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses ES6." class="button title" target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/12.read-video-es6.html">Hello
+                <div class="file"><a data-balloon-length="fit" data-balloon-pos="down" aria-label="Decode video stream from a USB-connected or built-in camera (mobile or desktop) in a web application that uses ES6." class="button title" href="1.hello-world/12.read-video-es6.html">Hello
                         World with
                         ES6</a><span id="icon012" class="tooltipIcon"></span>
                     <a class="github" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/master/1.hello-world/12.read-video-es6.html" title="Check code on GitHub"></a>
