|
| 1 | +# The Hello World Sample Set |
| 2 | + |
| 3 | +As you have gone through the user guide, you might have seen some basic "Hello World" code to help you quickly create a basic web application that uses our SDK. |
| 4 | + |
| 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. |
| 6 | + |
| 7 | +Let's break down each of the samples |
| 8 | + |
| 9 | +### Hello World - Read Barcodes via Video |
| 10 | + |
| 11 | +In this sample, you will find the basic lines of code ncessary to initialize the library and set it up. |
| 12 | + |
| 13 | +Please note that if no license is specified in code via the `organizationID` property or the `productKeys` property, as shown in the commented lines of code, a 7-day public trial will be used starting from v8.2.5. In earlier versions, an error will be thrown if no license, trial or full, is specified. |
| 14 | + |
| 15 | +Let's quickly break down the methods used in order: |
| 16 | + |
| 17 | +- `createInstance`: This method instantiates a `BarcodeReader` object or a `BarcodeScanner` object, depending on the scenario. |
| 18 | + |
| 19 | +- `onFrameRead`: This event is triggered after each single frame is scanned. The `results` object contains all the barcode results that the library found on this frame. In the above code, the results found in every frame are printed to the console. |
| 20 | + |
| 21 | +- `onUnduplicatedRead`: This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode. In this example, an alert will be displayed for each unique barcode found. |
| 22 | + |
| 23 | +- `show`: Displays the UI of the `BarcodeScanner` object and starts the scanning process. |
| 24 | + |
| 25 | +In fact, `onFrameRead` and `onUnduplicatedRead` do not have to both be defined in the code. `onUnduplicatedRead` is the more used one between the two as it is triggered when a new barcode is found rather than on every frame. |
| 26 | + |
| 27 | +### Hello World - Read Barcodes from an Image |
| 28 | +The second sample in this set focusses on the secondary class of the JavaScript edition, `BarcodeReader`. To learn of the exact differences between the `BarcodeScanner` and `BarcodeReader` classes, please refer to the *BarcodeReader vs BarcodeScanner* section of the [User Guide](https://github.com/Dynamsoft/javascript-barcode#readme). |
| 29 | + |
| 30 | +In this sample, a listener is set up so that the SDK decodes any image that the user uploads. Please note that the [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) API is used to read the uploaded file and convert it to a format suitable for the `BarcodeReader` API. |
| 31 | + |
| 32 | +[`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-barcode). |
| 33 | + |
| 34 | +### Hello World - Angular |
| 35 | + |
| 36 | + |
| 37 | + |
0 commit comments