How to Build Web Barcode Apps with React and WebAssembly

Dynamsoft JavaScript barcode SDK is built based on WebAssembly, which provides high performance for reading barcodes in web apps. This tutorial aims to demonstrate how to quickly create a simple web barcode reader by using React and Dynamsoft JavaScript barcode SDK.

Download

Node.js

A Simple Web Barcode Reader

Create a new react app:

npx create-react-app react-wasm-barcode
cd react-wasm-barcode

Load and initialize the JavaScript barcode library in public/index.html:

<img src="loading.gif" style="margin-top:10px" id="anim-loading">
<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.4.1.1.min.js"></script>
<script>
  dynamsoft.dbrEnv.resourcesPath = 'https://demo.dynamsoft.com/dbr_wasm/js';
  dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function () {
    window.reader = new dynamsoft.BarcodeReader();
    document.getElementById('anim-loading').style.display = 'none';
  };
  dynamsoft.dbrEnv.onAutoLoadWasmError = function (ex) {
    document.getElementById('anim-loading').style.display = 'none';
    alert('Fail to load the wasm file.');
  };
  //https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx
  dynamsoft.dbrEnv.licenseKey = "<Your Barcode License>";
</script>

If you do not have a valid license, you can register a Dynamsoft account and get a 30-day free trial license. To make the barcode reader globally accessible, assign the object to window.reader.

Create a barcode component in Barcode.js:

import React, { Component }from 'react';
export class Barcode extends Component {
    onChanged() {
        let image = document.getElementById('uploadImage').files[0];
        if (!image) {
            alert('Please add an image');
            return;
        }
        window.reader.decodeFileInMemory(image).then(function(results){
            var txts = [];
            for(var i=0;i<results.length;++i){
                txts.push(results[i].BarcodeText);
            }
            alert(txts.join("\\n"));
        }).catch(ex => {
            alert('error:' + (ex.message || ex));
        });
    }

    render() {
      return (
        <div>
          <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif" onChange={this.onChanged}/>
        </div>
      );
    }
  }

Use the Input element to load an image and write the barcode detection code in the onChanged() function.

Import the barcode component to App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {Barcode} from './Barcode';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Barcode/>
        </header>
      </div>
    );
  }
}

export default App;

Run the app:

yarn start

Open localhost:3000 in your web browser to run the demo:

react web barcode reader

Source Code

https://github.com/yushulx/javascript-barcode/tree/master/examples/react-wasm-barcode

Search Blog Posts