Skip to content

Commit cdf3ab6

Browse files
a362758199a362758199
committed
update README
1 parent 9c77dc6 commit cdf3ab6

File tree

5 files changed

+184
-96
lines changed

5 files changed

+184
-96
lines changed

‎barcode-scanner-api-samples/scan-multiple-barcodes/README.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
# 📦 Scan Multiple Barcodes Sample
3+
4+
This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan **multiple barcodes continuously** from a video stream in a web application.
5+
6+
## ✨ Features
7+
8+
- Scan multiple 1D/2D barcodes
9+
- Live video decoding using `BarcodeScanner` component
10+
- Easy integration into your web application
11+
- UI rendered into a customizable container
12+
13+
## 🔧 How It Works
14+
15+
The sample uses the `BarcodeScanner` class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:
16+
17+
- **License Key** – Required to activate the SDK.
18+
- **`engineResourcePaths`** – Points to required resources hosted on a CDN or locally.
19+
- **UI container** – An HTML element where the scanner is rendered.
20+
21+
```ts
22+
const config = {
23+
license: "YOUR-LICENSE-KEY",
24+
engineResourcePaths: {
25+
// feel free to change it to your own path
26+
rootDirectory: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
27+
},
28+
container: ".barcode-scanner-view",
29+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
30+
showResultView: true,
31+
showUploadImageButton: true,
32+
scannerViewConfig: {
33+
showCloseButton: true
34+
},
35+
};
36+
```
37+
38+
The barcodeScanner is launched like this:
39+
40+
```ts
41+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
42+
barcodeScanner.launch();
43+
```
44+
45+
## 📌 Notes
46+
47+
- This sample scans **multiple unique barcodes**, you can configure the `scanMode` to control this behavior.
48+
- To avoid network-related loading issues, you can consider hosting all required resources locally.
49+
50+
## 📄 See other barcodeScanner samples
51+
52+
Scan single barcode:
53+
54+
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode): Scan single barcode from video stream with minimum code in JavaScript.
55+
* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera and image in an Angular application.
56+
* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera and image in a React application.
57+
* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera and image in a Vue application.

‎barcode-scanner-api-samples/scan-single-barcode/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# 📦 Scan Single Barcode - Hello World
2+
3+
This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan a **single barcode** from a video stream using plain JavaScript.
4+
5+
## ✨ Features
6+
7+
- Uses `BarcodeScanner` APIs from `dynamsoft-barcode-reader-bundle`
8+
- Scans a single barcode at a time
9+
- UI rendered to a container element
10+
11+
## 🔧 How It Works
12+
13+
The sample uses the `BarcodeScanner` class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:
14+
15+
- **License Key** – Required to activate the SDK.
16+
- **`engineResourcePaths`** – Points to required resources hosted on a CDN or locally.
17+
- **UI container** – An HTML element where the scanner is rendered.
18+
19+
```ts
20+
const config = {
21+
license: "YOUR-LICENSE-KEY",
22+
engineResourcePaths: {
23+
// feel free to change it to your own path
24+
rootDirectory: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
25+
},
26+
container: ".barcode-scanner-view",
27+
};
28+
```
29+
30+
The barcodeScanner is launched like this:
31+
32+
```ts
33+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
34+
barcodeScanner.launch();
35+
```
36+
37+
## 📌 Notes
38+
39+
- This sample scans **single barcode**, you can configure the `scanMode` to control this behavior.
40+
- To avoid network-related loading issues, you can consider hosting all required resources locally.
41+
42+
## 📄 See other barcodeScanner samples
43+
44+
* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera and image in an Angular application.
45+
* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera and image in a React application.
46+
* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera and image in a Vue application.
47+
48+
Scan multiple barcodes:
49+
50+
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Scan multiple barcodes from video stream with minimum code in JavaScript.

‎barcode-scanner-api-samples/scan-single-barcode/angular/README.md‎

Lines changed: 16 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,33 @@
1-
# Angular
1+
# 📦 Scan Single Barcode - Angular
22

3-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.8.
3+
This sample shows how to integrate the `BarcodeScanner` from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in an **Angular** project for scanning a single barcode from live video.
44

5-
## Development server
5+
## ✨ Features
66

7-
To start a local development server, run:
7+
- Easy integration with pre-built UI
8+
- BarcodeScanner initialized in Angular component
9+
- Scans one barcode at a time from video
810

9-
```bash
10-
ng serve
11-
```
12-
13-
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14-
15-
## Code scaffolding
16-
17-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18-
19-
```bash
20-
ng generate component component-name
21-
```
22-
23-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
11+
## 🚀 Quick Start
2412

25-
```bash
26-
ng generate --help
27-
```
28-
29-
## Building
30-
31-
To build the project run:
13+
### 1. Install Dependencies
3214

3315
```bash
34-
ng build
16+
npm install
3517
```
3618

37-
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38-
39-
## Running unit tests
40-
41-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
19+
### 2. Run the App
4220

4321
```bash
44-
ng test
22+
ng serve
4523
```
4624

47-
## Running end-to-end tests
48-
49-
For end-to-end (e2e) testing, run:
25+
Then open your browser at http://localhost:4200 to view the sample app.
5026

51-
```bash
52-
ng e2e
53-
```
27+
## 📌 Customization
5428

55-
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
29+
Please refer to sample [`scan-multiple-barcodes`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes) or check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html).
5630

57-
## Additional Resources
31+
## 📄 Support
5832

59-
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
33+
If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

‎barcode-scanner-api-samples/scan-single-barcode/react/README.md‎

Lines changed: 30 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,33 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config({
16-
extends: [
17-
// Remove ...tseslint.configs.recommended and replace with this
18-
...tseslint.configs.recommendedTypeChecked,
19-
// Alternatively, use this for stricter rules
20-
...tseslint.configs.strictTypeChecked,
21-
// Optionally, add this for stylistic rules
22-
...tseslint.configs.stylisticTypeChecked,
23-
],
24-
languageOptions: {
25-
// other options...
26-
parserOptions: {
27-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28-
tsconfigRootDir: import.meta.dirname,
29-
},
30-
},
31-
})
1+
# 📦 Scan Single Barcode - React
2+
3+
This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in a **React** app to scan a single barcode using the camera.
4+
5+
## ✨ Features
6+
7+
- Easy integration with pre-built UI
8+
- Renders barcodeScanner inside a React container
9+
- Scans one barcode at a time from video
10+
11+
## 🚀 Quick Start
12+
13+
### 1. Install Dependencies
14+
15+
```bash
16+
npm install
3217
```
3318

34-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35-
36-
```js
37-
// eslint.config.js
38-
import reactX from 'eslint-plugin-react-x'
39-
import reactDom from 'eslint-plugin-react-dom'
40-
41-
export default tseslint.config({
42-
plugins: {
43-
// Add the react-x and react-dom plugins
44-
'react-x': reactX,
45-
'react-dom': reactDom,
46-
},
47-
rules: {
48-
// other rules...
49-
// Enable its recommended typescript rules
50-
...reactX.configs['recommended-typescript'].rules,
51-
...reactDom.configs.recommended.rules,
52-
},
53-
})
19+
### 2. Start the App
20+
21+
```bash
22+
npm start
5423
```
24+
25+
Then open http://localhost:3000/ to view the sample app.
26+
27+
## 📌 Customization
28+
29+
Please refer to sample [`scan-multiple-barcodes`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes) or check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html).
30+
31+
## 📄 Support
32+
33+
If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

‎barcode-scanner-api-samples/scan-single-barcode/vue/README.md‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
1-
# Vue 3 + TypeScript + Vite
1+
# 📦 Scan Single Barcode - Vue
22

3-
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
3+
This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) into a **Vue 3** application to scan a single barcode from video.
44

5-
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
5+
## ✨ Features
6+
7+
- Easy integration with pre-built UI
8+
- BarcodeScanner instance created in a Vue component
9+
- Scans one barcode at a time from video
10+
11+
## 🚀 Quick Start
12+
13+
### 1. Install Dependencies
14+
15+
```bash
16+
npm install
17+
```
18+
19+
### 2. Run the App
20+
21+
```bash
22+
npm run dev
23+
```
24+
25+
Then open http://localhost:5173/ to view the sample app.
26+
27+
## 📌 Customization
28+
29+
Please refer to sample [`scan-multiple-barcodes`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes) or check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html).
30+
31+
## 📄 Support
32+
33+
If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

0 commit comments

Comments
 (0)