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

Webpack is a static module bundler for modern JavaScript applications. While webpack is used by almost all the popular JavaScript frameworks as the basis of their build system, it can also be used alone. In this article, we will take a look at how to use the Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) with just webpack as shown in the code:

Create a simple application with Webpack

Create a configuration file

Create a file with the name webpack.config.js and input the following content

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

The above example code tells webpack to do the following things

  1. Find the file index.js in the /src/ directory which is relative to the current running path (absolute path on the disk)
  2. Bundle the relative JavaScript files into a single file bundle.js, then output it under the /dist/ directory.

Create the source file

Create a directory /src/, then create a index.js file under it with the following content

import BarcodeScanner from "dynamsoft-javascript-barcode";
BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/";

let pScanner = null;
if (document.getElementById('readBarcode')) {
    document.getElementById('readBarcode').onclick = async function() {
        try {
            let scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
            scanner.onFrameRead = results => {
                console.log("Barcodes on one frame:");
                for (let result of results) {
                    const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
                    console.log(format + ": " + result.barcodeText);
                }
            };
            scanner.onUniqueRead = (txt, result) => {
                alert(txt);
                console.log("Unique Code Found: " + result);
            }
            await scanner.show();
        } catch (ex) {
            alert(ex.message);
            throw ex;
        }
    };
}

The example code above loads the library and creates a BarcodeScanner object to do barcode scanning. Note that the function is registered to a button with the ID “readBarcode” which exists on the page we create in the next step.

Create the web page

Create a file with the name index.html and put it together with webpack.config.js. The content is as follows:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<body>
    <button id="readBarcode">show scanner</button>
    <script src="./dist/bundle.js"></script>
</body>

</html>

Note that the page is looking for the bundle.js file which is the output from webpack.

Add dependencies and compile scripts

Now we have all the code we need except for the library and the bundler which is webpack. We can add a package.json file with the following content

{
    "name": "helloworld-webpack",
    "version": "1.0.0",
    "description": "Use the Dynamsoft Barcode Reader JavaScript SDK with just webpack",
    "scripts": {
        "build": "webpack --config webpack.config.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Dynamsoft Team",
    "devDependencies": {
        "webpack": "5.52.1",
        "webpack-cli": "4.8.0"
    },
    "dependencies": {
        "dynamsoft-javascript-barcode": ""
    }
}

Run the following script to install the dependencies:

npm install

Compile and run

The package configuration file in the last step already includes the compile script, we can build the application like this:

npm run-script build

The output file “bundle.js” will appear under the /dist/ directory.

Test the sample

Open index.html, click “show scanner” and you will soon get a working page that scans barcodes.

Extra notes

Load the library locally

The example code above uses the library via a CDN, you can also use a local copy of the library by using “copy-webpack-plugin”:

npm install copy-webpack-plugin
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin'); // For copying local resources

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: './node_modules/dynamsoft-javascript-barcode/dist',
                    to: path.resolve(__dirname, 'dist'),
                }
            ]
        }),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
};

Don’t forget to change engineResourcePath in index.js:

BarcodeScanner.engineResourcePath = './dist/'

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