Skip to content

Commit 000d702

Browse files
KeillionKeillion
committed
Create README.md
1 parent 09e3e19 commit 000d702

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎1.hello-world/9.read-video-electron/README.md‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
# JavaScript Hello World Sample - Electron
2+
3+
[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Electron application.
4+
5+
## Official Sample
6+
7+
* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/1.hello-world/9.read-video-electron">Read Barcodes from Camera - Source Code</a>
8+
9+
## Preparation
10+
11+
Make sure you have [node](https://nodejs.org/) installed. `node 14.16.0` is used in this article.
12+
13+
## Create an empty Application
14+
15+
Create a folder with the name "read-video-electron" and a package.json file inside it with the following content:
16+
17+
```json
18+
{
19+
"name": "read-video-electron",
20+
"version": "1.0.0",
21+
"description": "How to read barcodes from a video input in an Electron App",
22+
"main": "main.js",
23+
"scripts": {
24+
"start": "electron .",
25+
"test": "echo \"Error: no test specified\" && exit 1"
26+
},
27+
"author": "[email protected]",
28+
"dependencies": {
29+
"electron": "14.0.1",
30+
"dynamsoft-javascript-barcode": "9.6.1"
31+
}
32+
}
33+
```
34+
35+
Then, run `npm install` to install the dependencies.
36+
37+
```cmd
38+
npm install
39+
```
40+
41+
## Start to implement
42+
43+
### Create a main.js file
44+
45+
As defined in the package.json file, main.js is the entry point of the application, we define it like this:
46+
47+
```javascript
48+
const { app, BrowserWindow } = require('electron')
49+
50+
function createWindow() {
51+
const win = new BrowserWindow({
52+
width: 800,
53+
height: 600,
54+
})
55+
win.loadFile('index.html')
56+
}
57+
58+
app.whenReady().then(() => {
59+
createWindow()
60+
app.on('activate', () => {
61+
if (BrowserWindow.getAllWindows().length === 0) {
62+
createWindow()
63+
}
64+
})
65+
})
66+
67+
app.on('window-all-closed', () => {
68+
if (process.platform !== 'darwin') {
69+
app.quit()
70+
}
71+
})
72+
```
73+
74+
Two modules are imported in this file:
75+
76+
* `app`: controls the application's event lifecycle.
77+
* `BrowserWindow`: creates and manages application windows.
78+
79+
The code basically opens index.html in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start).
80+
81+
### Create an index.html file
82+
83+
Create the page to be loaded in the created window.
84+
85+
```html
86+
<!DOCTYPE html>
87+
<html>
88+
89+
<head>
90+
<meta charset="UTF-8">
91+
<title>Read barcodes from a video input in Electron!</title>
92+
<link href="style.css" rel="stylesheet">
93+
</head>
94+
95+
<body>
96+
<h1>Read barcodes from a video input</h1>
97+
<button id='readBarcode'>Read Barcode via Camera</button>
98+
<div id="UIElement">
99+
<div id="barcodeScannerUI"></div>
100+
</div>
101+
<input id="resultText" type="text" readonly="true">
102+
<script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
103+
<script src="action.js"></script>
104+
</body>
105+
106+
</html>
107+
```
108+
109+
The page loads action.js which makes use of the library to create a barcode scanner and read barcodes from a video input:
110+
111+
```javascript
112+
(async function () {
113+
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
114+
Dynamsoft.DBR.BarcodeReader.loadWasm();
115+
let pScanner = null;
116+
document.getElementById('readBarcode').onclick = async () => {
117+
try {
118+
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
119+
scanner.onFrameRead = results => {
120+
if (results.length) {
121+
console.log(results);
122+
}
123+
};
124+
scanner.onUniqueRead = (txt, result) => {
125+
const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
126+
document.getElementById('resultText').value = format + ': ' + txt;
127+
};
128+
document.getElementById("barcodeScannerUI").appendChild(scanner.getUIElement());
129+
await scanner.show();
130+
} catch (ex) {
131+
alert(ex.message);
132+
throw ex;
133+
}
134+
};
135+
})();
136+
```
137+
138+
Also, style.css defines the styles for the UI
139+
140+
```css
141+
body {
142+
text-align: center;
143+
}
144+
145+
#barcodeScannerUI {
146+
width: 100%;
147+
height: 100%;
148+
}
149+
150+
#UIElement {
151+
margin: 2vmin auto;
152+
text-align: center;
153+
font-size: medium;
154+
height: 40vh;
155+
width: 80vw;
156+
}
157+
#resultText {
158+
display: block;
159+
margin: 0 auto;
160+
padding: 0.4rem 0.8rem;
161+
color: inherit;
162+
width: 80vw;
163+
border: none;
164+
font-size: 1rem;
165+
border-radius: 0.2rem;
166+
text-align: center;
167+
}
168+
```
169+
170+
## Run the application
171+
172+
Run the application with the following command and see how it works.
173+
174+
```cmd
175+
npm start
176+
```

0 commit comments

Comments
 (0)