You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/* 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:20px0;
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
-
<h1class="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
-
<divclass="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
-
letconfig={
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
/* Reset default margins and paddings, apply consistent box-sizing */
18
+
* {
19
+
margin:0;
20
+
padding:0;
21
+
box-sizing: border-box;
22
+
}
23
+
24
+
/* Make html and body take up the full viewport */
25
+
html,
26
+
body {
27
+
width:100%;
28
+
height:100%;
29
+
}
30
+
31
+
/* Style for the scanner title/header */
32
+
.barcode-scanner-title {
33
+
height:80px;
34
+
text-align: center;
35
+
font-size:20px;
36
+
padding:20px0;
37
+
}
38
+
39
+
/* Container where the barcode scanner will display the camera feed */
40
+
.barcode-scanner-view {
41
+
width:100%;
42
+
height:calc(100%-80px);
43
+
/* Remaining space after header */
44
+
}
45
+
</style>
46
+
</head>
47
+
48
+
<body>
49
+
<h1class="barcode-scanner-title">
50
+
Hello World (Scan Multiple Barcodes via Camera)
51
+
</h1>
52
+
<!-- This div will act as the container for the barcode scanner UI -->
53
+
<divclass="barcode-scanner-view"></div>
54
+
55
+
<script>
56
+
// 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
57
+
letconfig={
58
+
// Replace with your Dynamsoft license key
59
+
license: "YOUR-LICENSE-KEY",
60
+
61
+
// Specify where to render the scanner UI
62
+
container: ".barcode-scanner-view",
63
+
64
+
// Set scan mode to detect multiple unique barcodes per scan session
65
+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
66
+
67
+
// Display a result view for barcodes detected
68
+
showResultView: true,
69
+
70
+
// Enable an "Upload Image" button for scanning barcodes from existing images
71
+
showUploadImageButton: true,
72
+
73
+
// Additional configuration for the scanner UI
74
+
scannerViewConfig: {
75
+
showCloseButton: true,// Display a close button on the scanner interface
76
+
},
77
+
};
78
+
79
+
// Instantiate the barcode scanner with the above configuration
/* Ensure html and body take full viewport size */
22
-
html,
23
-
body {
24
-
width:100%;
25
-
height:100%;
26
-
}
27
16
28
-
/* Style for the scanner title */
29
-
.barcode-scanner-title {
30
-
height:80px;
31
-
text-align: center;
32
-
font-size:20px;
33
-
padding:20px0;
34
-
}
17
+
<style>
18
+
/* Reset default margin and padding, and apply border-box sizing */
19
+
* {
20
+
margin:0;
21
+
padding:0;
22
+
box-sizing: border-box;
23
+
}
35
24
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>
25
+
/* Ensure html and body take full viewport size */
26
+
html,
27
+
body {
28
+
width:100%;
29
+
height:100%;
30
+
}
43
31
44
-
<body>
45
-
<h1class="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
-
<divclass="barcode-scanner-view"></div>
32
+
/* Style for the scanner title */
33
+
.barcode-scanner-title {
34
+
height:80px;
35
+
text-align: center;
36
+
font-size:20px;
37
+
padding:20px0;
38
+
}
50
39
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
-
letconfig={
54
-
license: "YOUR-LICENSE-KEY",// Replace with your Dynamsoft license key
55
-
container: ".barcode-scanner-view",// Specify where to render the scanner UI
56
-
};
40
+
/* Container where the barcode scanner will be rendered */
41
+
.barcode-scanner-view {
42
+
width:100%;
43
+
height:calc(100%-80px);
44
+
/* Fill remaining space below the title */
45
+
}
46
+
</style>
47
+
</head>
57
48
58
-
// Create a new instance of the Dynamsoft Barcode Scanner
<!-- This div will host the barcode scanner's camera view -->
54
+
<divclass="barcode-scanner-view"></div>
60
55
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>
56
+
<script>
57
+
// 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
58
+
letconfig={
59
+
license: "YOUR-LICENSE-KEY",// Replace with your Dynamsoft license key
60
+
container: ".barcode-scanner-view",// Specify where to render the scanner UI
61
+
};
62
+
63
+
// Create a new instance of the Dynamsoft Barcode Scanner
0 commit comments