Skip to content

feat: update electron sample and docs #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 1, 2024
Merged

feat: update electron sample and docs #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26dcc40
feat: update electron sample and docs
felixindrawan Jun 26, 2024
69d7b73
fix: reversed globally defined vars
felixindrawan Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 96 additions & 75 deletions hello-world/electron/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
# Hello World Sample for Electron

[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.
[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](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Next.js application. Note that in this sample, `TypeScript` is used.

In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.2.1000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/10.2.1000).

> Note:
>
> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks!
>
> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have.

## Official Sample

Expand All @@ -10,7 +18,23 @@

Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article.

## Initialize project
## Quick Start

```cmd
npm install
npm start
```
A window should open to view the sample application

## Creating the sample project

In this section, we will be creating an Electron application utilizing the Dynamsoft Barcode Reader bundle sdk.

We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images.

By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it!

### Initialize project

```cmd
mkdir my-app && cd my-app
Expand All @@ -19,27 +43,25 @@ npm init

`npm init` will prompt you to configure some fields in your `package.json`. Note that the `entry point` should be `main.js` (it will be created later).

## install necessary libraries
### Install the necessary libraries

```cmd
npm install electron --save-dev
npm install dynamsoft-capture-vision-std
npm install dynamsoft-image-processing
npm install dynamsoft-core
npm install dynamsoft-license
npm install dynamsoft-utility
npm install dynamsoft-barcode-reader
npm install dynamsoft-capture-vision-router
npm install dynamsoft-camera-enhancer
npm install dynamsoft-capture-vision-std -E
npm install dynamsoft-image-processing -E
npm install dynamsoft-barcode-reader-bundle -E
```

## Start to implement

### Create a main.js file

As defined in the `package.json` file, `main.js` is the entry point of the application, we define it like this:
As defined in the `package.json` file, `main.js` is the entry point of the application.

Create a `main.js` file at the root folder, and define it like this:

```javascript
/* /main.js */
const { app, BrowserWindow } = require("electron");

function createWindow() {
Expand Down Expand Up @@ -80,47 +102,60 @@ The code basically opens `index.html` in a window. For more information, check o

### Create an `index.html` file

Create the page to be loaded in the created window.
As defined above, `index.html` is the file that will be loaded into the crated window.

Create an `index.html` file at the root folder, and define it like this:

```html
<!-- /index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in an Electron Application.">
<meta name="keywords" content="barcode, camera, Electron">
<meta
name="description"
content="Read barcodes from camera with Dynamsoft Barcode Reader in an Electron Application."
/>
<meta name="keywords" content="barcode, camera, Electron" />
<title>Dynamsoft Barcode Reader Sample - Electron</title>
<link href="style.css" rel="stylesheet">
<script src="./node_modules/dynamsoft-core/dist/core.js"></script>
<script src="./node_modules/dynamsoft-license/dist/license.js"></script>
<script src="./node_modules/dynamsoft-utility/dist/utility.js"></script>
<script src="./node_modules/dynamsoft-barcode-reader/dist/dbr.js"></script>
<script src="./node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
<script src="./node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="./node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
</head>
<body>
<h1>Hello World for Electron</h1>
<div id="div-ui-container"></div>
<div id="camera-view-container"></div>
<br />
Results:
<br>
<div id="div-results-container"></div>
<div id="results"></div>
<script src="action.js"></script>
</body>
</html>
```

### Create an `action.js` file

`index.html` will loads `action.js`, which makes use of libraries to read barcodes from a video input:
`index.html` will load `action.js`, which makes use of libraries to read barcodes from a video input.

Create the `action.js` file at the root folder, and define it like this:

```javascript
/* /action.js */
// Configures the paths where the .wasm files and other necessary resources for modules are located.
Dynamsoft.Core.CoreModule.engineResourcePaths = {
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
dip: "./node_modules/dynamsoft-image-processing/dist/",
core: "./node_modules/dynamsoft-core/dist/",
license: "./node_modules/dynamsoft-license/dist/",
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
};

/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

Dynamsoft.License.LicenseManager.initLicense(
"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
);
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", true);

/**
* 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.
Expand All @@ -129,63 +164,41 @@ Dynamsoft.License.LicenseManager.initLicense(
* LICENSE ALERT - THE END
*/

Dynamsoft.Core.CoreModule.engineResourcePaths = {
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
dip: "./node_modules/dynamsoft-image-processing/dist/",
core: "./node_modules/dynamsoft-core/dist/",
license: "./node_modules/dynamsoft-license/dist/",
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
};
(async function () {
// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);

(async () => {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(
cameraView
);
document
.querySelector("#div-ui-container")
.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#camera-view-container").append(cameraView.getUIElement());

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);

// Define a callback for results.
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (result) => {
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#results");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
};
cvRouter.addResultReceiver(resultReceiver);
});

// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification(
"barcode",
true
); // Filter out unchecked barcodes.
// Filter out unchecked barcodes.
filter.enableResultCrossVerification("barcode", true);
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication(
"barcode",
true
);
filter.setDuplicateForgetTime(
"barcode",
3000
);
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);

// Open camera and start scanning single barcode.
Expand All @@ -201,19 +214,27 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = {

### Create an `style.css` file

`index.html` will loads `style.css`, which defines the styles for the UI
`index.html` will load `style.css`, which defines the styles for the UI.

Create the `style.css` file at the root folder. Note that this is customizable!

```css
#div-ui-container {
body {
text-align: center;
}

#camera-view-container {
width: 100%;
height: 80vh;
}

#div-results-container {
#results {
width: 100%;
height: 10vh;
overflow: auto;
white-space: pre-wrap;
}

