Skip to content

Commit 7c6c6b2

Browse files
Shen-wbDMGithubPublisher
Shen-wb
and
DMGithubPublisher
authored
Dev (#160)
* 11.2.2000 * Delete updateAllDevDeps.js * Delete zip-guide.md --------- Co-authored-by: DMGithubPublisher <[email protected]>
1 parent c295942 commit 7c6c6b2

26 files changed

+722
-361
lines changed

‎README.html‎

Lines changed: 48 additions & 41 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript
22

3+
<!-- Don't forget to add the TOC & update license section, which is useful for npm README.-->
4+
- [Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript](#build-a-web-based-barcode-scanner-using-just-a-few-lines-of-javascript)
5+
- [License](#license)
6+
- [Quick Start: Hello World Example](#quick-start-hello-world-example)
7+
- [Step 1: Setting up the HTML and Including the Barcode Scanner](#step-1-setting-up-the-html-and-including-the-barcode-scanner)
8+
- [Step 2: Initializing the Barcode Scanner](#step-2-initializing-the-barcode-scanner)
9+
- [Step 3: Launching the Barcode Scanner](#step-3-launching-the-barcode-scanner)
10+
- [Next Steps](#next-steps)
11+
312
This user guide provides a step-by-step walkthrough of a "Hello World" web application using the `BarcodeScanner` JavaScript Edition.
413

514
The `BarcodeScanner` class offers the following features:
@@ -35,26 +44,19 @@ new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults
3544
3645
## License
3746

38-
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license. -->
39-
4047
When getting started with Barcode Scanner, we recommend [getting your own 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=github&package=js)
4148

42-
<!-- {% include trialLicense.html %} -->
43-
44-
> [!IMPORTANT]
45-
> The trial license can be renewed via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense/?product=dbr&utm_source=github&package=js) twice, each time for another 15 days, giving you a total of 60 days to develop your own application using the solution. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) if you need more time for a full evaluation.
49+
<!-- When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
4650
47-
### Full License
48-
49-
If you are fully satisfied with the solution and would like to move forward with a full license, please contact the [Dynamsoft Sales Team](https://www.dynamsoft.com/company/contact/).
51+
{% include trialLicense.html %} -->
5052

5153
## Quick Start: Hello World Example
5254

5355
```html
5456
<!DOCTYPE html>
5557
<html lang="en">
5658
<body>
57-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
59+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
5860
<script>
5961
// Initialize the Dynamsoft Barcode Scanner
6062
const barcodeScanner = new Dynamsoft.BarcodeScanner({
@@ -75,35 +77,35 @@ If you are fully satisfied with the solution and would like to move forward with
7577
```
7678

7779
<p align="center" style="text-align:center; white-space: normal; ">
78-
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
80+
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.20/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
7981
<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
8082
</a>
8183
&nbsp;
8284
<a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/" title="Run via JSFiddle" style="text-decoration:none;">
8385
<img src="https://cdn.jsdelivr.net/npm/[email protected]/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
8486
</a>
8587
&nbsp;
86-
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.0.60&utm_source=github" title="Run in Dynamsoft" style="text-decoration:none;">
88+
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.20&utm_source=github" title="Run in Dynamsoft" style="text-decoration:none;">
8789
<img src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
8890
</a>
8991
</p>
9092

9193
### Step 1: Setting up the HTML and Including the Barcode Scanner
9294

93-
As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60).
95+
As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.20).
9496

9597
The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
9698

9799
```html
98100
<!DOCTYPE html>
99101
<html lang="en">
100102
<body>
101-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
103+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
102104
</body>
103105
</html>
104106
```
105107

106-
In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
108+
In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the body.
107109

108110
<div class="multi-panel-switching-prefix"></div>
109111

@@ -115,24 +117,24 @@ The simplest way to include the SDK is to use either the [**jsDelivr**](https://
115117
- jsDelivr
116118

117119
```html
118-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
120+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
119121
```
120122

121123
- UNPKG
122124

123125
```html
124-
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
126+
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
125127
```
126128

127129
When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
128130

129131
```sh
130-
npm i dynamsoft-barcode-reader-bundle@11.0.6000
132+
npm i dynamsoft-barcode-reader-bundle@11.2.2000
131133
# or
132-
yarn add dynamsoft-barcode-reader-bundle@11.0.6000
134+
yarn add dynamsoft-barcode-reader-bundle@11.2.2000
133135
```
134136

135-
As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
137+
When using package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
136138
<div class="multi-panel-end"></div>
137139

138140
<div class="multi-panel-start"></div>
@@ -142,25 +144,25 @@ Alternatively, you may choose to download the SDK and host the files on your own
142144

143145
- From the website
144146

145-
[Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=github&product=dbr&package=js)
147+
[Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.2.20&utm_source=github&product=dbr&package=js)
146148

147149
The resources are located in the `./dist/` directory.
148150

149151
- From npm
150152

151153
```sh
152-
npm i dynamsoft-barcode-reader-bundle@11.0.6000
154+
npm i dynamsoft-barcode-reader-bundle@11.2.2000
153155
```
154156

155157
The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You can copy it elsewhere and add `@<version>` tag.
156158

157159
> [!IMPORTANT]
158160
> Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
159161
160-
You can typically include SDK like this:
162+
You can typically include the SDK like this:
161163

162164
```html
163-
<script src="path/to/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
165+
<script src="path/to/dynamsoft-barcode-reader-bundle@11.2.2000/dist/dbr.bundle.js"></script>
164166
```
165167
<div class="multi-panel-end"></div>
166168

@@ -172,9 +174,9 @@ Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launc
172174

173175
```js
174176
// Initialize the Dynamsoft Barcode Scanner
175-
const barcodescanner = new Dynamsoft.BarcodeScanner({
177+
const barcodeScanner = new Dynamsoft.BarcodeScanner({
176178
// Please don't forget to replace YOUR_LICENSE_KEY_HERE
177-
license: "YOUR_LICENSE_KEY_HERE",
179+
license: "YOUR_LICENSE_KEY_HERE",
178180
});
179181
```
180182

@@ -185,7 +187,7 @@ This is the **simplest** way to initialize the Barcode Scanner. The configuratio
185187
186188
```js
187189
// Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
188-
const barcodescanner = new Dynamsoft.BarcodeScanner({
190+
const barcodeScanner = new Dynamsoft.BarcodeScanner({
189191
license: "YOUR_LICENSE_KEY_HERE",
190192
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
191193
});
@@ -196,7 +198,7 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
196198
```js
197199
(async () => {
198200
// Launch the scanner and wait for the result
199-
const result = await barcodescanner.launch();
201+
const result = await barcodeScanner.launch();
200202
// Display the first detected barcode's text in an alert
201203
if (result.barcodeResults.length) {
202204
alert(result.barcodeResults[0].text);
@@ -207,12 +209,14 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
207209
Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
208210

209211
> [!NOTE]
210-
> In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
212+
> In the Hello World sample, after a successful decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
211213
214+
> [!TIP]
215+
> When running performance benchmarks, make sure to disable the console, avoid using `console.log()`, and run in non-debug mode whenever possible. This ensures that your benchmark results reflect true performance without interference from logging or debugging overhead.
212216
## Next Steps
213217

214-
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
218+
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
215219

216220
1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
217-
2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000)
218-
3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.6000)
221+
2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.2.2000)
222+
3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.2.2000)

0 commit comments

Comments
 (0)