Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
Table of contents

Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

JavaScript Hello World Sample - 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.

Official Sample

Preparation

Make sure you have node installed. node 14.16.0 is used in this article.

Create an empty Application

Create a folder with the name “read-video-electron” and a package.json file inside it with the following content:

{
  "name": "read-video-electron",
  "version": "1.0.0",
  "description": "How to read barcodes from a video input in an Electron App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "tom@dynamsoft.com",
  "dependencies": {
    "electron": "14.0.1",
    "dynamsoft-javascript-barcode": "9.6.1"
  }
}

Then, run npm install to install the dependencies.

npm install

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:

const { app, BrowserWindow } = require('electron')

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    })
    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

Create the page to be loaded in the created window.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Read barcodes from a video input in Electron!</title>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <h1>Read barcodes from a video input</h1>
    <button id='readBarcode'>Read Barcode via Camera</button>
    <div id="UIElement">
        <div id="barcodeScannerUI"></div>
    </div>
    <input id="resultText" type="text" readonly="true">
    <script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
    <script src="action.js"></script>
</body>

</html>

The page loads action.js which makes use of the library to create a barcode scanner and read barcodes from a video input:

(async function () {
    Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
    Dynamsoft.DBR.BarcodeReader.loadWasm();
    let pScanner = null;
    document.getElementById('readBarcode').onclick = async () => {
        try {
            let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
            scanner.onFrameRead = results => {
                if (results.length) {
                    console.log(results);
                }
            };
            scanner.onUniqueRead = (txt, result) => {
                const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
                document.getElementById('resultText').value = format + ': ' + txt;
            };
            document.getElementById("barcodeScannerUI").appendChild(scanner.getUIElement());
            await scanner.show();
        } catch (ex) {
            alert(ex.message);
            throw ex;
        }
    };
})();

Also, style.css defines the styles for the UI

body {
    text-align: center;
}

#barcodeScannerUI {
    width: 100%;
    height: 100%;
}

#UIElement {
    margin: 2vmin auto;
    text-align: center;
    font-size: medium;
    height: 40vh;
    width: 80vw;
}
#resultText {
    display: block;
    margin: 0 auto;
    padding: 0.4rem 0.8rem;
    color: inherit;
    width: 80vw;
    border: none;
    font-size: 1rem;
    border-radius: 0.2rem;
    text-align: center;
}

Run the application

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

npm start

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest version
    • Version 9.x
      • Version 9.2.12
      • Version 9.0.2
      • Version 9.0.1
      • Version 9.0.0
    • Version 8.x
      • Version 8.8.7
      • Version 8.8.5
      • Version 8.8.3
      • Version 8.8.0
      • Version 8.6.3
      • Version 8.6.0
      • Version 8.4.0
      • Version 8.2.5
      • Version 8.2.3
      • Version 8.2.1
      • Version 8.2.0
      • Version 8.1.3
      • Version 8.1.2
      • Version 8.1.0
      • Version 8.0.0
    • Version 7.x
      • Version 7.6.0
      • Version 7.5.0
    Change +
    © 2003–2023 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support