Skip to content

Commit d9fd2d7

Browse files
Cube-JCube-J
committed
update code to adapt to DBR JS 9.0.0
1 parent e50f663 commit d9fd2d7

10 files changed

Lines changed: 34 additions & 38 deletions

‎3.settings/1.barcodeFormats-expectedBarcodes.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
library offline. Please see the guide on how to host the library:
1313
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
1414
-->
15-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>
1616
<link rel="stylesheet" href="settings-css.css">
1717
<link rel="stylesheet" href="../balloon.min.css">
1818
<!-- Used for tooltip styling -->
@@ -24,10 +24,9 @@ <h1 style="font-size: 1.5em;">Set Formats and Count</h1>
2424

2525
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2626
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
27-
<div id="div-video-container">
27+
<div id="div-ui-container">
2828
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
29-
<video class="dce-video" playsinline="true"></video>
30-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
29+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
3130
</div>
3231

3332
<!-- Settings Menu displayed in a modal -->

‎3.settings/2.localizationModes-binarizationModes.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
library offline. Please see the guide on how to host the library:
1313
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
1414
-->
15-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>
1616
<link rel="stylesheet" href="settings-css.css">
1717
<link rel="stylesheet" href="../balloon.min.css">
1818
<!-- Used for tooltip styling -->
@@ -25,10 +25,9 @@ <h1 style="font-size: 1.5em;">Set Localization and Binarization</h1>
2525

2626
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2727
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
28-
<div id="div-video-container">
28+
<div id="div-ui-container">
2929
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
30-
<video class="dce-video" playsinline="true"></video>
31-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
30+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
3231
</div>
3332

3433
<!-- Settings Menu displayed in a modal -->

‎3.settings/3.blurred-small-barcodes.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@ <h1 style="font-size: 1.5em;">Settings for Blurry or Small Codes</h1>
2424

2525
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2626
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
27-
<div id="div-video-container">
27+
<div id="div-ui-container">
2828
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
29-
<video class="dce-video" playsinline="true"></video>
30-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
29+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
3130
</div>
3231

3332
<!-- Settings Menu displayed in a modal -->

‎3.settings/4.deformed-incomplete-barcodes.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,9 @@ <h1 style="font-size: 1.5em;">Settings for Deformed or Incomplete codes</h1>
2323
<button id='openSimpleSettingsMenu'>Open Runtime Settings Menu</button>
2424
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2525
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
26-
<div id="div-video-container">
26+
<div id="div-ui-container">
2727
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
28-
<video class="dce-video" playsinline="true"></video>
29-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
28+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
3029
</div>
3130

3231
<!-- Settings Menu displayed in a modal -->

‎3.settings/5.regionOfInterest-regionPredetection.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@ <h1 style="font-size: 1.5em;">Define or Detect the Region of Interest</h2>
2424

2525
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2626
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
27-
<div id="div-video-container">
27+
<div id="div-ui-container">
2828
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
29-
<video class="dce-video" playsinline="true"></video>
30-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
29+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
3130
</div>
3231

3332
<!-- Settings Menu displayed in a modal -->

‎3.settings/initScanner.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ window.onload = async function () {
2828
loadingText.hidden = false;
2929
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
3030
initialSettings = await scanner.getRuntimeSettings();
31-
await scanner.setUIElement(document.getElementById('div-video-container'));
31+
await scanner.setUIElement(document.getElementById('div-ui-container'));
3232
startReading();
3333
} catch (ex) {
3434
alert(ex.message);

‎3.settings/settings-css.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,21 +90,21 @@ strong {
9090

9191
/* CSS for the video viewer so that it is limited within the width of the screen size */
9292

93-
#div-video-container {
93+
#div-ui-container {
9494
text-align: center;
9595
width: 100%;
9696
height: 60vh;
9797
overflow: hidden;
9898
position: relative;
9999
}
100100

101-
#div-video-container::after {
101+
#div-ui-container::after {
102102
padding-top: 56.25%;
103103
display: block;
104104
content: '';
105105
}
106106

107-
#div-video-container .dce-video {
107+
#div-ui-container .dce-video {
108108
width: 100%;
109109
height: 100%;
110110
top: 0;

