Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Hello World Sample for Electron

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.

Official Sample

Preparation

Make sure you have node installed. node 16.20.1 and electron 26.4.1 are used in this article.

Quick Start

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

mkdir my-app && cd my-app
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 the necessary libraries

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 -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.

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.

Create an index.html file

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>

Create an action.js file

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);
  }
})();

Create an style.css file

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

Run the application with the following command and see how it goes.

npm start

Support

If you have any questions, feel free to contact Dynamsoft support.