dynamsoft-javascript-barcode
Advanced tools
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
Dynamsoft BarcodeReader SDK for Web is a JavaScript API for barcode scanning based on the WebAssembly technology. It supports real-time localization and decoding of various barcode types. The library is capable of scanning barcodes from static images as well as directly from live video streams. It also supports reading multiple barcodes at once.
Supported Symbologies:
1D barcode: Code 39(including Code 39 Extended), 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: PDF417, QR, DataMatrix, Aztec, and MaxiCode.
Patch Code
GS1 Composite Code
GS1 DataBar: Omnidirectional, Truncated, Stacked, Stacked Omnidirectional, Limited, Expanded, and Expanded Stacked.
Supported Data Sources: Blob, HTMLImageElement, HTMLVideoElement, and URL, etc.
Browser Compatibility:
| Browser Name | Version |
|---|---|
| Chrome | v57+ (v59+ on Android/iOS1) |
| Firefox | v52+ (v55+ on Android/iOS1) |
| Edge2 | v16+ |
| Safari3 | v11+ |
1 On iOS, camera video streaming only works in Safari.
2 On Edge, due to blob worker can't access to indexedDB, you must host DBRJS SDK in the same domain.
3 Safari 11.2.2 ~ 11.2.6 are not supported.
Simplified and Full Feature Edition
As more and more features are added to the SDK, the wasm file is getting bigger and bigger. Based on the consideration of network and compilation performance, we divided the wasm into a simplified version and a full feature version in 7.2.2.
| feature | simplified edition | full feature edition |
|---|---|---|
| wasm size1(gzip) | 810KB | 1.1 MB |
| 1D | √ | √ |
| QR | √ | √ |
| PDF417 | √ | √ |
| DataMatrix | √ | √ |
| Aztec | X | √ |
| MaxiCode | X | √ |
| Patch Code | X | √ |
| GS1 Composite Code | X | √ |
| GS1 DataBar | X | √ |
| DPM | X | √ |
| getRuntimeSettings | √ | √ |
| updateRuntimeSettings | √ | √ |
| getIntermediateResults | X | √ |
| initRuntimeSettingsWithString | X | √ |
| outputSettingsToString | X | √ |
| outputSettingsToString | X | √ |
| scenarios2 | To C | To B |
1 The wasm size is measured in 7.2.2. In later version the size may different.
2 The simplified edition download and compile faster. Suitable for the scenario that scanning a few codes and redirecting to another page. When you need the feature only in the full, or scenarios that are less sensitive to initialization speed, such as long time video decoding and decoding barcodes in image files, use the full feature edition.
The simplified edition is default used. To switch to full feature edition, use the api Dynamsoft.BarcodeReader._bUseFullFeature = true. _bUseFullFeature must be set before loadWasm.
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
<script>
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt, result) => {alert(txt);}
}).then(scanner => {
barcodeScanner = scanner;
barcodeScanner.show();
});
</script>
</body>
</html>
The following is a screenshot of the live demo. Try it here.
This section will help you use the library to build a simple web application to decode barcodes from a video stream.
Basic Requirements:
Internet connection
Camera Access
Create an HTML file with the following content. Deploy it to your web server if you have it already.
PRODUCT-KEYS, you can acquire a trial key here and replace the field with your key.npm or yarn, you can set up a simple http server in minutes. Check out http-server on npm or yarn.<!DOCTYPE html>
<html>
<body>
<!-- Please visit https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx to get a trial license. -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
<script>
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt, result) => {alert(txt);}
}).then(scanner => {
barcodeScanner = scanner;
barcodeScanner.show();
});
</script>
</body>
</html>
Open the file in your browser (must be one that is supported) and there will be a pop-up asking for permission to access the camera. Once the access is granted, you will see the video stream in the default UI of the BarcodeScanner.
If you open the HTML file as file:/// or http://, the following error may appear in the browser console
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
In Safari 12 the error is
Trying to call getUserMedia from an insecure document.
As the error states, to access the camera with the API getUserMedia, a secure channel (https://) is required.
If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via
file:///andhttp://localhost.
To make sure your web application can access the camera, try to configure your web server to support HTTPS. The following links may help.
For testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say "the site is not secure". In this case, go to the certificate settings and trust this certificate.
In a production environment, you will need a valid HTTPS certificate that does not have this issue. If you don't have one yet, you can get a free one from Let’s Encrypt. Of course, you are advised to apply for a paid certificate from companies such as Verisign, GeoTrust, etc.
Put something with a barcode in front of the camera and you'll see it located and decoded right in the UI.
Now, take a look at the sample code. You can find that there is nothing but two scripts inside the <body>
The following script includes the core library in the application via a jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
The same can be done with other CDNs like unpkg as well
<script src="https://unpkg.com/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
The api may change slightly between versions. Please use a specific version in your production environment to ensure stability.
The following script initializes and uses the library:
<script>
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt, result) => {alert(txt);}
}).then(scanner => {
barcodeScanner = scanner;
barcodeScanner.show();
});
</script>
For now, pay attention to the following two events.
onFrameRead
This event is triggered after a single frame is scanned. The results object contains all the barcode results that the library found on this frame.onUnduplicatedRead
This event is triggered when a new barcode (not a duplicate) is found. txt holds the barcode text value while result is an object that holds details of the found barcode.In the following sections, you'll find more detailed information on how the library works and how you can customize it to your needs.
The library is based on the WebAssembly standard, therefore, on first use, it needs some time to download and compile the WebAssembly files. After the first use, the program can cache the file so that the next time you can start from compiling.
Dynamsoft.BarcodeReader.loadWasm is the API used to start the initialization.
Use the following code to listen to the initialization process:
Dynamsoft.BarcodeReader.loadWasm()
.then(()=>{ /* success */ }, ex=>{console.error(ex.message||ex);})
However, other APIs like Dynamsoft.BarcodeReader.createInstance, Dynamsoft.BarcodeScanner.createInstance will call loadWasm internally. So you can listen to the initialization process during createInstance:
Dynamsoft.BarcodeReader.createInstance()
.then(reader=>{ /* success */ }, ex=>{console.error(ex.message||ex);})
Including the library with a script tag doesn't automatically initializes the library. When you want to load wasm in advance, and create a reader or scanner instance later, it is a good choice can call
loadWasm.
The detailed initialization includes the following steps:
Download the necessary resources. Usually we deploy the resources on cdn and set a long cache duration. The speed of cdn will greatly affect the feeling of the first experience. The resources can be obtained from the cache on the next visit.
The WebAssembly files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take seconds on some older devices.
The library needs to initialize every time the page loads.
When creating an instance of the BarcodeScanner object, there are a number of configuration options. The following code shows some of the most useful ones:
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
// The following two callbacks are explained in previous context
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt, result) => {alert(txt);}
}).then(async scanner => {
barcodeScanner = scanner;
// updateVideoSettings sets which camera and what resolution to use
await barcodeScanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: "environment" } });
let runtimeSettings = await barcodeScanner.getRuntimeSettings();
// Specify which symbologies are to enabled
runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;
// By default, the library assumes accurate focus and good lighting. The settings below are for more complex environments. Check out according API descriptions for more info.
runtimeSettings.localizationModes = [
Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
Dynamsoft.EnumLocalizationMode.LM_STATISTICS,
Dynamsoft.EnumLocalizationMode.LM_LINES,
0,0,0,0
];
// Discard results which have a low confidence score.
runtimeSettings.minResultConfidence = 30;
await barcodeScanner.updateRuntimeSettings(runtimeSettings);
let scanSettings = await barcodeScanner.getScanSettings();
// Disregard duplicated results found in a specified time period
scanSettings.duplicateForgetTime = 20000;
// Set a interval so that the CPU can relax
scanSettings.intervalTime = 300;
await barcodeScanner.updateScanSettings(scanSettings);
barcodeScanner.show();
})
As you can see in the code, there are basically three categories of configurations.
get/updateVideoSettings: Configures the data source, I.E., the video stream. These settings include which camera to use , the resolution, etc.. Check out more information here.
get/updateRuntimeSettings: Configures the decode engine. Find a full list of these settings and their corresponding descriptions here. Below lists the recommended settings for specific usage.
Try in JSFiddle
fast
let settings = await barcodeScanner.getRuntimeSettings();
settings.localizationModes = [Dynamsoft.EnumLocalizationMode.LM_STATISTICS, 0, 0, 0, 0, 0, 0, 0];
settings.deblurLevel = 0;
await barcodeScanner.updateRuntimeSettings(settings);
1D
let settings = await barcodeScanner.getRuntimeSettings();
settings.localizationModes = [
Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
settings.deblurLevel = 0;
await barcodeScanner.updateRuntimeSettings(settings);
2D
let settings = await barcodeScanner.getRuntimeSettings();
settings.localizationModes = [
Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,
Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,
Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];
settings.deblurLevel = 2;
await barcodeScanner.updateRuntimeSettings(settings);
get/updateScanSettings: Some settings about video scanning, include duplicateForgetTime, intervalTime and filter.
While the library provides a built-in BarcodeScanner which has its own UI, you are free to use your own UI. Check out the following code on how it's done.
<!DOCTYPE html>
<html>
<body>
<div id="div-video-container">
<video class="dbrScanner-video" playsinline="true"></video>
</div>
<!-- Please visit https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx to get a trial license. -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
<script>
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
UIElement: document.getElementById('div-video-container'),
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt, result) => {alert(txt);}
}).then(scanner => {
barcodeScanner = scanner;
barcodeScanner.show();
});
</script>
</body>
</html>
The code has specified the UIElement with the ID div-video-container as the data source element and has put a video element inside to show the camera video stream.
Important: The class name of the video element must be
dbrScanner-video.<video class="dbrScanner-video" playsinline="true"></video>
Next, you can add the camera list and resolution list.
If the class names match the default ones which are
dbrScanner-sel-cameraanddbrScanner-sel-resolution, the library will automatically populate the lists and handle the camera/resolution switching automatically.
<select class="dbrScanner-sel-camera"></select>
<select class="dbrScanner-sel-resolution"></select>
8 default resolutions will automatically show up.
Too many resolutions may be overwhelming for end users. Check out the following code on how to offer your own resolution options.
<select class="dbrScanner-sel-resolution">
<option class="dbrScanner-opt-gotResolution" value="got"></option>
<option data-width="1920" data-height="1080">1920 x 1080</option>
<option data-width="1280" data-height="720">1280 x 720</option>
<option data-width="640" data-height="480">640 x 480</option>
</select>
Possible Issue: Generally you need to provide a resolution that the camera supports. However, in case a camera does not support a specified resolution, it usually will just use the nearest supported resolution. As a result, the selected resolution may not be the actual resolution.
Resolution: To take care of this issue, you can add a option with the class name
dbrScanner-opt-gotResolution(as shown above) which the library will then use to show the actual resolution being used.
You may not want to use elements with the default class names to show the camera list or resolution list. In this case, you need to populate the two lists yourself.
For camera list, you can use the API getAllCameras() to get all available cameras and then populate them on the page.
<select id="custom-camera-list"></select>
let currentCamera = "";
let cameraList = document.getElementById("custom-camera-list");
barcodeScanner.show()
.then(() => barcodeScanner.getCurrentCamera())
.then(camera => {
currentCamera = camera;
})
.then(() => barcodeScanner.getAllCameras())
.then(allCameras => {
cameraList.options.length = 0;
for (let i = 0; i < allCameras.length; i++) {
let camera = allCameras[i];
cameraList.options.add(new Option(camera.label, camera.deviceId));
if (camera.deviceId == currentCamera.deviceId)
cameraList.selectedIndex = i;
}
});
Switch to the selected camera.
cameraList.onchange = () => {
barcodeScanner.setCurrentCamera(cameraList.options[cameraList.selectedIndex].value);
};
If you have more than one camera and would like to use a certain one of them. Try out the code below.
barcodeScanner.show()
.then(() => barcodeScanner.getAllCameras())
.then(allCameras => {
for (let camera of allCameras) {
if (camera.label == 'Your-Camera-Name') {
barcodeScanner.setCurrentCamera(camera.deviceId);
break;
}
}
});
For resolution list, you can show your preferred resolutions and use the API setResolution to set the selected option.
<select id="custom-camera-resolution">
<option data-width="1920" data-height="1080">1920 x 1080</option>
<option data-width="1280" data-height="720">1280 x 720</option>
<option data-width="640" data-height="480">640 x 480</option>
</select>
let resolutionList = document.getElementById("custom-camera-resolution");
resolutionList.onchange = () => {
barcodeScanner.setResolution(
resolutionList.options[resolutionList.selectedIndex].getAttribute("data-width"),
resolutionList.options[resolutionList.selectedIndex].getAttribute("data-height")
);
};
Include the following in your code to print internal logs in the console.
Dynamsoft.BarcodeReader._onLog = console.log;
Try the following code to show found barcodes in input elements on the page
<input id="ipt-0">
<input id="ipt-1">
<input id="ipt-2">
let iptIndex = 0;
let barcodeScanner = null;
Dynamsoft.BarcodeScanner.createInstance({
UIElement: document.getElementById('div-video-container'),
onFrameRead: results => {console.log(results);},
onUnduplicatedRead: (txt)=>{
document.getElementById('ipt-' + iptIndex).value = txt;
if(3 == ++iptIndex){
barcodeScanner.onUnduplicatedRead = undefined;
// Hide the scanner if you only need to read these three barcodes
barcodeScanner.hide();
}
}
}).then(scanner => {
barcodeScanner = scanner;
barcodeScanner.show();
});
To speed up the scanning process, you can choose to scan only a specific area/region.
let settings = await barcodeScanner.getRuntimeSettings();
/*
* 1 means true
* Using a percentage is easier
* The following code ignores 25% to each side of the video stream
*/
settings.region.regionMeasuredByPercentage = 1;
settings.region.regionLeft = 25;
settings.region.regionTop = 25;
settings.region.regionRight = 75;
settings.region.regionBottom = 75;
await barcodeScanner.updateRuntimeSettings(settings);
For commercial usage, we highly recommend self-hosted deployment. The following steps guide you through how to deploy the library on your own server.
Create a directory called dist on your server and put the following files in there.
Download zip to get these files.
dbr-<version>.js
dbr-<version>.worker.js
dbr-<version>.wasm.js
dbr-<version>.wasm
dbr-<version>.full.wasm.js
dbr-<version>.full.wasm
Step two: Configure the server
Make sure that your webserver serves the *.wasm file with Content-Type: application/wasm . Otherwise the browser won't be able to recognize it.
Basically, all you need to do is set the MIME type for .wasm to application/wasm.
Different servers are configured differently, below lists a few popular ones
- NGINX: mime.types
- IIS: Web.config
- Java™ EE web app: web.xml
- Node.js: npm mime
https://www.dynamsoft.com/Products/Dynamic-Barcode-Reader-News.aspx#javascript
It takes several steps to activate a purchased license, the following steps assume you have already acquired a commercial license from Dynamsoft. If you haven't done so, you can purchase here.
Step One : Create a Dynamsoft Account
If you don't have a Dynamsoft Account yet, sign up here.
Step Two : Log into Dynamsoft Customer Portal
Once logged in, click Barcode Reader SDK on the menu bar on the left under License Center and you should be able to see your purchased key on the right pane.
Step Three : Activate the License
Under Status, click the link Activate Now where you will be asked to input a domain which your license key will be bound to. The domain binding is a security feature to protect your license, although it's optional, it's highly recommended.
A few examples of the domain
demo.dynamsoft.com
*.dynamsoft.com
*.dynamsoft.com;*.yoursite.com
Step Four : Use the License
You may have noticed that in all the samples above, we have the following line of code
<!-- Please visit https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx to get a trial license. -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.2.3-v2/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
To use your license, you simply need to replace PRODUCT-KEYS with it.
https://www.dynamsoft.com/Products/barcode-reader-license-agreement.aspx#javascript
If there are any questions, please feel free to contact support@dynamsoft.com.
FAQs
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
The npm package dynamsoft-javascript-barcode receives a total of 0 weekly downloads. As such, dynamsoft-javascript-barcode popularity was classified as not popular.
We found that dynamsoft-javascript-barcode demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.