```

## Run the application
Expand Down
54 changes: 27 additions & 27 deletions hello-world/electron/action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
// Configures the paths where the .wasm files and other necessary resources for modules are located.
Dynamsoft.Core.CoreModule.engineResourcePaths = {
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
dip: "./node_modules/dynamsoft-image-processing/dist/",
core: "./node_modules/dynamsoft-core/dist/",
license: "./node_modules/dynamsoft-license/dist/",
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
};

/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", true);

/**
* 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.
Expand All @@ -11,48 +22,37 @@ Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMD
* LICENSE ALERT - THE END
*/

Dynamsoft.Core.CoreModule.engineResourcePaths = {
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
dip: "./node_modules/dynamsoft-image-processing/dist/",
core: "./node_modules/dynamsoft-core/dist/",
license: "./node_modules/dynamsoft-license/dist/",
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
dce: "./node_modules/dynamsoft-camera-enhancer/dist/",
};

// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;

(async () => {
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;

try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
document.querySelector("#camera-view-container").append(cameraView.getUIElement());

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);

// Define a callback for results.
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
const resultsContainer = document.querySelector("#results");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
}});
});

// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
Expand Down
22 changes: 10 additions & 12 deletions hello-world/electron/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,21 @@
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in an Electron Application.">
<meta name="keywords" content="barcode, camera, Electron">
<meta
name="description"
content="Read barcodes from camera with Dynamsoft Barcode Reader in an Electron Application."
/>
<meta name="keywords" content="barcode, camera, Electron" />
<title>Dynamsoft Barcode Reader Sample - Electron</title>
<link href="style.css" rel="stylesheet">
<script src="./node_modules/dynamsoft-core/dist/core.js"></script>
<script src="./node_modules/dynamsoft-license/dist/license.js"></script>
<script src="./node_modules/dynamsoft-utility/dist/utility.js"></script>
<script src="./node_modules/dynamsoft-barcode-reader/dist/dbr.js"></script>
<script src="./node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
<script src="./node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="./node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
</head>
<body>
<h1>Hello World for Electron</h1>
<div id="div-ui-container"></div>
<div id="camera-view-container"></div>
<br />
Results:
<br>
<div id="div-results-container"></div>
<div id="results"></div>
<script src="action.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion hello-world/electron/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@
"dynamsoft-capture-vision-std": "1.2.10",
"dynamsoft-image-processing": "2.2.30"
}
}
}
Loading