Dynamsoft · Tom-Dynamsoft · Apr 15, 2022 · Apr 12, 2022 · Apr 12, 2022 · Apr 12, 2022
diff --git a/1.hello-world/1.minimum-code.html → 1.hello-world/1.hello-world.html b/1.hello-world/1.minimum-code.html → 1.hello-world/1.hello-world.html
@@ -10,8 +10,7 @@
 </head>
 
 <body>
-    <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
-    <button id="btn-show-scanner">Show Barcode Scanner</button>
+    Loading...
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
     <script>
         /** LICENSE ALERT - README 
@@ -27,21 +26,20 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
          * LICENSE ALERT - THE END 
          */
 
-        let pScanner = null;
-        document.getElementById('btn-show-scanner').onclick = async function() {
+        window.onload = async function() {
             try {
-                const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-                /* 
-                 * onFrameRead is triggered after the library finishes reading a frame.
-                 * There can be multiple barcodes on one frame.
+                const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
+                /** 
+                 * 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.
@@ -50,9 +48,12 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
                     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) {
-                alert(ex.message);
                 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.minimum-code-es6.html → 1.hello-world/12.read-video-es6.html b/1.hello-world/12.minimum-code-es6.html → 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,24 +48,25 @@ <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;
             }
         })();
 
-
-
-
         // html elements
         const iptFile = document.getElementById('ipt-file');
         const iptReadonlyLastResult = document.getElementById('ipt-readonly-last-result');
         const pReading = document.getElementById('p-reading');
         const divResults = document.getElementById('div-results');
         const divCvsContainer = document.getElementById('div-cvs-container');
 
-
         // reader for decoding pictures
         let pReader = null;
         iptFile.addEventListener('change', async function() {
@@ -74,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) {
@@ -94,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';
@@ -109,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/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css b/1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css
@@ -43,7 +43,7 @@ span {
 
 .latest-result:focus {
     outline: none;
-    box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
+    box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
 }
 
 #results {

diff --git a/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue b/1.hello-world/5.read-video-vue/src/components/HelloWorld.vue
@@ -109,7 +109,7 @@ span {
 
 .latest-result:focus {
   outline: none;
-  box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
+  box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
 }
 
 #results {