Merge pull request #247 from Dynamsoft/main

sync main changes

Author: a362758199

README.md

@@ -29,24 +29,24 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 
 Get the basic features working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), with RTU-BarcodeScanner APIs.
 
-* [**Scan Single Barcode**](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?utm_source=sampleReadme): Scan single barcode from video stream with minimum code in JavaScript.
+* [**Scan Single Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?utm_source=sampleReadme): Scan single barcode from video stream with minimum code in JavaScript.
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
 * [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.
 
 **Scan multiple barcodes**
 
-* [**Scan Multiple Barcodes**](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
-* [**Cart Builder**](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html?utm_source=sampleReadme): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
+* [**Scan Multiple Barcodes**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scan-multiple-barcodes/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
+* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scan-multiple-barcodes/cart-builder.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html?utm_source=sampleReadme): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
 
 ### Foundational API samples
 
 **Hello World**
 
 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.
 
-* [**Hello World**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
-* [**Read an Image**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system.
+* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
+* [**Read an Image**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/read-an-image.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system.
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular#readme): Read barcodes from camera and images in an Angular application.
 * [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor#readme): Read barcodes from camera and images in a Blazor application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react#readme): Read barcodes from camera and images in a React application.
@@ -56,16 +56,16 @@ Get the basic features of the library working with plain/native JavaScript or wi
 * [**Hello World in Nuxt**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme): Read barcodes from camera and images in a Nuxt application.
 * [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme): Read barcodes from camera and images in a Electron application.
 * [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa#readme): Decode video stream in a PWA application from a webcam or a built-in camera.
-* [**Hello World with RequireJS**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a webcam or a built-in camera.
-* [**Hello World with ES6**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a webcam or a built-in camera.
+* [**Hello World with RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/requirejs.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a webcam or a built-in camera.
+* [**Hello World with ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a webcam or a built-in camera.
 * [**Hello World in WebView**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview): Decode video stream in an application in WebView from camera. 
 
 ***Use Cases***
 
-* [**Read Video and Fill a Form**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
-* [**Read a Driver's License**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-a-drivers-license/index.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
-* [**Show Result Texts on the Video**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video.
-* [**Locate an Item with Barcode**](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html?utm_source=sampleReadme): Find a specific item in a large collection by scanning its unique barcode
+* [**Read Video and Fill a Form**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
+* [**Read a Driver's License**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-a-drivers-license/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-a-drivers-license/index.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
+* [**Show Result Texts on the Video**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video.
+* [**Locate an Item with Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html?utm_source=sampleReadme): Find a specific item in a large collection by scanning its unique barcode
 
 ***Others***
 

foundational-api-samples/hello-world/react/README.md

@@ -200,12 +200,7 @@ class VideoCapture extends React.Component {
       this.cameraEnhancer?.dispose();
     } catch (_) {}
   }
-
-  shouldComponentUpdate() {
-    // Never update UI after mount, sdk use native way to bind event, update will remove it.
-    return false;
-  }
-
+  
   render() {
     return (
       <div>

foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.tsx

@@ -9,7 +9,7 @@ const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 class VideoCapture extends React.Component {
   state = {
-    resultText: ""
+    resultText: "",
   };
   cameraViewContainer: React.RefObject<HTMLDivElement> = React.createRef();
 
@@ -47,13 +47,13 @@ class VideoCapture extends React.Component {
       this.cvRouter.addResultReceiver({
         onDecodedBarcodesReceived: (result) => {
           if (!result.barcodeResultItems.length) return;
-          
+
           let _resultText = "";
           console.log(result);
           for (let item of result.barcodeResultItems) {
             _resultText += `${item.formatString}: ${item.text}\n\n`;
           }
-          this.setState({resultText: _resultText})
+          this.setState({ resultText: _resultText });
         },
       });
 
@@ -102,15 +102,10 @@ class VideoCapture extends React.Component {
     } catch (_) {}
   }
 
-  shouldComponentUpdate() {
-    // Never update UI after mount, sdk use native way to bind event, update will remove it.
-    return false;
-  }
-
   render() {
     return (
       <div>
-        <div ref={this.cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
+        <div ref={this.cameraViewContainer} style={{ width: "100%", height: "70vh" }}></div>
         <br />
         Results:
         <div className="results">{this.state.resultText}</div>