Skip to content

Commit f232684

Browse files
Tom-DynamsoftTom-Dynamsoft
authored
Merge pull request #22 from Dynamsoft/master
Show updates in demo
2 parents b7ace89 + 702cf05 commit f232684

32 files changed

+712
-501
lines changed

‎.gitignore‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
3-
3+
dist
4+
build
45

56
# local env files
67
.env.local
@@ -40,4 +41,4 @@ yarn.lock
4041

4142
!bower.json
4243
!composer.json
43-
!package.js
44+
!package.js

1.hello-world/1.minimum-code.html renamed to 1.hello-world/1.hello-world.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,14 @@
1010
</head>
1111

1212
<body>
13-
<h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
14-
<button id="btn-show-scanner">Show Barcode Scanner</button>
13+
Loading...
1514
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
1615
<script>
1716
/** LICENSE ALERT - README
1817
* To use the library, you need to first specify a license key using the API "license" as shown below.
1918
*/
2019

21-
Dynamsoft.DBR.BarcodeReader.organizationID = "200000";
22-
Dynamsoft.DBR.BarcodeReader.handshakeCode = "200000-dbr_js_samples";
20+
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
2321

2422
/**
2523
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -28,21 +26,20 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
2826
* LICENSE ALERT - THE END
2927
*/
3028

