How to Build Cross-platform Desktop Barcode App with Electron

Mar 28, 2016

 Barcode

•  BARCODE SCANNING
•  ELECTRON
•  JAVASCRIPT
•  NODE
•  C/C++

Building desktop applications is not as easy as developing web applications because it is platform-related. You may need to learn C# for Windows, C/C++ for Linux, and Swift for Mac. For Java developers, it is convenient to create universal desktop applications in Swing and JavaFX. What about web developers, who have never learned server-side programming languages? Thanks to Electron, which combines Chromium and Node.js. It enables web developers to use HTML, CSS, and JavaScript to build cross-platform desktop applications.

Making Native Desktop Barcode Reader with Electron

Get the source code of Electron Quick Start:

git clone https://github.com/atom/electron-quick-start

Here are the basic files used by Electron applications:

• index.htm - A web page to render.
• main.js - Starts the app and creates a browser window to render HTML.
• package.json - Points to the app’s main file and lists its details and dependencies.

You just need to change the code in index.htm. In contrast to web client development, you can now integrate node JavaScript code to an HTML page. To read barcodes, require the module built yourself using node-gyp:

<script type="text/javascript">
        function fileSelected() {
            var count = document.getElementById('fileToUpload').files.length;
            if (count > 0) {
                var file = document.getElementById('fileToUpload').files[0];
                document.getElementById('filename').value = file.name;
            }
        }
        function getSelectedBarcodeTypes() {
        	  var vType = 0;
        	  var barcodeType = document.getElementsByName("BarcodeType");
            for (i = 0; i < barcodeType.length; i++) {
                if (barcodeType[i].checked == true)
                    vType = vType | (barcodeType[i].value * 1);
            }
            return vType;
        }
        function doReadBarcode() {
            var dbr = require('../build/Release/dbr');
            var fileName = document.getElementById('fileToUpload').files[0].path;
            var barcodeType = 0;
            dbr.decodeFile(
                "3160E70D97D76437446DB71BD7B8FB32", fileName, getSelectedBarcodeTypes(),
                function(msg) {
                    var response = 'Totol count: ' + msg.length;
                    var result = null;
                    for (index in msg) {
                        result = msg[index]
                        response += '<p>' + result['format'] + ': ';
                        response += result['value'] + '<p>';
                    }
                    document.getElementById('resultBox').innerHTML = response;
                }
            );
        }
    </script>

If you have no idea how to construct the barcode module using Dynamsoft Barcode Reader SDK, please read the post - How to Build Node.js Barcode Reader on Windows, Linux, and Mac.

Probably you will see the error message “Uncaught Error: A dynamic link library (DLL) initialization routine failed” when loading node module:

The reason is that Electron uses a different V8 version from official Node. To fix the issue, you have to manually specify the location of Electron’s headers when building native modules:

# check electron version
electron –v

# rebuild the native node module
node-gyp rebuild --target=0.36.7 --arch=x64 --dist-url=https://atom.io/download/atom-shell

Install dependencies:

npm install

Start the barcode reader application:

npm start

Electron Barcode Reader on Windows, Linux, and Mac

Windows

Linux

Mac

Source Code

https://github.com/yushulx/nodejs-barcode/tree/main/examples/desktop-electron