‎3.settings/using-different-modes.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@ <h2>Using Different RuntimeSettings Templates</h2>
1717

1818
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
1919
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
20-
<div id="div-video-container">
20+
<div id="div-ui-container">
2121
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
22-
<video class="dce-video" playsinline="true"></video>
23-
<canvas class="dbrScanner-cvs-drawarea" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;" width="1280" height="720"></canvas>
22+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
2423
</div>
2524

2625
<!-- Settings Menu displayed in a modal -->

‎4.use-case/1.fill-a-form-with-barcode-reading.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
library offline. Please see the guide on how to host the library:
1313
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
1414
-->
15-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>
1616
</head>
1717

1818
<body>
@@ -48,7 +48,7 @@ <h3>Click each input box to fill in!</h3>
4848
try {
4949
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
5050
scanner.bPlaySoundOnSuccessfulRead = true;
51-
scanner.onUnduplicatedRead = (txt, result) => {
51+
scanner.onUniqueRead = (txt, result) => {
5252
this.value = result.barcodeText;
5353
scanner.hide();
5454
document.getElementById('UIElement').hidden = true;
@@ -106,9 +106,10 @@ <h3>Click each input box to fill in!</h3>
106106
<path
107107
d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z" />
108108
</svg>
109-
<video class="dce-video" playsinline="true" style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
110-
<canvas class="dbrScanner-cvs-drawarea" style="width:100%;height:100%;position:absolute;left:0;top:0;"></canvas>
111-
<div class="dbrScanner-cvs-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;"></div>
109+
<div class="dce-video-container" style="position:absolute;left:0;top:0;width:100%;height:100%;"></div>
110+
<div class="dce-scanarea" style="position:absolute;left:0;top:0;width:100%;height:100%;">
111+
<div class="dce-scanlight" style="display:none;position:absolute;width:100%;height:3%;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;animation:3s infinite dce-scanlight;user-select:none;"></div>
112+
</div>
112113
</div>
113114
</body>
114115
<style>

‎4.use-case/2.read-a-drivers-license.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
1515
<div id="UIElement" class="UIElement">
1616
<img id="btn-show-scanner" alt="show-scanner" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFb0lEQVR4Xu2ad8j1YxjHP6+ZlZEZRVayV9krsmXzh6wSUWSGhIxCiCgh2d7skS0ysv6wV8mIJDMjK1uf97kP5/05v+dc9/37/Z6n933OVeevc83vue/rvu7vfaYxxWXaFK+fEQCjFTDFEZjoLbAGsBawTN/Hn+Czvs+bwNsT9bt0DcBcwHbAbsAuwPLBwj4GHgTuBx4H/gjaZat1BcAcwAHAmcBK2VnNbPA+cBYwHfiroa//mXcBwK7ABcDqLSf7DnAy8ECbftsEwOVu4ce3meAAXxcDp7S1LdoCYGngNmDLjovvuX8G2A/4omm8NgCw+BeAFZomk2n/EbAJ8Hmm3UzqTQFYEHgaWL9JEg1sXwG2An4s9dEEAPe8DWmH0uAt2T2Sjtmio7IJAKcDZ7dURFM3ZwDnlDgpBcD97rE0X0nQDmx+SceufSFLSgG4F9g9K9KY8g/ALWnKe7Wviy8FrJemRQeohQp8m9OeuXYlAGwNPJkZ6E/girRMvxpiuwTg9joKmDMzjrnZlMNSAsDNacyNBvkO2B94LGqQ9GyutwKLZNiZ24EZ+tmEiEvTc3f+YJCfgM2B14L6VbV1gWeBBYL2PwNup/CxmLsCDgWuDSajmtPaHRn6g1T3BW7P8GGO10f1cwG4O6PRPArsWJPIYsAhfQOUA41Jf1Ojr6/tg0XdA+wV1M3eAu8CqwadbwBYWFV2Bq5JhEj/d5IihwEPDbBx0nw5GNccVwvqZgEwD+Aei3TmN4B1BiSxIfDiOD48LTaqKfZ1YO1AYU6E9qjfA7pZAEhnvRVxClwKHFfRlSQRGP2MJ9JhFlolPy4Bjg3GN4aD2lDJ6QESHVJUETkCuLqi6JZ4KWIMuFKqS/5w4KqgvRRciDjJAWCfjI7uuV/t3HsDdwYLMNZdFV1PFDmHiHhyhGLlALAHYIeNyMHAjRXFbRPBGbGXSH2iongQcEPEOJ1UjsZDJQeAnBFYMrR6U5Q7cIgaNtQ4PEmyVIcZb3ySoxHZBngqopgDwIrABxGnQN0McGS6E4znRp0rByh4749yDzLRH0ZyzQFAf3JwSwYc/wYsC3xd0TWexdnQBolNTgD+rny5OPAp4FE8TL5M4/AwvRnf5wJgD7AXROQi4KQaRU+U0yqT4LnpmjzIRF8nRIKmPtXZJHgicGEwkV/TmR/dNnVuXc7OBvMG45qj1HlIcleAA4oTWVR859s053ZWcezt83lgzWjANIE6cIUkFwCdyslvEfI+pmQ3dgaou+jUufLC5Czg6RMVc5MlDksJANJO3gpzxPc9b3/PBY02S7fDlYP6PTVzC53/PYMSAJzp3wM8FnPlPuCytIqqNLY0uy9LxxTyjR57q+Q+oJYAYNElq6AfLIcc+0PvaUsWx/8NOCyVSvavb6BSALR11M3i30orC9iZi+N3tjQBYOF0PV4uO2q7Bp+k1fN9idsmABjPI86xt8nSLcm7Z+NWkirzcbZImgJgUFnfhycBBIvfKbHGRcU37QH9QScahFaKbxMAfUlD3ZSeuIp/kYChT2o231b+SdbGFujPee70xyj/whIhTwP1/qsiYXp+4gRChGfEedsA9GLK/52abo5NgbBwp7vzMqjxSO0zdLoCoJeAz+hHA77WLBrOakzxW+A64HIg+9k7GqtrAHp5OD7bI/xPj0enrK2XnX7xsiTr7O3Pj7R26/8LrAIzUQBU48rYekPsF29+ssETKiMAJhTu/4KNVsBoC8zmPUAG145fJxsn2rz/e2lvX47rxAtPmOyMbu2umuCgPR7NqU6vk1NiBEDTn6XGfrQCBnT5pljPUltgWBMsAWOWaoIlBU6KTVdNcFKKKQk6AqAEtdnJZsqvgH8Apk7nQRizxhgAAAAASUVORK5CYII="/>
1717
<!-- <img id="btn-open-image" alt="open-image" hidden src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADU0lEQVR4Xu2bSchOURjHfx8bw8IQygZZkUQkFBYkhVggKxk3LMxLkZKyMEUW5iFK2JCFDCXKFBFiZ1grdoYy9Nd96/Z2733P+d57zj33e89ZvX33OcP/d54zPM93bxcdXro6XD8RQPQAewJ9gE3ATEC/XZSfwCXgoovG023aLoERwC1gjOuBJe1vB/a77MsWwF1gtssBZbTtFIINgEnAc8/iG905g2ADYAlw1QOAR8D0jH62AQfK7t8GwFLgStkDyGhvLrAA2OwDQqgA7gAHfUAIGYAcIA/C1uRZ2w4ZOgDnEOoAwCmEugBwBqFOAIogbAEOdWdDqBuA0iHUEUCpEOoKoDQIIQJYDFw3XM9Z94S/wHjgrUkbIQK4DSwEfpkIyLks6dp+zaR+2QCeAReAL0nOYAMwxGQgTTYfgBcW9eYDfVP2y0wDtzIB7AL2AH9SAxmWBFCzLMSUYeodwA1gUc7IhyfrcVAZygzb8A5A8fvjgsEpjtdlxVfxDmBosu7zBK4HjvlSD3gHoGPnTYHA3cDOngzgCLAxR2A/4DUwuicD0M6vTfBmk8jewHFgjUfx6sr7ElCnuoGdAM6l7gE7gCmexVcGoAKduV1W4gERQEAEogdUEQsE5ADVnAIRQEAE4h4Qyh7wCdA7Be+AUcAMYEILT3kFPAQ+AmOBOcBIS++q3AN0K1S+TjfB76nBKwGjLNE+oH+GKP33eXlyq2w8VqZHiRaF06YJnEoBKC5YB5wpmDV5wn2gV4aNgioFV81F8cRJQwiVAZD4tcBZA5ddkcQNWbOaB2F1AiELXLrLSgBIvGZJwZBpEQTN9oCMCtOAJxl/XwWcyvGehrl3ABKv2Tlvqjxlp03xHjC4qW7RKzErgdMFELwD0MwXrflWXCYmp0UawlTgaUFFAReErOIdgDK+31qpbPF8HLA38YSjwOUW9gOBrz0JgC2/CCB6QFwCcQ8IZhN8Cfy23cXatFfKXcdnEMdgm1pKr+79HlC6gjYbjABcJER8vS7f5uT/r+7kFZkqP5iwhTLZ9BUb0wxLYwBVfDJjK16RpdJoRsUWgO+PpoxEpIzeA/OAz6YVbQGoXR+fzZmOv2H3A3gAHAb027h0B4Bx43UwjADqMEsux9jxHvAPwx/cQdZmcYgAAAAASUVORK5CYII="/> -->
18-
<div id="div-video-container" class="div-video-container" hidden>
19-
<video class="dce-video" playsinline="true" muted></video>
18+
<div id="div-ui-container" class="div-ui-container" hidden>
19+
<div class="dce-video-container"></div>
2020
</div>
2121
</div>
2222
<div class="dialog" id="dialog" hidden>
@@ -42,7 +42,7 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
4242
</div>
4343
</div>
4444
<div id="divNoteMessage" class="divNoteMessage" hidden></div>
45-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
45+
<script src="https://cdn.jsdelivr.net/npm/keillion-dynamsoft-javascript-barcode@0.20220318174621.0/dist/dbr.js"></script>
4646
<script>
4747
/** LICENSE ALERT - README
4848
*
@@ -90,7 +90,7 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
9090
document.getElementById('header').hidden = false;
9191
document.getElementById('readAgain').hidden = true;
9292
document.getElementById('divNoteMessage').hidden = true;
93-
document.getElementById('div-video-container').hidden = true;
93+
document.getElementById('div-ui-container').hidden = true;
9494
UIElement.classList.remove("show");
9595
UIElement.style.display = "flex";
9696
document.getElementById('divNoteMessage').innerHTML = "";
@@ -99,7 +99,7 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
9999
let timer = null;
100100
try {
101101
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
102-
await scanner.setUIElement(document.getElementById('div-video-container'));
102+
await scanner.setUIElement(document.getElementById('div-ui-container'));
103103
if (!bSingleFrameMode) {
104104
let settings = await scanner.getRuntimeSettings();
105105
settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_PDF417;
@@ -120,7 +120,7 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
120120
await scanner.show();
121121
if (!bSingleFrameMode) {
122122
document.getElementById('hintMSG').hidden = false;
123-
document.getElementById('div-video-container').hidden = false;
123+
document.getElementById('div-ui-container').hidden = false;
124124
timer = setTimeout(() => {
125125
alertMsg("Tips:", "Can't scan results for a long time? Try to use the single frame mode to upload high-definition picture for recognition.");
126126
}, 2000);
@@ -131,7 +131,7 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
131131
}
132132
}
133133
document.getElementById("confirm_btn").addEventListener("click", () => {
134-
document.getElementById('div-video-container').hidden = true;
134+
document.getElementById('div-ui-container').hidden = true;
135135
showScannerBtn.hidden = false;
136136
startScanning(true);
137137
document.getElementById("dialog").hidden = true;
@@ -504,8 +504,9 @@ <h1 id='header'>Read A Driver's License <a href="#" id='readAgain' hidden onclic
504504
top: 0;
505505
}
506506

507-
.div-video-container,
508-
.dce-video {
507+
.div-ui-container,
508+
.dce-video-container {
509+
position: relative;
509510
width: 100%;
510511
height: 100%;
511512
}

0 commit comments

Comments
 (0)