Skip to content

Commit 221a85c

Browse files
Tom-DynamsoftTom-Dynamsoft
committed
Updated readme for new samples a bit and added comments
1 parent 2965156 commit 221a85c

File tree

8 files changed

+246
-150
lines changed

8 files changed

+246
-150
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const config = {
3535
};
3636
```
3737

38-
The barcodeScanner is launched like this:
38+
The BarcodeScanner instance is created and launched like this:
3939

4040
```ts
4141
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
@@ -44,12 +44,12 @@ barcodeScanner.launch();
4444

4545
## 📌 Notes
4646

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.
47+
- This sample scans **multiple unique barcodes**, you can configure `scanMode` to change the behavior to scan one single barcode.
48+
- To avoid network-related loading issues, consider hosting all required resources locally.
4949

50-
## 📄 See other barcodeScanner samples
50+
## 📄 See other BarcodeScanner samples
5151

52-
Scan single barcode:
52+
Multiple samples are provided for single barcode scanning. These samples can be easily adapted to scan multiple unique barcodes by simply updating the `config` object.
5353

5454
* [**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.
5555
* [**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 in an Angular application.

‎barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html‎

Lines changed: 81 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,84 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>
7+
Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)
8+
</title>
9+
<!-- Include Dynamsoft Barcode Reader Bundle from CDN -->
10+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
311

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)</title>
8-
<script src="https://npm.scannerproxy.com:802/cdn/@dynamsoft/[email protected]/dist/dbr.bundle.js"></script>
9-
<style>
10-
* {
11-
margin: 0;
12-
padding: 0;
13-
box-sizing: border-box;
14-
}
15-
html, body {
16-
width: 100%;
17-
height: 100%;
18-
}
19-
.barcode-scanner-title {
20-
height: 80px;
21-
text-align: center;
22-
font-size: 20px;
23-
padding: 20px 0;
24-
}
25-
.barcode-scanner-view {
26-
width: 100%;
27-
height: calc(100% - 80px);
28-
}
29-
</style>
30-
</head>
31-
32-
<body>
33-
<h1 class="barcode-scanner-title">Hello World (Decode via Camera)</h1>
34-
<div class="barcode-scanner-view"></div>
35-
<script>
36-
let config = {
37-
license: "YOUR-LICENSE-KEY",
38-
container: ".barcode-scanner-view",
39-
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
40-
showResultView: true,
41-
showUploadImageButton: true,
42-
scannerViewConfig: {
43-
showCloseButton: true
44-
},
45-
}
46-
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
47-
barcodeScanner.launch().then((result)=>{
48-
console.log(result);
49-
})
50-
</script>
51-
</body>
52-
53-
</html>
12+
<style>
13+
/* Reset default margins and paddings, apply consistent box-sizing */
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
/* Make html and body take up the full viewport */
21+
html,
22+
body {
23+
width: 100%;
24+
height: 100%;
25+
}
26+
27+
/* Style for the scanner title/header */
28+
.barcode-scanner-title {
29+
height: 80px;
30+
text-align: center;
31+
font-size: 20px;
32+
padding: 20px 0;
33+
}
34+
35+
/* Container where the barcode scanner will display the camera feed */
36+
.barcode-scanner-view {
37+
width: 100%;
38+
height: calc(100% - 80px); /* Remaining space after header */
39+
}
40+
</style>
41+
</head>
42+
43+
<body>
44+
<h1 class="barcode-scanner-title">
45+
Hello World (Scan Multiple Barcodes via Camera)
46+
</h1>
47+
<!-- This div will act as the container for the barcode scanner UI -->
48+
<div class="barcode-scanner-view"></div>
49+
50+
<script>
51+
// Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig
52+
let config = {
53+
// Replace with your Dynamsoft license key
54+
license: "YOUR-LICENSE-KEY",
55+
56+
// Specify where to render the scanner UI
57+
container: ".barcode-scanner-view",
58+
59+
// Set scan mode to detect multiple unique barcodes per scan session
60+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
61+
62+
// Display a result view for barcodes detected
63+
showResultView: true,
64+
65+
// Enable an "Upload Image" button for scanning barcodes from existing images
66+
showUploadImageButton: true,
67+
68+
// Additional configuration for the scanner UI
69+
scannerViewConfig: {
70+
showCloseButton: true, // Display a close button on the scanner interface
71+
},
72+
};
73+
74+
// Instantiate the barcode scanner with the above configuration
75+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
76+
77+
// Launch the scanner and handle the scan result
78+
barcodeScanner.launch().then((result) => {
79+
// Log the full result object to the console for debugging or further processing
80+
console.log(result);
81+
});
82+
</script>
83+
</body>
84+
</html>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft
1010

