Skip to content

Commit 5197a88

Browse files
Ethan's review
1 parent 10be6ab commit 5197a88

File tree

13 files changed

+62
-64
lines changed

13 files changed

+62
-64
lines changed

1.hello-world/10.read-video-pwa/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ For more information, refer to [Making PWAs work offline with Service workers](h
127127
128128
### Use a web manifest file to make the application installable
129129
130-
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.
130+
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.
131131
132132
In our example, we first create a file "helloworld-pwa.webmanifest" with the following content:
133133
@@ -176,7 +176,7 @@ For compatibility on safari, we need add some `meta` in `<head>`:
176176
<link rel="apple-touch-icon" sizes="512x512" href="./dynamsoft-512x512.png" />
177177
```
178178

179-
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.
179+
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.
180180

181181
![Install App](./assets/pwa-1.png)
182182

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,10 @@ export class VideoDecodeComponent implements OnInit {
112112
>
113113
> * The method `createInstance()` is called to initialize the library as soon as the component initializes.
114114
> * To release resources timely, the `BarcodeScanner` instance is destroyed with the component in the callback `ngOnDestroy` .
115-
> * 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.
116-
115+
> * 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.
117116
### Edit the img-decode component
118117

119-
* Replace the original code in `img-decode.component.html` with code below for offering a `input` element to select a local image.
118+
* Replace the original code in `img-decode.component.html` with code below to select a local image via `input` element.
120119

121120
```html
122121
<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
309308
ng serve
310309
```
311310

312-
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.
311+
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.
313312

314313
## Development server
315314

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javas
4747

4848
### Create and edit the `VideoDecode` component
4949

50-
* 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.
50+
* Create `VideoDecode.tsx` and `VideoDecode.css` under "/src/components/VideoDecode/". The `VideoDecode` component uses `BarcodeScanner` class of the library to decode barcodes via camera.
5151

5252
* In `VideoDecode.tsx`, add code for initializing and destroying the `BarcodeScanner` instance.
5353

@@ -398,7 +398,7 @@ export default App;
398398
npm start
399399
```
400400

401-
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.
401+
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.
402402

403403
## Development server
404404

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@ import HelloWorld from './components/HelloWorld.vue'
457457
npm run dev
458458
```
459459

460-
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.
460+
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.
461461

462462
## Project Setup
463463

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ Change the &lt;main&gt; tag like this:
298298
npm run dev
299299
```
300300

301-
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.
301+
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.
302302

303303
## Project Setup
304304

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ Edit the file `App.vue` to be like this
458458
npm run dev
459459
```
460460

461-
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.
461+
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.
462462

463463
## Project Setup
464464

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ body {
169169

170170
## Run the application
171171

172-
Run the application with the following command and see how it works.
172+
Run the application with the following command and see how it goes.
173173

174174
```cmd
175175
npm start

1.hello-world/README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
# The Hello World Sample Set
22

3-
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.
3+
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.
44

5-
This sample set will revisit the Hello World code, and its implementation in some of the popular frameworks such as Angular, React, an Vue.
5+
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.
66

7-
Let's break down each of the samples
7+
Let's now go through each of the samples.
88

99
## Hello World - Read Barcodes via Video
1010

11-
In this sample, you will find the basic lines of code necessary to initialize the SDK and set it up.
11+
In this example, you will learn the minimum codes required to initialize and set up the SDK.
1212

1313
Let's quickly break down the methods used in order:
1414

15-
* `license`: This property specifies a license key. Read more on Specify the license.
15+
* `license`: This property specifies a license key.
1616
* `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.
1717
* `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.
18-
* `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.
18+
* `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.
1919
* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
2020

21-
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.
21+
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.
2222

2323
## Hello World - Read Barcodes from an Image
2424

25-
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.
25+
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.
2626

27-
In this sample, a event listener is set up so that the SDK decodes any image that the user uploads.
27+
In this sample, an event listener is set up so that the SDK decodes any images that the user uploads.
2828

29-
[`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).
29+
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).
3030

3131
## Hello World in Angular
3232

@@ -70,27 +70,27 @@ This sample shows how to use the SDK in a web page based on RequireJS.
7070

7171
Let's quickly break down the methods used in order:
7272

73-
* `license`: This property specifies a license key. Read more on Specify the license.
73+
* `license`: This property specifies a license key.
7474
* `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.
7575
* `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.
76-
* `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.
76+
* `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.
7777
* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
7878

79-
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.
79+
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.
8080

8181
## Hello World with ES6
8282

8383
This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6).
8484

8585
Let's quickly break down the methods used in order:
8686

87-
* `license`: This property specifies a license key. Read more on Specify the license.
87+
* `license`: This property specifies a license key.
8888
* `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.
8989
* `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.
90-
* `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.
90+
* `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.
9191
* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
9292

93-
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.
93+
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.
9494

9595
## Hello World with WebView
9696

2.ui-tweaking/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ If you check the GUI on the demo page, you will find that it consists of the fol
2222
There are a few other elements
2323

2424
* Before the video starts streaming, there is a spinner that indicates the loading process
25-
* When a barcode is found, the location of the barcode is highlighted in the video stream
25+
* When a barcode is found, the barcode is highlighted with an overlay
2626
* 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
2727

2828
## Hide Built-in Controllers
2929

30-
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.
30+
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:
3131

3232
```html
3333
<div id="UIElement">
@@ -85,22 +85,22 @@ For more related customization, check out the following official sample:
8585

8686
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.
8787

88-
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.
88+
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:
8989

9090
```javascript
9191
document.getElementById('UIElement').style.height = '100vh';
9292
document.getElementById('UIElement').style.width = '100vw';
9393
document.getElementById('UIElement').style.position = 'absolute';
9494
```
9595

96-
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.
96+
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:
9797

9898
* <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>
9999
* <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>
100100

101101
## Customize the Default Ui
102102

103-
Check out the following sample, that shows a customized viewer that differs greatly from the default one which demonstrates the possibility in the customization:
103+
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:
104104

105105
* <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>
106106
* <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>

0 commit comments

Comments
 (0)