Merge pull request #104 from Dynamsoft-Ethan/_dev

Cube · web-flow · commit 6eed5d8da8ae · 2023-03-21T15:28:03.000+08:00
Dev
diff --git a/1.hello-world/10.read-video-pwa/README.md b/1.hello-world/10.read-video-pwa/README.md
@@ -127,7 +127,7 @@ For more information, refer to [Making PWAs work offline with Service workers](h
 
 ### Use a web manifest file to make the application installable
 
-A web manifest file lists all the information about the website in a JSON format. With this information, the web app can be properly presented for installation.
+A web manifest file contains a list of information about a website in a JSON format. This information is used to present the web app correctly for installation on a device.
 
 In our example, we first create a file "helloworld-pwa.webmanifest" with the following content:
 
@@ -176,7 +176,7 @@ For compatibility on safari, we need add some `meta` in `<head>`:
 <link rel="apple-touch-icon" sizes="512x512" href="./dynamsoft-512x512.png" />
 ```
 
-Now open the application again in the browser, you will notice an install icon appear at the right side of the address bar. When you click it, a pop up will come up and ask whether you want to install this app.
+Now, if you open the application again in your browser, you will notice an install icon appear on the right side of the address bar. When you click on it, a pop-up will appear asking if you want to install the app.
 
 ![Install App](./assets/pwa-1.png)
 
diff --git a/1.hello-world/3.read-video-angular/README.md b/1.hello-world/3.read-video-angular/README.md
@@ -112,11 +112,10 @@ export class VideoDecodeComponent implements OnInit {
 >
 > * The method `createInstance()` is called to initialize the library as soon as the component initializes.
 > * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `ngOnDestroy` .
-> * The method `setUIElement()` specifies the UI for the library with the native element in `video-decode.component.html` which we just copied over in the previous step.
-
+> * The `setUIElement()` method is used to define the user interface (UI) for the library using the native element in `video-decode.component.html`, which was copied in the previous step.
 ### Edit the img-decode component
 
-* Replace the original code in `img-decode.component.html` with code below for offering a `input` element to select a local image.
+* Replace the original code in `img-decode.component.html` with code below to select a local image via `input` element.
 
 ```html
 <div class="ImgDecode"><input type="file" (change)="decodeImg($event)"/></div>
@@ -309,7 +308,7 @@ Edit the file `app.component.html` to contain nothing but the following
 ng serve
 ```
 
-If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
 
 ## Development server
 
diff --git a/1.hello-world/4.read-video-react/README.md b/1.hello-world/4.read-video-react/README.md
@@ -47,7 +47,7 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas
 
 ### Create and edit the `VideoDecode` component
 
-* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera.
+* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to decode barcodes via camera.
 
 * In `VideoDecode.tsx`, add code for initializing and destroying the `BarcodeScanner` instance.
 
@@ -398,7 +398,7 @@ export default App;
 npm start
 ```
 
-If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
 
 ## Development server
 
diff --git a/1.hello-world/6.read-video-vue3/README.md b/1.hello-world/6.read-video-vue3/README.md
@@ -457,7 +457,7 @@ import HelloWorld from './components/HelloWorld.vue'
 npm run dev
 ```
 
-If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
 
 ## Project Setup
 
diff --git a/1.hello-world/7.read-video-nextjs/README.md b/1.hello-world/7.read-video-nextjs/README.md
@@ -298,7 +298,7 @@ Change the &lt;main&gt; tag like this:
 npm run dev
 ```
 
-If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
 
 ## Project Setup
 
diff --git a/1.hello-world/8.read-video-nuxtjs/README.md b/1.hello-world/8.read-video-nuxtjs/README.md
@@ -458,7 +458,7 @@ Edit the file `App.vue` to be like this
 npm run dev
 ```
 
-If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Image Decode` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
 
 ## Project Setup
 
diff --git a/1.hello-world/9.read-video-electron/README.md b/1.hello-world/9.read-video-electron/README.md
@@ -169,7 +169,7 @@ body {
 
 ## Run the application
 
-Run the application with the following command and see how it works.
+Run the application with the following command and see how it goes.
 
 ```cmd
 npm start
diff --git a/1.hello-world/README.md b/1.hello-world/README.md
@@ -1,32 +1,32 @@
 # The Hello World Sample Set
 
-As you have gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#getting-started---hello-world), you might have seen some basic "Hello World" code to help you quickly create a basic web application that uses our SDK.
+As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly.
 
-This sample set will revisit the Hello World code, and its implementation in some of the popular frameworks such as Angular, React, an Vue.
+In this set of samples, we will revisit the "Hello World" code and show how to implement it using some popular frameworks, such as Angular, React, and Vue.
 
-Let's break down each of the samples
+Let's now go through each of the samples.
 
 ## Hello World - Read Barcodes via Video
 
-In this sample, you will find the basic lines of code necessary to initialize the SDK and set it up.
+In this example, you will learn the minimum codes required to initialize and set up the SDK.
 
 Let's quickly break down the methods used in order:
 
-* `license`: This property specifies a license key. Read more on Specify the license.
+* `license`: This property specifies a license key.
 * `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.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique 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 on unique reads.
 * `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.
+Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, rather than on every frame.
 
 ## Hello World - Read Barcodes from an Image
 
-The second sample in this set focuses on the secondary class `BarcodeReader` which is a low-level barcode reader that processes still images and returns barcode results.
+The second sample in this set focuses on the secondary class `BarcodeReader` which is a low-level barcode reader that processes static images and returns barcode results.
 
-In this sample, a event listener is set up so that the SDK decodes any image that the user uploads.
+In this sample, an event listener is set up so that the SDK decodes any images that the user uploads.
 
-[`decode`](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode) is the main method to go for when using the `BarcodeReader` class, although the class offers a number of other methods should you work with base64 strings, for instance. The rest of the image decoding methods can be found [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode-barcodes).
+When working with the BarcodeReader class, the main method to use is [`decode`](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode), although the class provides several other methods if you need to work with base64 strings or other formats. You can find the rest of the image decoding methods [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode-barcodes).
 
 ## Hello World in Angular
 
@@ -70,27 +70,27 @@ 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.
+* `license`: This property specifies a license key.
 * `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.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique 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 on unique reads.
 * `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.
+Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, 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.
+* `license`: This property specifies a license key.
 * `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.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is unique 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 on unique reads.
 * `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.
+Actually, it is not necessary to define both onFrameRead and onUniqueRead in the code. onUniqueRead is more commonly used because it is triggered only when a new barcode is detected, rather than on every frame.
 
 ## Hello World with WebView
 
diff --git a/2.ui-tweaking/README.md b/2.ui-tweaking/README.md
@@ -22,12 +22,12 @@ If you check the GUI on the demo page, you will find that it consists of the fol
 There are a few other elements
 
 * Before the video starts streaming, there is a spinner that indicates the loading process
-* When a barcode is found, the location of the barcode is highlighted in the video stream
+* When a barcode is found, the barcode is highlighted with an overlay
 * If no camera is found on the device or camera access is denied on the page, the GUI will show a camera icon, which, when clicked, allows the user to select a local image or invoke the system camera interface
 
 ## Hide Built-in Controllers
 
-As mentioned above, the default UI comes with quite a few elements. Some of them might not fit the style of your own application. The following code snippet removes the camera selector, the resolution selector, the close button as well as changes the backgournd color.
+The default UI of the BarcodeReader class includes several elements that may not match the style of your application. The following code snippet demonstrates how to remove the camera selector, resolution selector, and close button, as well as change the background color:
 
 ```html
 <div id="UIElement">
@@ -85,22 +85,22 @@ For more related customization, check out the following official sample:
 
 The library is usually used on mobile devices which have small screens. When scanning barcodes with the mobile camera, the video stream will be limited in the video element and may not be clear enough. Ideally, we should use the whole screen to play the video and find barcodes.
 
-The GUI is pure HTML, so changing the size of the element is very easy. For example, the following enlarges the element to be the full size of the viewport.
+The GUI is pure HTML. Thus modifying the size of the element is easy. The following code expands the element to fill the entire viewport:
 
 ```javascript
 document.getElementById('UIElement').style.height = '100vh';
 document.getElementById('UIElement').style.width = '100vw';
 document.getElementById('UIElement').style.position = 'absolute';
 ```
 
-Check out the following sample on how to enlarge the video stream to read a barcode and then change it back to its normal size.
+Check out the following example code to see how you can expand the video stream to read a barcode and then restore it to its normal size:
 
 * <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/2.ui-tweaking/4.difference-video-size.html">Enlarge the Video Stream - Demo</a>
 * <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/2.ui-tweaking/4.difference-video-size.html">Enlarge the Video Stream - Source Code</a>
 
 ## Customize the Default Ui
 
-Check out the following sample, that shows a customized viewer that differs greatly from the default one which demonstrates the possibility in the customization:
+Check out the following example code that demonstrates how to create a custom viewer that is vastly different from the default one. You can feel the possibilities of customization:
 
 * <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/2.ui-tweaking/5.read-video-with-custom-default-ui.html">Customize the Default Ui - Demo</a>
 * <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/2.ui-tweaking/5.read-video-with-custom-default-ui.html">Customize the Default Ui - Source Code</a>
diff --git a/3.settings/README.md b/3.settings/README.md
diff --git a/4.use-case/README.md b/4.use-case/README.md
diff --git a/5.others/debug/README.md b/5.others/debug/README.md
diff --git a/README.md b/README.md
