You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1.hello-world/README.md
+12-4Lines changed: 12 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,11 +33,11 @@ In this sample, a listener is set up so that the SDK decodes any image that the
33
33
34
34
### Hello World - Angular
35
35
36
-
This sample demonstrates how to use the library in an Angular application in the most basic manner.
36
+
This sample demonstrates how to use the library in an Angular application in the most basic manner.[Angular CLI](https://github.com/angular/angular-cli) v11.2.4 is used to generate this sample project.
37
37
38
38
As mentioned in the user guide, when working with Angular aplications, it is recommended to use the `dynamsoft-javascript-barcode` npm package. The library is then set up as its own component, in this case defined in `barcode-scanner`.
39
39
40
-
The majority of the `DBR` (short for Dynamsoft Barcode Reader) operations are grouped in the `barcode-scanner` folder. Since we are using the npm package, the engine files are not in the same location as the main library file, `dbr.ts`. Therefore, the `engineResourcePath` must be defined so that the library knows where to find the engine files.
40
+
The majority of the `DBR` (short for Dynamsoft Barcode Reader) operations are grouped in the `barcode-scanner` folder. Since we are using the npm package, the engine files are not in the same location as the main library file, `src/app/dbr.ts`. Therefore, the `engineResourcePath` must be defined so that the library knows where to find the engine files.
41
41
42
42
In our sample, we assign the `engineResourcePath` to our jsDelivr CDN URL as it is the easiest way to go. However, you can choose to use the engine files in installed npm package instead as such:
43
43
```js
@@ -58,8 +58,16 @@ Let's do a quick breakdown of the `barcode-scanner` folder where the barcode sca
58
58
The `hello-world` component in turn implements the `barcode-scanner` component, with the main operation being defined in `hello-world.component.ts` and the UI in `hello-world.component.html`.
59
59
60
60
### Hello World - React JS
61
-
Much like the Angular implementation, the library is set up as its own component, based on the npm package `dynamsoft-javascript-barcode`.
61
+
Much like the Angular implementation, the library is set up as its own component in the React JS implementation, based on the npm package `dynamsoft-javascript-barcode`. This sample project is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
62
62
63
63
The barcode scanner component is defined in the `components` folder. `BarcodeScanner.js` is the most basic implementation of the library as a React component. The `BarcodeScanner` component is then used in the parent component, `HelloWorld`.
64
64
65
-
Please note that since we are using the npm package, the `engineResourcePath` must be defined in the `dbr.js` file, similar to the Angular implementation. In addition, the license must be specified via `organizationID` or `productKeys`, depending on the version of the library you are using.
65
+
Please note that since we are using the npm package, the `engineResourcePath` must be defined in the `src/dbr.js` file, similar to the Angular implementation. In addition, the license must be specified via `organizationID` or `productKeys`, depending on the version of the library you are using.
66
+
67
+
### Hello World - Vue JS
68
+
The Vue implementation of the Hello World sample is very similar to the React and Angular implementations. Of course, this implementation will be based on the npm package `dynamsoft-javascript-barcode`.
69
+
70
+
The `BarcodeScanner.vue` component, defined in the `components` folder, includes the basic `DBR` methods to get the video scanner up and running. The `BarcodeScanner.vue` component is then used in the parent component, `HelloWorld`.
71
+
72
+
Like the previous implementations, the `engineResourcePath` and license will need to be defined in `src/dbr.js`
In this sample set, we will focus on the library's flexible UI that allows developers to create the look and feel for their web application that they desire. To learn more about UI customization, please refer to its corresponding [section](https://github.com/Dynamsoft/javascript-barcode#233-customize-the-ui) in the user guide.
4
+
5
+
Let's begin by breaking down each of the samples in this set
6
+
7
+
### Read Barcodes via Video and Display Results
8
+
9
+
In this sample, we perform simple tweak of the default UI to include a couple of `span` elements that will display the barcode text and barcode format as they are detected via video. Our basic 'Hello World' samples displayed the results in the console or via an alert box, so this sample will offer a more user-friendly way of showing the results as they are found.
10
+
11
+
In the `onFrameRead` event function, a pair of `span` elements are created for each found barcode. The `span` elements are then populated with the barcode text and the barcode format. Afterwards, the scanner UI (via `getUIElement`) is appended to the newly created `span` elements to complete this custom UI.
0 commit comments