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
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/customer/license/trialLicense/
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:
Source Code
https://github.com/yushulx/javascript-barcode/tree/master/examples/react-wasm-barcode