31-
let pScanner = null;
32-
document.getElementById('btn-show-scanner').onclick = async function() {
29+
window.onload = async function() {
3330
try {
34-
const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
35-
/*
36-
* onFrameRead is triggered after the library finishes reading a frame.
37-
* There can be multiple barcodes on one frame.
31+
const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
32+
/**
33+
* onFrameRead is triggered after the library finishes reading a frame image.
34+
* There can be multiple barcodes on one image.
3835
*/
3936
scanner.onFrameRead = results => {
4037
console.log("Barcodes on one frame:");
4138
for (let result of results) {
4239
console.log(result.barcodeFormatString + ": " + result.barcodeText);
4340
}
4441
};
45-
/*
42+
/**
4643
* onUniqueRead is triggered only when a 'new' barcode is found.
4744
* The amount of time that the library 'remembers' a barcode is defined by
4845
* "duplicateForgetTime" in "ScanSettings". By default it is set to 3000 ms.
@@ -51,9 +48,12 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
5148
alert(txt);
5249
console.log("Unique Code Found: ", result);
5350
}
51+
/**
52+
* show() opens the camera and shows the video stream on the page.
53+
* After that, the library starts to scan the frame images continuously.
54+
*/
5455
await scanner.show();
5556
} catch (ex) {
56-
alert(ex.message);
5757
throw ex;
5858
}
5959
};

‎1.hello-world/10.read-video-pwa/helloworld-pwa.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,14 @@
1212

1313
<body>
1414
<h1 style="font-size: 1.5em;">Hello World for PWA</h1>
15-
<button id='readBarcode'>Read Barcode via Camera</button>
15+
Loading...
1616
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
1717
<script>
1818
/** LICENSE ALERT - README
1919
* To use the library, you need to first specify a license key using the API "license" as shown below.
2020
*/
2121

22-
Dynamsoft.DBR.BarcodeReader.organizationID = "200000";
23-
Dynamsoft.DBR.BarcodeReader.handshakeCode = "200000-dbr_js_samples";
22+
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
2423

2524
/**
2625
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -31,7 +30,7 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
3130

3231
let pScanner = null;
3332
let latestResult = null;
34-
document.getElementById('readBarcode').onclick = async function() {
33+
window.onload = async function() {
3534
Notification.requestPermission().then((result) => {
3635
if (result === 'granted') {
3736
startNotificationLoop();
@@ -47,7 +46,6 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
4746
};
4847
scanner.onUniqueRead = (txt, result) => {
4948
latestResult = txt;
50-
alert(txt, result);
5149
}
5250
await scanner.show();
5351
} catch (ex) {

‎1.hello-world/11.read-video-requirejs.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<body>
1212
<h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
13-
<button id="readBarcode">show scanner</button>
13+
Loading...
1414
<script src="https://cdn.jsdelivr.net/npm/[email protected]/require.js"></script>
1515
<script>
1616
requirejs(['https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js'], function({
@@ -21,8 +21,7 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
2121
* To use the library, you need to first specify a license key using the API "license" as shown below.
2222
*/
2323

24-
BarcodeReader.organizationID = "200000";
25-
BarcodeReader.handshakeCode = "200000-dbr_js_samples";
24+
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
2625

2726
/**
2827
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -33,7 +32,7 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
3332

3433
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/[email protected]/dist/";
3534
let pScanner = null;
36-
document.getElementById('readBarcode').onclick = async function() {
35+
window.onload = async function() {
3736
try {
3837
const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
3938
scanner.onFrameRead = results => {

1.hello-world/12.minimum-code-es6.html renamed to 1.hello-world/12.read-video-es6.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@
1010
</head>
1111

1212
<body>
13-
<h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
14-
<button id="btn-show-scanner">Show Barcode Scanner</button>
13+
<h1 style="font-size: 1.5em;">Hello World for ES6</h1>
14+
Loading...
1515
<script type="module">
1616
import { BarcodeReader, BarcodeScanner } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.mjs';
1717
/** LICENSE ALERT - README
1818
* To use the library, you need to first specify a license key using the API "license" as shown below.
1919
*/
2020

21-
BarcodeReader.organizationID = "200000";
22-
BarcodeReader.handshakeCode = "200000-dbr_js_samples";
21+
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
2322

2423
/**
2524
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -31,7 +30,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
3130
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/[email protected]/dist/";
3231

3332
let pScanner = null;
34-
document.getElementById('btn-show-scanner').addEventListener('click', async () => {
33+
window.onload = async () => {
3534
try {
3635
const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
3736
/*
@@ -58,7 +57,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
5857
alert(ex.message);
5958
throw ex;
6059
}
61-
});
60+
};
6261
</script>
6362
</body>
6463

‎1.hello-world/2.read-an-image.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,30 @@
1212
<body>
1313
<div style="width:80vw;margin:0 auto;">
1414
<h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
15-
<input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
15+
<input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif" disabled="disabled">
1616
<input id="ipt-readonly-last-result" title="Double click to clear!" readonly placeholder="The Last Read Barcode" style="width:80vw;margin-top:20px;">
17-
<p id='p-loading' style='font-size:1.5em'>Loading Library...</p>
17+
<p id='p-loading' style='font-size:1.5em'>Loading...</p>
1818
<p id='p-reading' style='font-size:1.5em;display:none;'>Reading Barcodes...</p>
1919
<div id="div-cvs-container" style="width:80vw;height:40vh;margin-top:20px;display:flex;justify-content:center;"></div>
2020
<p>All Results:</p>
2121
<div id="div-results" style="width:80vw;height:15vh;padding:16px;overflow-y:auto;border: 1px dashed grey;"></div>
2222
</div>
2323
<style>
24-
.sp-resultText { color: #cE5E04 }
25-
#div-cvs-container canvas { border: solid 1px gray; }
24+
.sp-resultText {
25+
color: #cE5E04
26+
}
27+
28+
#div-cvs-container canvas {
29+
border: solid 1px gray;
30+
}
2631
</style>
2732
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
2833
<script>
2934
/** LICENSE ALERT - README
3035
* To use the library, you need to first specify a license key using the API "license" as shown below.
3136
*/
3237

33-
Dynamsoft.DBR.BarcodeReader.organizationID = "200000";
34-
Dynamsoft.DBR.BarcodeReader.handshakeCode = "200000-dbr_js_samples";
38+
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
3539

3640
/**
3741
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -44,24 +48,25 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
4448
(async() => {
4549
try {
4650
await Dynamsoft.DBR.BarcodeReader.loadWasm();
47-
document.getElementById('p-loading').style.display = 'none';
51+
document.getElementById('p-loading').innerText = "Library loaded and ready!"
52+
document.getElementById('ipt-file').disabled = false;
53+
setTimeout(function() {
54+
document.getElementById('p-loading').style.display = 'none';
55+
}, 1000);
4856
} catch (ex) {
49-
alert(ex.message);
57+
document.getElementById('p-loading').innerText = ex;
58+
document.getElementById('ipt-file').disabled = true;
5059
throw ex;
5160
}
5261
})();
5362

54-
55-
56-
5763
// html elements
5864
const iptFile = document.getElementById('ipt-file');
5965
const iptReadonlyLastResult = document.getElementById('ipt-readonly-last-result');
6066
const pReading = document.getElementById('p-reading');
6167
const divResults = document.getElementById('div-results');
6268
const divCvsContainer = document.getElementById('div-cvs-container');
6369

64-
6570
// reader for decoding pictures
6671
let pReader = null;
6772
iptFile.addEventListener('change', async function() {
@@ -75,7 +80,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
7580
// show image
7681
divCvsContainer.innerHTML = '';
7782
divCvsContainer.appendChild(reader.getOriginalImageInACanvas());
78-
83+
7984
// show results
8085
divResults.appendChild(createEl('h3', file.name + ": "));
8186
if (0 === results.length) {
@@ -95,7 +100,6 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
95100
divResults.appendChild(document.createElement('hr'));
96101
divResults.scrollTop = divResults.scrollHeight;
97102
} catch (ex) {
98-
alert(ex.message);
99103
throw ex;
100104
} finally {
101105
pReading.style.display = 'none';
@@ -110,7 +114,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
110114
function createEl(type, txt, className) {
111115
const el = document.createElement(type);
112116
el.textContent = txt;
113-
if (className){
117+
if (className) {
114118
el.className = className;
115119
}
116120
return el;

‎1.hello-world/3.read-video-angular/src/app/dbr.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { BarcodeReader } from 'dynamsoft-javascript-barcode';
44
* To use the library, you need to first specify a license key using the API "license" as shown below.
55
*/
66

7-
BarcodeReader.organizationID = "200000";
8-
BarcodeReader.handshakeCode = "200000-dbr_js_samples";
7+
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
98

109
/**
1110
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.

‎1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ span {
4343

4444
.latest-result:focus {
4545
outline: none;
46-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
46+
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
4747
}
4848

4949
#results {

‎1.hello-world/4.read-video-react/src/dbr.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { BarcodeReader } from "dynamsoft-javascript-barcode";
44
* To use the library, you need to first specify a license key using the API "license" as shown below.
55
*/
66

7-
BarcodeReader.organizationID = "200000";
8-
BarcodeReader.handshakeCode = "200000-dbr_js_samples";
7+
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
98

109
/**
1110
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.

‎1.hello-world/5.read-video-vue/src/components/HelloWorld.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ span {
109109
110110
.latest-result:focus {
111111
outline: none;
112-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
112+
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
113113
}
114114
115115
#results {

0 commit comments

Comments
 (0)