update samples and readme;

Cube-J · Cube-J · commit 0e1ce6500a8c · 2023-03-15T13:44:23.000+08:00
diff --git a/1.hello-world/11.read-video-requirejs.html b/1.hello-world/11.read-video-requirejs.html
@@ -38,17 +38,25 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
              */
 
             BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/";
-            let pScanner = null;
             (async function() {
                 try {
-                    const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
+                    const scanner = await BarcodeScanner.createInstance();
+                    /* 
+                    * 'onFrameRead' is triggered after the library finishes reading a frame.
+                    * There can be one or multiple barcodes on each frame.
+                    */
                     scanner.onFrameRead = results => {
                         console.log("Barcodes on one frame:");
                         for (let result of results) {
                             const format = result.barcodeFormatString;
                             console.log(format + ": " + result.barcodeText);
                         }
                     };
+                    /*
+                    * onUnduplicatdRead 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.
+                    */
                     scanner.onUniqueRead = (txt, result) => {
                         alert(txt);
                         console.log("Unique Code Found: ", result);
diff --git a/1.hello-world/12.read-video-es6.html b/1.hello-world/12.read-video-es6.html
@@ -36,10 +36,9 @@ <h1 style="font-size: 1.5em;">Hello World for ES6</h1>
 
         BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/";
 
-        let pScanner = null;
         (async () => {
             try {
-                const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
+                const scanner = await BarcodeScanner.createInstance();
                 /* 
                  * 'onFrameRead' is triggered after the library finishes reading a frame.
                  * There can be one or multiple barcodes on each frame.
diff --git a/1.hello-world/README.md b/1.hello-world/README.md
@@ -8,7 +8,7 @@ Let's break down each of the samples
 
 ## Hello World - Read Barcodes via Video
 
-In this sample, you will find the basic lines of code ncessary to initialize the SDK and set it up.
+In this sample, you will find the basic lines of code necessary to initialize the SDK and set it up.
 
 Let's quickly break down the methods used in order:
 
@@ -30,47 +30,71 @@ In this sample, a event listener is set up so that the SDK decodes any image tha
 
 ## Hello World in Angular
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html).
+Read more in the README under "3.read-video-angular".
 
 ## Hello World in React
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html).
+Read more in the README under "4.read-video-react".
+
+## Hello World in React with Hooks
+
+Read more in the README under "13.read-video-react-hook".
 
 ## Hello World in Vue 2
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html).
+Read more in the README under "5.read-video-vue".
 
 ## Hello World in Vue 3
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html).
+Read more in the README under "6.read-video-vue3".
 
 ## Hello World in Next.js
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nextjs.html).
+Read more in the README under "7.read-video-nextjs".
 
 ## Hello World in NuxtJS
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nuxtjs.html).
+Read more in the README under "8.read-video-nuxtjs".
 
 ## Hello World in Electron
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-electron.html).
+Read more in the README under "9.read-video-electron".
 
 ## Hello World in PWA
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html).
+Read more in the README under "10.read-video-pwa".
 
 ## Hello World with RequireJS
 
-Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-requirejs.html).
+This sample shows how to use the SDK in a web page based on RequireJS.
+
+Let's quickly break down the methods used in order:
+
+* `license`: This property specifies a license key. Read more on Specify the license.
+* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
+* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
+* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
+
+In fact, `onFrameRead` and `onUniqueRead` do not have to both be defined in the code. `onUniqueRead` is the more used one between the two as it is triggered when a new barcode is found rather than on every frame.
 
 ## Hello World with ES6
 
 This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6).
 
+Let's quickly break down the methods used in order:
+
+* `license`: This property specifies a license key. Read more on Specify the license.
+* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
+* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The `results` object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. `txt` holds the barcode text value while `result` is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
+* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
+
+In fact, `onFrameRead` and `onUniqueRead` do not have to both be defined in the code. `onUniqueRead` is the more used one between the two as it is triggered when a new barcode is found rather than on every frame.
+
 ## Hello World with WebView
 
-This sample shows how to use Mobile SDK in web pages through webview, you can read more in moblie samples repository:[Android](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/android/JavaScript/WebViewBarcodeScanning)/[iOS](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/ios/JavaScript/WebViewBarcodeScanning).
+Read more in the README under "14.read-video-webview".
 
 ## Support
 
