9.x

1.hello-world/3.read-video-angular/README.md

@@ -1,10 +1,10 @@
-# Hello-world for Angular - Dynamsoft Barcode Reader Sample
+# Hello World Sample for Angular
 
 [Angular](https://angular.io/) is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Angular application.
 
 ## Official Sample
 
-* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/">Hello World in Angular - Demo</a>
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/read-video-angular/">Hello World in Angular - Demo</a>
 * <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/3.read-video-angular">Hello World in Angular - Source Code</a>
 
 ## Preparation
@@ -16,11 +16,10 @@ Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.ang
 ### Create an out-of-the-box raw Angular application 
 
 ```cmd
-npm install -g @angular/cli
 ng new my-app
 ```
 
-### **CD** to the root directory of the application and install the library
+### **CD** to the root directory of the application and install necessary library
 
 ```cmd
 cd my-app
@@ -43,11 +42,11 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas
 > * `engineResourcePath` tells the library where to get the necessary resources at runtime.
 
 ### Generate three components
-* `video-decode` component help read barcode from camera.
+* `video-decode` component helps read barcode from camera.
 ```cmd
 ng generate component video-decode
 ```
-* `img-decode` component help read barcode from still images.
+* `img-decode` component helps read barcode from still images.
 ```cmd
 ng generate component img-decode
 ```
@@ -90,7 +89,7 @@ export class VideoDecodeComponent implements OnInit {
       await scanner.open();
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes('network connection error')) {
+      if (ex?.message.includes('network connection error')) {
         errMsg =
           'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.';
       } else {
@@ -160,7 +159,7 @@ export class ImgDecodeComponent implements OnInit {
       if (!results.length) { alert('No barcode found'); }
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes("network connection error")) {
+      if (ex?.message.includes("network connection error")) {
         errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
       } else {
         errMsg = ex.message||ex;
@@ -258,7 +257,7 @@ export class HelloWorldComponent implements OnInit {
       await BarcodeScanner.loadWasm();
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes("network connection error")) {
+      if (ex?.message.includes("network connection error")) {
         errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
       } else {
         errMsg = ex.message||ex;
@@ -308,4 +307,4 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
 
 ## 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/sdk-javascript/) via the "Let's Chat" button.
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/3.read-video-angular/src/app/hello-world/hello-world.component.ts

@@ -16,7 +16,7 @@ export class HelloWorldComponent implements OnInit {
       await BarcodeScanner.loadWasm();
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes("network connection error")) {
+      if (ex?.message.includes("network connection error")) {
         errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
       } else {
         errMsg = ex.message||ex;

1.hello-world/3.read-video-angular/src/app/img-decode/img-decode.component.ts

@@ -9,19 +9,21 @@ import { BarcodeReader } from 'dynamsoft-javascript-barcode'
 export class ImgDecodeComponent implements OnInit {
   pReader: Promise<BarcodeReader> | null = null;
 
-  async ngOnInit(): Promise<void> { }
+  async ngOnInit(): Promise<void> { 
+    this.pReader = BarcodeReader.createInstance();
+  }
 
   decodeImg = async (e: any) => {
     try {
-      const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance());
+      const reader = await this.pReader;
       const results = await reader.decode(e.target.files[0]);
       for (const result of results) {
         alert(result.barcodeText);
       }
       if (!results.length) { alert('No barcode found'); }
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes("network connection error")) {
+      if (ex?.message.includes("network connection error")) {
         errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
       } else {
         errMsg = ex.message||ex;
@@ -35,7 +37,7 @@ export class ImgDecodeComponent implements OnInit {
   async ngOnDestroy() {
     if (this.pReader) {
       (await this.pReader).destroyContext();
-      console.log('ImgDecode Component Unmount');
     }
+    console.log('ImgDecode Component Unmount');
   }
 }

1.hello-world/3.read-video-angular/src/app/video-decode/video-decode.component.ts

@@ -25,7 +25,7 @@ export class VideoDecodeComponent implements OnInit {
       await scanner.open();
     } catch (ex: any) {
       let errMsg;
-      if (ex.message.includes('network connection error')) {
+      if (ex?.message.includes('network connection error')) {
         errMsg =
           'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.';
       } else {
@@ -38,7 +38,7 @@ export class VideoDecodeComponent implements OnInit {
   async ngOnDestroy() {
     if (this.pScanner) {
       (await this.pScanner).destroyContext();
-      console.log('BarcodeScanner Component Unmount');
     }
+    console.log('BarcodeScanner Component Unmount');
   }
 }

1.hello-world/4.read-video-react/README.md

@@ -1,6 +1,6 @@
-# JavaScript Hello World Sample - React
+# Hello World Sample for React
 
-[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and define components as classes. Also, there is another sample `read-video-react-hooks` showing using `Hooks` in React.
+[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and define components as classes. Also, there is another sample `read-video-react-hooks` using `Hooks` in React.
 
 ## Official Sample
 
@@ -9,7 +9,7 @@
 
 ## Preparation
 
-Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` used in the example below.
+Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `react 18.2.0` are used in the example below.
 
 ## Create the sample project
 
@@ -19,7 +19,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `re
 npx create-react-app read-video-react --template typescript
 ```
 
-### **CD** to the root directory of the application and install the library
+### **CD** to the root directory of the application and install necessary library
 
 ```cmd
 cd read-video-react
@@ -365,4 +365,4 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 ## 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/sdk-javascript/) via the "Let's Chat" button.
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/5.read-video-vue/README.md

@@ -1,4 +1,4 @@
-# JavaScript Hello World Sample - Vue
+# Hello World Sample for Vue
 
 [Vue](https://vuejs.org/) is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 2 application.
 
@@ -19,7 +19,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `vu
 npm create vue@2
 ```
 
-### **CD** to the root directory of the application and install the dependencies
+### **CD** to the root directory of the application and install necessary libraries
 
 ```cmd
 npm install
@@ -494,3 +494,7 @@ npm run dev
 ```sh
 npm run build
 ```
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/6.read-video-vue3/README.md

@@ -1,6 +1,6 @@
-# JavaScript Hello World Sample - Vue 3
+# Hello World Sample for Vue3
 
-[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 3 application. Note that in this sample we will use `TypeScript`.
+[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Vue 3 application. Note that in this sample, `TypeScript` is used.
 
 ## Official Sample
 
@@ -20,7 +20,7 @@ npm create vue@3
 # When asked 'Add TypeScript?', select 'Yes'.
 ```
 
-### **CD** to the root directory of the application and install the dependencies
+### **CD** to the root directory of the application and install necessary libraries
 
 ```cmd
 npm install
@@ -445,6 +445,23 @@ npm run dev
 
 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.
 
+### Comment out the following code in `assets/main.css`. (optional)
+
+```css
+@media (min-width: 1024px) {
+  /* body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  } */
+}
+```
+
 ## Project Setup
 
 ```sh
@@ -462,3 +479,7 @@ npm run dev
 ```sh
 npm run build
 ```
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/7.read-video-nextjs/README.md

@@ -1,6 +1,6 @@
-# JavaScript Hello World Sample - Next.js
+# Hello World Sample for Next.js
 
-[Next.js](https://nextjs.org/) is an open-source development framework built on top of Node.js enabling [React](https://reactjs.org/) based web applications functionalities such as server-side rendering and generating static websites. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Next.js application. Note that in this sample we will use `TypeScript`.
+[Next.js](https://nextjs.org/) is an open-source development framework built on top of Node.js enabling [React](https://reactjs.org/) based web applications functionalities such as server-side rendering and generating static websites. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Next.js application. Note that in this sample `TypeScript` is used.
 
 ## Official Sample
 
@@ -18,7 +18,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.21.3` and `ne
 npx create-next-app@latest --typescript
 ```
 
-### **CD** to the root directory of the application and install the dependencies
+### **CD** to the root directory of the application and install the dependency
 
 ```cmd
 npm install dynamsoft-javascript-barcode
@@ -203,7 +203,7 @@ export default class ImgDecode extends Component {
 }
 ```
 
-### Edit the HelloWorld component
+### Edit the `HelloWorld` component
 
 * Add `VideoDecode` and `ImgDecode` components in HelloWorld.tsx
 
@@ -303,7 +303,7 @@ export default HelloWorld;
 }
 ```
 
-### Add the HelloWorld component to /pages/index.tsx
+### Add the `HelloWorld` component to /pages/index.tsx
 
 In index.tsx, import the `HelloWorld` component:
 
@@ -356,4 +356,8 @@ npm run dev
 
 ```sh
 npm run build
-```
+```
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/8.read-video-nuxtjs/README.md

@@ -1,6 +1,6 @@
 # JavaScript Hello World Sample - NuxtJS
 
-[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample we will use `TypeScript`.
+[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used.
 
 ## Official Sample
 
@@ -24,6 +24,7 @@ You will be asked to configure quite a few things for the application during the
 
 ```cmd
 cd read-video-nuxtjs
+npm install
 npm install dynamsoft-javascript-barcode
 ```
 
@@ -50,9 +51,7 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas
 
 ### Edit the `VideoDecode` component
 
-* Add a file `VideoDecode.vue` under "/components/" as the `VideoDecode` component. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera.
-
-* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance.
+* In `VideoDecode.vue`, add code for initializing and destroying the `BarcodeScanner` instance. The `VideoDecode` component uses `BarcodeScanner` class of the library to help decode barcodes via camera.
 
 ```vue
 <script setup lang="ts">
@@ -283,9 +282,7 @@ onBeforeUnmount(async () => {
 
 ### Edit the `ImgDecode` component
 
-* Add a file `ImgDecode.vue` under "/components/" as the `ImgDecode` component. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image.
-
-* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance.
+* In `ImgDecode.vue`, add code for initializing and destroying the `BarcodeReader` instance. The `ImgDecode` component uses `BarcodeReader` class of the library to help decode barcodes in an image.
 
 ```vue
 <script setup lang="ts">
@@ -428,7 +425,7 @@ h1 {
 
 ### Add the `HelloWorld` component to `app.vue`
 
-Edit the file `App.vue` to be like this
+Edit the file `app.vue` to be like this
 
 ```vue
 <template>
@@ -462,4 +459,8 @@ npm run dev
 
 ```sh
 npm run build
-```
+```
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

1.hello-world/9.read-video-electron/README.md

@@ -1,4 +1,4 @@
-# JavaScript Hello World Sample - Electron
+# Hello World Sample for Electron
 
 [Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Electron application.
 
@@ -12,7 +12,7 @@ Make sure you have [node](https://nodejs.org/) installed. `node 14.16.0` is used
 
 ## Create an empty Application
 
-Create a folder with the name "read-video-electron" and a package.json file inside it with the following content:
+Create a folder with the name "read-video-electron" and a `package.json` file inside it with the following content:
 
 ```json
 {
@@ -40,9 +40,9 @@ npm install
 
 ## Start to implement
 
-### Create a main.js file
+### Create a `main.js` file
 
-As defined in the package.json file, main.js is the entry point of the application, we define it like this:
+As defined in the `package.json` file, `main.js` is the entry point of the application, we define it like this:
 
 ```javascript
 const { app, BrowserWindow } = require('electron')
@@ -76,7 +76,7 @@ Two modules are imported in this file:
 * `app`: controls the application's event lifecycle.
 * `BrowserWindow`: creates and manages application windows.
 
-The code basically opens index.html in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start).
+The code basically opens `index.html` in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start).
 
 ### Create an index.html file
 
@@ -174,3 +174,7 @@ Run the application with the following command and see how it goes.
 ```cmd
 npm start
 ```
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).