Electron 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.
In this guide, we will be using dynamsoft-barcode-reader-bundle 11.2.4000.
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 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 for any support or questions you might have.
Make sure you have node installed. node 16.20.1 and electron 26.4.1 are used in this article.
npm install
npm startA window should open to view the sample application
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!
mkdir my-app && cd my-app
npm initnpm 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).
npm install electron --save-dev
npm install dynamsoft-capture-vision-std@1.4.10 -E
npm install dynamsoft-image-processing@2.4.20 -E
npm install dynamsoft-barcode-reader-bundle@11.2.4000 -EAs 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:
/* /main.js */
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nativeWindowOpen: true,
},
});
win.loadFile("index.html");
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});Two modules are imported in this file:
app: controls the application's event lifecycle.BrowserWindow: creates and manages application windows.
The code basically opens index.html in a window. For more information, check out Electron Quick Start.
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:
<!-- /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" />
<title>Dynamsoft Barcode Reader Sample - Electron</title>
<link href="style.css" rel="stylesheet" />
<script src="./node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
</head>
<body style="text-align: center">
<h1>Hello World for Electron</h1>
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
<br />
Results:
<div id="results"></div>
<script src="action.js"></script>
</body>
</html>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:
/* /action.js */
// Configures the paths where the .wasm files and other necessary resources for modules are located.
Dynamsoft.Core.CoreModule.engineResourcePaths = {
dbrBundle: "./node_modules/dynamsoft-barcode-reader-bundle/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", {
executeNow: true,
});
/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
* For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.2.4000&cVer=true#specify-the-license&utm_source=samples or contact [email protected].
* LICENSE ALERT - THE END
*/
// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading.
Dynamsoft.Core.CoreModule.loadWasm();
(async () => {
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;
try {
// Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera 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("#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;
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();
// Filter out unchecked barcodes.
filter.enableResultCrossVerification("barcode", true);
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
cameraView.setScanLaserVisible(true);
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(ex);
alert(errMsg);
}
})();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!
#results {
width: 100%;
height: 10vh;
overflow: auto;
white-space: pre-wrap;
}Run the application with the following command and see how it goes.
npm startIf you have any questions, feel free to contact Dynamsoft support.