New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

dynamsoft-barcode-reader-web-sdk

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dynamsoft-barcode-reader-web-sdk

Dynamsoft Barcode Reader JS is a recognition SDK which enables you to embed barcode reading functionality in your web, desktop, and mobile applications. With a few lines of JavaScript code, you can develop a robust application to scan a linear barcode, QR


Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created

Dynamsoft Barcode Reader for the Web

Overview

Dynamsoft JavaScript Barcode Reader is a recognition SDK which enables you to embed barcode reading functionality in your web, desktop, and mobile applications. With a few lines of JavaScript code, you can develop a robust application to scan a linear barcode, QR Code, DataMatrix, PDF417, and Aztec Code.

Supported Barcode Symbologies

  • 1D barcode: Code 39, Code 93, Code 128, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, Interleaved 2 of 5 (ITF), Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5), ITF-14.
  • 2D barcode: QRCode, DataMatrix, PDF417, and Aztec Code.

Browser Compatibility

Firefox performs the best on both desktop and mobile.

BrowserVersion
Chromev57+
Firefoxv52+
Edgev16+
Safari*v11+
Internet Explorernot supported

WebAssembly compiles really slow in Safari for iOS according to our tests.

Usage

Include and initialize the module:

<script src="/node_modules/dynamsoft-barcode-reader-web-sdk/dist/dbr.min.js"></script>
<script>
    dynamsoft.dbrEnv.resourcesPath = '/node_modules/dynamsoft-barcode-reader-web-sdk/dist';
    dynamsoft.dbrEnv.bUseWorker = true;
    dynamsoft.dbrEnv.licenseKey = "LICENSE_KEY";
    
    dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function(){};
    dynamsoft.dbrEnv.onAutoLoadWasmError = function(status){};
</script>

Alternatively, you can use the jsDelivr CDN as follows:

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-web-sdk"></script>

Read barcodes from a file:

var reader = new dynamsoft.BarcodeReader();
reader.decodeFileInMemory(files[0]).then(function(results){
    var txts = [];
    for(var i=0;i<results.length;++i){
        txts.push(results[i].BarcodeText);
    }
    reader.deleteInstance();
    alert(txts.join("\n"));
}).catch(ex => {
    reader.deleteInstance();
});

Read barcodes from a video stream:

var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(videoElement, 0, 0, width, height);
    
var reader = new dynamsoft.BarcodeReader();
reader.decodeBuffer(
			ctx.getImageData(0, 0, width, height).data,
			width,
			height,
			width * 4,
			dynamsoft.BarcodeReader.EnumImagePixelFormat.IPF_ARGB_8888
		)
		.then((results) => {
			showResults(results);
		});

Quick Start

Create an index.html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
    <div id="divLoadInfo">Loading SDK...</div>
    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif">

    <script src="/node_modules/dynamsoft-barcode-reader-web-sdk/dist/dbr.min.js"></script>
    <script>
        dynamsoft.dbrEnv.resourcesPath = '/node_modules/dynamsoft-barcode-reader-web-sdk/dist';
        dynamsoft.dbrEnv.bUseWorker = true;
        
        dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function(){
            document.getElementById('divLoadInfo').innerHTML="Successfully loaded JavaScript Barcode SDK.";
        };
        dynamsoft.dbrEnv.onAutoLoadWasmError = function(status){
            document.getElementById('divLoadInfo').innerHTML="Failed to load JavaScript Barcode SDK."+ status;
        };
        
        //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
        dynamsoft.dbrEnv.licenseKey = "LICENSE_KEY";
        
        document.getElementById('uploadImage').addEventListener('change', function(){
            var files = this.files;
            var reader = new dynamsoft.BarcodeReader();
            reader.decodeFileInMemory(files[0]).then(function(results){
                var txts = [];
                for(var i=0;i<results.length;++i){
                    txts.push(results[i].BarcodeText);
                }
                reader.deleteInstance();
                alert(txts.join("\n"));
            }).catch(ex => {
                reader.deleteInstance();
                alert("Error: "+(ex.message || ex));
                console.log(ex);
            });
            this.value = '';
        });
    </script>
</body>
</html>

To deploy the project to IIS, create a web.config file as follows:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
        </staticContent>
    </system.webServer>
</configuration>

API Reference

https://github.com/dynamsoft-dbr/javascript-barcode/blob/master/documents/api-original.md

Samples

  • samples/file
  • samples/video

More: https://github.com/dynamsoft-dbr/javascript-barcode

Online Demo

https://demo.dynamsoft.com/dbr_wasm/barcode_reader_javascript.html

Web barcode reader

License

Get a FREE 30-day trial license.

Contact Us

https://www.dynamsoft.com/Company/Contact.aspx

FAQs

Package last updated on 15 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts