Skip to content

Commit 42cc3a8

Browse files
Dynamsoft-HenryDynamsoft-Henry
authored
Merge pull request #472 from dynamsoft-docs/preview
Preview
2 parents c171571 + e944ac8 commit 42cc3a8

File tree

1 file changed

+60
-60
lines changed

1 file changed

+60
-60
lines changed

‎programming/javascript/api-reference/barcode-scanner.md‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -165,67 +165,67 @@ interface BarcodeScannerConfig {
165165
**Code Snippet**
166166

167167
```html
168-
<body>
169-
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
170-
<script>
171-
const barcodeScannerConfig = {
172-
license: "YOUR_LICENSE_KEY_HERE",
173-
// Defines scan behavior:
174-
// - SM_MULTI_UNIQUE: Keeps scanning and continuously collecting unique decoded barcode results.
175-
// - SM_SINGLE: Scans once a result is found.
176-
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
177-
// The path to your custom JSON template that defines the scanning process.
178-
templateFilePath:'./DBR-PresetTemplates.json',
179-
// engineResourcePaths typically is only assigned when using a framework like React/Angular/Vue where the resources are not in the same location as the script reference.
180-
engineResourcePaths: {rootDirectory:"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist"},
181-
barcodeFormats: [Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE , Dynamsoft.DBR.EnumBarcodeFormat.BF_CODE_128],
182-
showPoweredByDynamsoft: false,
183-
duplicateForgetTime: 3000,
184-
showUploadImageButton: true,
185-
autoStartCapturing: true,
186-
// The container for rendering the scanner and/or result view. Note that ResultView is only valid for SM_MULTI_UNIQUE mode. If not specified, a full-viewport default UI will be created.
187-
container: "#camera-view-container",
188-
scannerViewConfig: {
189-
// The ResultViewConfig goes in here - see ResultViewConfig section
190-
},
191-
resultViewConfig: {
192-
// The ResultViewConfig goes in here - see ResultViewConfig section
193-
},
194-
onUniqueBarcodeScanned: (result) => {
195-
// Do something with the result
196-
},
197-
onInitPrepare: () => {
198-
// Do something before the barcodeScanner initialized
199-
},
200-
onInitReady: (components) => {
201-
// Do something with the foundational components
202-
// Set the scan laser to be visible in cameraView
203-
components.cameraView.setScanLaserVisible(true);
204-
// Set the zoom factor to 3
205-
components.cameraEnhancer.setZoom({
206-
factor: 3
207-
});
208-
// Set the scan region to a rectangle with percentage values by cameraEnhancer
209-
let region = {
210-
"x": 0,
211-
"y": 20,
212-
"width": 100,
213-
"height": 60,
214-
"isMeasuredInPercentage": true
215-
};
216-
components.cameraEnhancer.setScanRegion(region);
217-
},
218-
onCameraOpen: (components) => {
219-
// Do something with the foundational components when the camera is successfully opened for the first time or after each camera switch
220-
},
221-
onCaptureStart: (components) => {
222-
// Do something with the foundational components when the capture process begins
223-
},
168+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
169+
<script>
170+
const barcodeScannerConfig = {
171+
license: "YOUR_LICENSE_KEY_HERE",
172+
// Defines scan behavior:
173+
// - SM_MULTI_UNIQUE: Keeps scanning and continuously collecting unique decoded barcode results.
174+
// - SM_SINGLE: Scans once a result is found.
175+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
176+
// The path to your custom JSON template that defines the scanning process.
177+
templateFilePath:'./DBR-PresetTemplates.json',
178+
// engineResourcePaths typically is only assigned when using a framework like React/Angular/Vue where the resources are not in the same location as the script reference.
179+
engineResourcePaths: {rootDirectory:"https://cdn.jsdelivr.net/npm/"},
180+
// path to the UI file
181+
uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/ui/barcode-scanner.ui.xml",
182+
barcodeFormats: [Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE , Dynamsoft.DBR.EnumBarcodeFormat.BF_CODE_128],
183+
showPoweredByDynamsoft: false,
184+
duplicateForgetTime: 3000,
185+
showUploadImageButton: true,
186+
autoStartCapturing: true,
187+
// The container for rendering the scanner and/or result view. Note that ResultView is only valid for SM_MULTI_UNIQUE mode. If not specified, a full-viewport default UI will be created.
188+
container: "#camera-view-container",
189+
scannerViewConfig: {
190+
// The ResultViewConfig goes in here - see ResultViewConfig section
191+
},
192+
resultViewConfig: {
193+
// The ResultViewConfig goes in here - see ResultViewConfig section
194+
},
195+
onUniqueBarcodeScanned: (result) => {
196+
// Do something with the result
197+
},
198+
onInitPrepare: () => {
199+
// Do something before the barcodeScanner initialized
200+
},
201+
onInitReady: (components) => {
202+
// Do something with the foundational components
203+
// Set the scan laser to be visible in cameraView
204+
components.cameraView.setScanLaserVisible(true);
205+
// Set the zoom factor to 3
206+
components.cameraEnhancer.setZoom({
207+
factor: 3
208+
});
209+
// Set the scan region to a rectangle with percentage values by cameraEnhancer
210+
let region = {
211+
"x": 0,
212+
"y": 20,
213+
"width": 100,
214+
"height": 60,
215+
"isMeasuredInPercentage": true
224216
};
225-
// Initialize the BarcodeScanner with the above BarcodeScannerConfig object
226-
const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
227-
</script>
228-
</body>
217+
components.cameraEnhancer.setScanRegion(region);
218+
},
219+
onCameraOpen: (components) => {
220+
// Do something with the foundational components when the camera is successfully opened for the first time or after each camera switch
221+
},
222+
onCaptureStart: (components) => {
223+
// Do something with the foundational components when the capture process begins
224+
},
225+
};
226+
// Initialize the BarcodeScanner with the above BarcodeScannerConfig object
227+
const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
228+
</script>
229229
```
230230

231231
### ScannerViewConfig

0 commit comments

Comments
 (0)