1111
## 🔧 How It Works
1212

13-
The sample uses the `BarcodeScanner` class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:
13+
The sample uses the `BarcodeScanner` class to launch a scanner and decode a single barcode from a camera stream. The key configuration includes:
1414

1515
- **License Key** – Required to activate the SDK.
1616
- **`engineResourcePaths`** – Points to required resources hosted on a CDN or locally.
@@ -27,7 +27,7 @@ const config = {
2727
};
2828
```
2929

30-
The barcodeScanner is launched like this:
30+
The BarcodeScanner instance is created and launched like this:
3131

3232
```ts
3333
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
@@ -36,10 +36,10 @@ barcodeScanner.launch();
3636

3737
## 📌 Notes
3838

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.
39+
- This sample scans one **single barcode**, you can configure `scanMode` to change the behavior to scan multiple barcodes.
40+
- To avoid network-related loading issues, consider hosting all required resources locally.
4141

42-
## 📄 See other barcodeScanner samples
42+
## 📄 See other BarcodeScanner samples
4343

4444
* [**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 in an Angular application.
4545
* [**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 in a React application.

‎barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
<h2 class="barcode-scanner-title-text">Hello World for Angular</h2>
44
<svg t="1744959268852" class="barcode-scanner-title-logo" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3482"><path d="M435.8 536.2H512V353z" fill="#DD0031" p-id="3483"></path><path d="M400.9 616.8l-52.4 130.8h-97.2L512 163V64L94.9 212.7l63.6 551.5L512 960V616.8z" fill="#DD0031" p-id="3484"></path><path d="M512 353v183.2h76.2z" fill="#C3002F" p-id="3485"></path><path d="M512 64v99l259.8 584.6h-97.2l-52.4-130.8H512V960l353.5-195.8 63.6-551.5z" fill="#C3002F" p-id="3486"></path></svg>
55
</div>
6+
<!-- This div will host the barcode scanner's camera view -->
67
<div class="barcode-scanner-view"></div>
78
</div>

‎barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.ts‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,39 @@ import { Component } from '@angular/core';
22
import { BarcodeScanner } from '@dynamsoft/dynamsoft-barcode-reader-bundle';
33

44
@Component({
5-
selector: 'app-root',
6-
templateUrl: './app.component.html',
7-
styleUrl: './app.component.css'
5+
selector: 'app-root',
6+
templateUrl: './app.component.html',
7+
styleUrl: './app.component.css'
88
})
9+
910
export class AppComponent {
10-
title = 'angular';
11-
12-
async ngAfterViewInit(): Promise<void> {
13-
const config = {
14-
license: "YOUR-LICENSE-KEY",
15-
container: ".barcode-scanner-view",
16-
engineResourcePaths: {
17-
rootDirectory: "https://npm.scannerproxy.com:802/cdn/@dynamsoft/[email protected]/dist/",
18-
},
19-
scannerViewConfig: {
20-
cameraEnhancerUIPath: "https://npm.scannerproxy.com:802/cdn/@dynamsoft/[email protected]/dist/",
21-
},
11+
title = 'angular';
12+
13+
async ngAfterViewInit(): Promise<void> {
14+
// Configuration object for initializing the BarcodeScanner instance
15+
const config = {
16+
17+
license: "YOUR-LICENSE-KEY", // Replace with your Dynamsoft license key
18+
container: ".barcode-scanner-view", // Specify where to render the scanner UI
19+
20+
// Specify custom paths for the engine resources
21+
engineResourcePaths: {
22+
rootDirectory: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
23+
},
24+
25+
// Configuration for the scanner UI
26+
scannerViewConfig: {
27+
// Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
28+
cameraEnhancerUIPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
29+
},
30+
}
31+
32+
// Create an instance of the BarcodeScanner with the provided configuration
33+
const barcodeScanner = new BarcodeScanner(config);
34+
35+
// Launch the scanner; once a barcode is detected, display its text in an alert
36+
barcodeScanner.launch().then((result) => {
37+
alert(result.barcodeResults[0].text);
38+
});
2239
}
23-
const barcodeScanner = new BarcodeScanner(config);
24-
barcodeScanner.launch().then((result) => {
25-
alert(result.barcodeResults[0].text);
26-
});
27-
}
2840
}

‎barcode-scanner-api-samples/scan-single-barcode/hello-world.html‎

Lines changed: 65 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,68 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>
7+
Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)
8+
</title>
39

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)</title>
8-
<script src="https://npm.scannerproxy.com:802/cdn/@dynamsoft/[email protected]/dist/dbr.bundle.js"></script>
9-
<style>
10-
* {
11-
margin: 0;
12-
padding: 0;
13-
box-sizing: border-box;
14-
}
15-
html, body {
16-
width: 100%;
17-
height: 100%;
18-
}
19-
.barcode-scanner-title {
20-
height: 80px;
21-
text-align: center;
22-
font-size: 20px;
23-
padding: 20px 0;
24-
}
25-
.barcode-scanner-view {
26-
width: 100%;
27-
height: calc(100% - 80px);
28-
}
29-
</style>
30-
</head>
31-
32-
<body>
33-
<h1 class="barcode-scanner-title">Hello World (Decode via Camera)</h1>
34-
<div class="barcode-scanner-view"></div>
35-
<script>
36-
let config = {
37-
license: "YOUR-LICENSE-KEY",
38-
container: ".barcode-scanner-view",
39-
}
40-
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
41-
barcodeScanner.launch().then((result)=>{
42-
alert(result.barcodeResults[0].text);
43-
})
44-
</script>
45-
</body>
46-
47-
</html>
10+
<!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
12+
13+
<style>
14+
/* Reset default margin and padding, and apply border-box sizing */
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
/* Ensure html and body take full viewport size */
22+
html,
23+
body {
24+
width: 100%;
25+
height: 100%;
26+
}
27+
28+
/* Style for the scanner title */
29+
.barcode-scanner-title {
30+
height: 80px;
31+
text-align: center;
32+
font-size: 20px;
33+
padding: 20px 0;
34+
}
35+
36+
/* Container where the barcode scanner will be rendered */
37+
.barcode-scanner-view {
38+
width: 100%;
39+
height: calc(100% - 80px); /* Fill remaining space below the title */
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<h1 class="barcode-scanner-title">
46+
Hello World (Scan One Single Barcode via Camera)
47+
</h1>
48+
<!-- This div will host the barcode scanner's camera view -->
49+
<div class="barcode-scanner-view"></div>
50+
51+
<script>
52+
// Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig
53+
let config = {
54+
license: "YOUR-LICENSE-KEY", // Replace with your Dynamsoft license key
55+
container: ".barcode-scanner-view", // Specify where to render the scanner UI
56+
};
57+
58+
// Create a new instance of the Dynamsoft Barcode Scanner
59+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
60+
61+
// Launch the scanner and handle the scanned result
62+
barcodeScanner.launch().then((result) => {
63+
// Display the first detected barcode's text in an alert
64+
alert(result.barcodeResults[0].text);
65+
});
66+
</script>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)