Skip to content

Commit 9317aa2

Browse files
a362758199a362758199
committed
2 parents ffa879f + 5853d84 commit 9317aa2

File tree

72 files changed

+560
-265
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+560
-265
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ Get the basic features working with plain/native JavaScript or within a framewor
5252

5353
**Scan multiple barcodes**
5454

55-
* [**Scan Multiple Barcodes**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scan-multiple-barcodes/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
56-
* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scan-multiple-barcodes/cart-builder.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html?utm_source=sampleReadme): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
55+
* [**Scan Multiple Barcodes**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
56+
* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html?utm_source=sampleReadme): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
5757

5858
### Foundational API samples
5959

‎barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>List-Builder - Scan to Cart Simulation</title>
88

99
<!-- Dynamsoft Barcode Reader Bundle -->
10-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
1111
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
1212
<!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
1313

@@ -123,18 +123,14 @@ <h2>Simulated Shopping Cart</h2>
123123
// License key for Dynamsoft Barcode Reader (replace with a valid key)
124124
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
125125

126-
// Specify the path to the engine resources (loaded from CDN in this case)
127-
engineResourcePaths: {
128-
rootDirectory:
129-
"https://cdn.jsdelivr.net/npm/[email protected]/dist/",
130-
},
131-
132126
// Set scanning mode to detect multiple unique barcodes in one session
133127
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
134128

135129
// Time in milliseconds to forget duplicate barcodes (prevents rapid duplicate scans)
136130
duplicateForgetTime: 5000,
137131

132+
showResultView: false,
133+
138134
// Configure the scanner view (UI settings)
139135
scannerViewConfig: {
140136
container: document.querySelector("#floatingDiv"), // Attach scanner UI to floating div
@@ -244,6 +240,21 @@ <h2>Simulated Shopping Cart</h2>
244240
});
245241

246242
document.addEventListener("mouseup", () => (isDragging = false));
243+
244+
dragDiv.addEventListener("touchstart", (e) => {
245+
isDragging = true;
246+
offsetX = e.touches[0].clientX - dragDiv.offsetLeft;
247+
offsetY = e.touches[0].clientY - dragDiv.offsetTop;
248+
});
249+
250+
document.addEventListener("touchmove", (e) => {
251+
if (isDragging) {
252+
dragDiv.style.left = `${e.touches[0].clientX - offsetX}px`;
253+
dragDiv.style.top = `${e.touches[0].clientY - offsetY}px`;
254+
}
255+
});
256+
257+
document.addEventListener("touchend", () => (isDragging = false));
247258
};
248259
</script>
249260
</body>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)
99
</title>
1010
<!-- Include Dynamsoft Barcode Reader Bundle from CDN -->
11-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
1212
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
1313
<!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
1414

@@ -59,7 +59,7 @@ <h1 class="barcode-scanner-title">
5959
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
6060

6161
// Specify where to render the scanner UI
62-
container: ".barcode-scanner-view",
62+
container: document.querySelector(".barcode-scanner-view"),
6363

6464
// Set scan mode to detect multiple unique barcodes per scan session
6565
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
@@ -70,9 +70,13 @@ <h1 class="barcode-scanner-title">
7070
// Enable an "Upload Image" button for scanning barcodes from existing images
7171
showUploadImageButton: true,
7272

73+
// showPoweredByDynamsoft: false,
74+
7375
// Additional configuration for the scanner UI
7476
scannerViewConfig: {
75-
showCloseButton: true, // Display a close button on the scanner interface
77+
showCloseButton: true, // Display a close button on the scanner interface,
78+
showFlashButton: true,
79+
cameraSwitchControl: "toggleFrontBack"
7680
},
7781
};
7882

‎barcode-scanner-api-samples/scan-single-barcode/angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@angular/platform-browser": "^19.2.0",
1818
"@angular/platform-browser-dynamic": "^19.2.0",
1919
"@angular/router": "^19.2.0",
20-
"dynamsoft-barcode-reader-bundle": "10.5.3000",
20+
"dynamsoft-barcode-reader-bundle": "11.0.3000",
2121
"rxjs": "~7.8.0",
2222
"tslib": "^2.3.0",
2323
"zone.js": "~0.15.0"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ <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>
66
<!-- This div will host the barcode scanner's camera view -->
7-
<div class="barcode-scanner-view"></div>
7+
<div class="barcode-scanner-view" #scannerView></div>
88
</div>

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component } from '@angular/core';
2-
import { BarcodeScanner } from 'dynamsoft-barcode-reader-bundle';
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
import { BarcodeScanner, BarcodeScannerConfig, CameraEnhancer, CameraView, CaptureVisionRouter } from 'dynamsoft-barcode-reader-bundle';
33

44
@Component({
55
selector: 'app-root',
@@ -10,18 +10,27 @@ import { BarcodeScanner } from 'dynamsoft-barcode-reader-bundle';
1010
export class AppComponent {
1111
title = 'angular';
1212

13+
@ViewChild('scannerView') scannerView!: ElementRef<HTMLDivElement>;
14+
1315
async ngAfterViewInit(): Promise<void> {
1416
// Configuration object for initializing the BarcodeScanner instance
15-
const config = {
17+
const config: BarcodeScannerConfig = {
1618
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
17-
container: ".barcode-scanner-view", // Specify where to render the scanner UI
19+
container: this.scannerView.nativeElement, // Specify where to render the scanner UI
1820

1921
// Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
20-
uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
22+
uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
23+
24+
// showUploadImageButton: true,
25+
// showPoweredByDynamsoft: false,
26+
// scannerViewConfig: {
27+
// showFlashButton: true,
28+
// cameraSwitchControl: "toggleFrontBack",
29+
// },
2130

2231
// Specify custom paths for the engine resources
2332
engineResourcePaths: {
24-
rootDirectory: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
33+
rootDirectory: "https://cdn.jsdelivr.net/npm/",
2534
},
2635
}
2736

@@ -30,7 +39,9 @@ export class AppComponent {
3039

3140
// Launch the scanner; once a barcode is detected, display its text in an alert
3241
barcodeScanner.launch().then((result) => {
33-
alert(result.barcodeResults[0].text);
42+
if (result.barcodeResults.length) {
43+
alert(result.barcodeResults[0].text);
44+
}
3445
});
3546
}
3647
}

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</title>
1010

1111
<!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
12-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
1313
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
1414
<!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
1515

@@ -57,7 +57,14 @@ <h1 class="barcode-scanner-title">
5757
// 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
5858
let config = {
5959
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
60-
container: ".barcode-scanner-view", // Specify where to render the scanner UI
60+
container: document.querySelector(".barcode-scanner-view"), // Specify where to render the scanner UI
61+
62+
// showUploadImageButton: true,
63+
// showPoweredByDynamsoft: false,
64+
// scannerViewConfig: {
65+
// showFlashButton: true,
66+
// cameraSwitchControl: "toggleFrontBack",
67+
// },
6168
};
6269

6370
// Create a new instance of the Dynamsoft Barcode Scanner
@@ -66,7 +73,9 @@ <h1 class="barcode-scanner-title">
6673
// Launch the scanner and handle the scanned result
6774
barcodeScanner.launch().then((result) => {
6875
// Display the first detected barcode's text in an alert
69-
alert(result.barcodeResults[0].text);
76+
if (result.barcodeResults.length) {
77+
alert(result.barcodeResults[0].text);
78+
}
7079
});
7180
</script>
7281
</body>

‎barcode-scanner-api-samples/scan-single-barcode/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"dynamsoft-barcode-reader-bundle": "10.5.3000",
13+
"dynamsoft-barcode-reader-bundle": "11.0.3000",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0"
1616
},
@@ -27,4 +27,4 @@
2727
"typescript-eslint": "^8.26.1",
2828
"vite": "^6.3.1"
2929
}
30-
}
30+
}

‎barcode-scanner-api-samples/scan-single-barcode/react/src/App.tsx‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,46 @@
1-
import { useEffect } from "react";
1+
import { useEffect, useRef } from "react";
22
import reactLogo from "./assets/logo.svg";
33
import { BarcodeScanner } from "dynamsoft-barcode-reader-bundle";
44
import "./App.css";
55

66
function App() {
7+
const scannerViewRef = useRef(null);
8+
const hasRun = useRef(false);
9+
710
useEffect(() => {
8-
// Configuration object for initializing the BarcodeScanner instance
9-
const config = {
10-
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
11-
container: ".barcode-scanner-view", // Specify where to render the scanner UI
12-
13-
// Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
14-
uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
15-
16-
// Specify custom paths for the engine resources
17-
engineResourcePaths: {
18-
rootDirectory: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
19-
},
20-
}
11+
if (!hasRun.current) {
12+
// Configuration object for initializing the BarcodeScanner instance
13+
const config = {
14+
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
15+
container: scannerViewRef.current!, // Specify where to render the scanner UI
16+
17+
// Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
18+
uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
2119

22-
// Create an instance of the BarcodeScanner with the provided configuration
23-
const barcodeScanner = new BarcodeScanner(config);
20+
// showUploadImageButton: true,
21+
// showPoweredByDynamsoft: false,
22+
// scannerViewConfig: {
23+
// showFlashButton: true,
24+
// cameraSwitchControl: "toggleFrontBack",
25+
// },
2426

25-
// Launch the scanner; once a barcode is detected, display its text in an alert
26-
barcodeScanner.launch().then((result) => {
27-
alert(result.barcodeResults[0].text);
28-
});
27+
// Specify custom paths for the engine resources
28+
engineResourcePaths: {
29+
rootDirectory: "https://cdn.jsdelivr.net/npm/",
30+
},
31+
}
32+
33+
// Create an instance of the BarcodeScanner with the provided configuration
34+
const barcodeScanner = new BarcodeScanner(config);
35+
36+
// Launch the scanner; once a barcode is detected, display its text in an alert
37+
barcodeScanner.launch().then((result) => {
38+
if (result.barcodeResults.length) {
39+
alert(result.barcodeResults[0].text);
40+
}
41+
});
42+
hasRun.current = true;
43+
}
2944
}, []);
3045
return (
3146
<div className="barcode-scanner-hello-world-page">
@@ -38,7 +53,7 @@ function App() {
3853
></img>
3954
</div>
4055
{/* This div will host the barcode scanner's camera view */}
41-
<div className="barcode-scanner-view "></div>
56+
<div className="barcode-scanner-view" ref={scannerViewRef}></div>
4257
</div>
4358
);
4459
}

0 commit comments

Comments
 (0)