Making Online Barcode Reader on Linux with Node.js

Previously, I shared an article How to Make Node Barcode Reader Addon on Linux, which illustrates how to create a node barcode addon by wrapping Dynamsoft Barcode Reader SDK on Linux. Since Node.js was born for developing network programs, let’s take a glimpse of how to create a Web barcode reader using the node barcode addon.

Getting Started

I assume you have successfully built the dbr.so using node-gyp. If not, please read the relevant post before taking the following steps.

Basic Steps of Reading Barcode Online

Upload barcode images or transfer image URLs to a Web server.
Save barcode images to designated folder on the Web server.
Decode barcode images and send results back to Web clients.

Install Express and Formidable

Express is a Web framework for Node.js. To install Express:

npm install express --save

Formidable is a node.js module for parsing form data. To install Formidable:

npm install formidable --save

Initialization

var formidable = require('formidable');
var util = require('util');
var express = require('express');
var fs = require('fs');
var app = express();
var path = require('path');
var dbr = require('./build/Release/dbr');
var http = require('http');

Load Static Resources in Express

Create a static HTML page index.htm with CSS files and JavaScript files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamsoft Barcode Reader Nodejs Demo</title>
    <link type="text/css" rel="stylesheet" href="assets/css/style.css" />

    <script type="text/javascript" src="assets/js/jquery-1.11.2.js"></script>
</head>

<body>
    <div id="wrapper">
        <div id="dbr-nodejs">
            <h1>
                Dynamsoft Barcode Reader Nodejs Demo</h1>
            <!--<form action="">-->
            <div class="step step1">
                <div id="fileUpload" class="getFile">
                    <span class="num">1</span>
                    <h4>
                        Upload from local:</h4>
                    <input type="file" id="fileToUpload" onchange="fileSelected();" />
                    <input type="text" readonly="readonly" id="filename" />
                    <input type="button" />
                    <a class="clickSwitch" href="javascript:void(0);">or, Specify an URL</a>
                </div>
                <div id="fileDownload" class="hidden getFile">
                    <span class="num">1</span>
                    <h4>
                        Specify an URL:</h4>
                    <input type="text" id="imageURL"/>
                    <!--<input type="button"/>-->
                    <a class="clickSwitch" href="javascript:void(0);">or, Upload from local</a>
                </div>
            </div>
            <div class="step step2">
                <span class="num">2</span>
                <h4>
                    Barcode Types:</h4>
                <ul class="barcodeType">
                    <li class="on">
                        <label for="chkLinear">
                            <input id="chkLinear" name="BarcodeType" type="checkbox" checked="true" value="0x3FF">
                            <span>Linear</span><br />
                            <div class="imgWrapper">
                                <img src="assets/images/oned.gif" width="90" alt="Barcode Type Linear" /></div>
                        </label>
                    </li>
                    <li>
                        <label for="chkQRCode">
                            <input id="chkQRCode" name="BarcodeType" type="checkbox" value="0x4000000">
                            <span>QRCode</span><br />
                            <div class="imgWrapper">
                                <img src="assets/images/qr.gif" width="60" alt="Barcode Type QRCode" /></div>
                        </label>
                    </li>
                    <li>
                        <label for="chkPDF417">
                            <input id="chkPDF417" name="BarcodeType" type="checkbox" value="0x2000000">
                            <span>PDF417</span><br />
                            <div class="imgWrapper">
                                <img src="assets/images/pdf417.gif" width="100" height="38" alt="Barcode Type PDF417" /></div>
                        </label>
                    </li>
                    <li>
                        <label for="chkDataMatrix">
                            <input id="chkDataMatrix" name="BarcodeType" type="checkbox" value="0x8000000">
                            <span>DataMatrix</span><br />
                            <div class="imgWrapper">
                                <img src="assets/images/dm.gif" width="60" alt="Barcode Type DataMatrix" /></div>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="step step3">
                <span class="num">3</span> <a id="readBarcode" name="RecgabtnCssBarcode" onclick="doReadBarcode();">
                </a>
                <div id="resultBox">
                </div>
            </div>
            <!--</form>-->
        </div>
    </div>

</body>
</html>

Create server.js and specify the resource directory in express.static:

app.use(express.static(__dirname));

Parse Form and Save Uploaded Files with Formidable

var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
            var dir = 'uploads';
            var flag = fields.uploadFlag;
            var barcodeType = parseInt(fields.barcodetype);

            fs.readFile(files.fileToUpload.path, function(err, data) {
                        // save file from temp dir to new dir
                        var fileName = path.join(__dirname, dir, files.fileToUpload.name);
                        fs.writeFile(fileName, data, function(err) {
                            if (err) throw err;

                            decodeBarcode(res, license, fileName, barcodeType);
                        });
             });

});

Download Files with Node.js

                    var tmpFileName = path.join(__dirname, dir, 'tmp.jpg');
                    var tmp = fs.createWriteStream(tmpFileName);
                    var url = fields.fileToDownload;
                    console.log('url: ' + url);
                    http.get(url, function(response) {
                        response.pipe(tmp);
                        tmp.on('finish', function() {
                            tmp.close(function() {
                                decodeBarcode(res, license, tmpFileName, barcodeType);
                            });
                        });
                    });

Read Barcode Images in Node.js

function decodeBarcode(res, license, fileName, barcodeType) {
    // read barcode using dbr
    dbr.decodeFile(
        license, fileName, barcodeType,
        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>';
            }
            res.send(response);
        }
    );
}