![Maven Central Adds Sigstore Signature Validation](https://cdn.sanity.io/images/cgdhsj6q/production/7da3bc8a946cfb5df15d7fcf49767faedc72b483-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
dynamsoft-barcode-reader-bundle
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 Barcode Reader JavaScript Edition (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code.
Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
Table of Contents
Popular Examples
You can also:
Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.
Basic Requirements
The complete code of the "Hello World" example is shown below
<!DOCTYPE html>
<html>
<body>
<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
<script>
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
(async () => {
let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
cvRouter.setInput(cameraEnhancer);
const resultsContainer = document.querySelector("#results");
cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
if (result.barcodeResultItems?.length) {
resultsContainer.textContent = '';
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
}});
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
})();
</script>
</body>
</html>
Don't want to deal with too many details? We also have an out-of-the-box version:
Easy Barcode Scanner >> available for your reference.
// Scan instantly with a single function! let txt = await EasyBarcodeScanner.scan();
Dynamsoft.License.LicenseManager.initLicense()
: This method initializes the license for using the SDK in the application. Note that the string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example points to an online license that requires a network connection to work. Read more on Specify the license.
Dynamsoft.Core.CoreModule.loadWasm(["dbr"])
: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
Dynamsoft.CVR.CaptureVisionRouter.createInstance()
: This method creates a CaptureVisionRouter
object cvRouter
which controls the entire process in three steps:
cvRouter
connects to the image source through the ImageSourceAdapter interface with the method setInput()
.
cvRouter.setInput(cameraEnhancer);
The image source in our case is a CameraEnhancer object created with
Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)
cvRouter
starts the process by specifying a preset template "ReadSingleBarcode" in the method startCapturing()
.
cvRouter.startCapturing("ReadSingleBarcode");
CapturedResultReceiver
object is registered to cvRouter
via the method addResultReceiver()
. For more information, please check out Register a result receiver.
cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
cvRouter
via the method addResultFilter()
.
cvRouter.addResultFilter(filter);
Read more on Capture Vision Router.
You can run the example deployed to the Dynamsoft Demo Server or test it with JSFiddle code editor.
You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
When a barcode is decoded, you will see the result text show up under the video and the barcode location will be highlighted in the video feed.
Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
Secure Contexts:
If you open the web page as
http://
, our SDK may not work correctly because the MediaDevices: getUserMedia() and other methods only work in secure contexts (HTTPS,localhost
,127.0.0.1
,file://
), in some or all supporting browsers.Regarding configuring https on your server, these guides for nginx / IIS / tomcat / nodejs might help.
If the test doesn't go as expected, you can contact us.
The simplest way to include the SDK is to use either the jsDelivr or UNPKG CDN. The "hello world" example above uses jsDelivr.
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
UNPKG
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
However, please DO NOT use download2.dynamsoft.com
resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
# or
yarn add dynamsoft-barcode-reader-bundle@10.4.3100 -E
NOTE that in frameworks, you need to specify the engineResourcePaths.
Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
From the website
Download Dynamsoft Barcode Reader JavaScript Package
The resources are located at path dynamsoft/distributables/<pkg>@<version>
.
From npm
npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
# Compared with using CDN, you need to set up more resources.
npm i dynamsoft-capture-vision-std@1.4.21 -E
npm i dynamsoft-image-processing@2.4.31 -E
The resources are located at the path node_modules/<pkg>
, without @<version>
. You must copy "dynamsoft-xxx" packages elsewhere and add @<version>
. The <version>
can be obtained from package.json
of each package. Another thing to do is to specify the engineResourcePaths so that the SDK can correctly locate the resources.
Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
You can typically include SDK like this:
<script src="path/to/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
Note:
Certain legacy web application servers may lack support for the application/wasm
mimetype for .wasm files. To address this, you have two options:
To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application.
Cache-Control: max-age=31536000
Reference: Cache-Control.
Before using the SDK, you need to configure a few things.
To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the Request a Trial License link.
Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
This is usually only required with frameworks like Angular, React or Vue.
The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.).
// in framework
import { CoreModule } from "dynamsoft-barcode-reader-bundle";
CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
// in pure js
Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
// Preload the .wasm files
await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
To use the SDK, we first create a CaptureVisionRouter
object.
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
let cvRouter = null;
try {
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
} catch (ex) {
console.error(ex);
}
Tip:
When creating a CaptureVisionRouter
object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as pCvRouter
in the following code:
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
let pCvRouter = null; // The helper variable which is a promise of cvRouter
let cvRouter = null;
document.getElementById('btn-scan').addEventListener('click', async () => {
try {
cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
} catch (ex) {
console.error(ex);
}
});
The CaptureVisionRouter
object, denoted as cvRouter
, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a CameraEnhancer
object, identified as cameraEnhancer
, which is specifically designed to capture image frames from the video feed and subsequently forward them to cvRouter
.
To enable video streaming on the webpage, we create a CameraView
object referred to as cameraView
, which is then passed to cameraEnhancer
, and its content is displayed on the webpage.
<div id="camera-view-container" style="width: 100%; height: 100vh"></div>
let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
cvRouter.setInput(cameraEnhancer);
Once the image processing is complete, the results are sent to all the registered CapturedResultReceiver
objects. Each CapturedResultReceiver
object may encompass one or multiple callback functions associated with various result types. This time we use onCapturedResultReceived
:
const resultsContainer = document.querySelector("#results");
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onCapturedResultReceived = (result) => {
if (result.barcodeResultItems?.length) {
resultsContainer.textContent = '';
for (let item of result.barcodeResultItems) {
// In this example, the barcode results are displayed on the page below the video.
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
};
cvRouter.addResultReceiver(resultReceiver);
You can also write code like this. It is the same.
const resultsContainer = document.querySelector("#results");
cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
if (result.barcodeResultItems?.length) {
resultsContainer.textContent = '';
for (let item of result.barcodeResultItems) {
// In this example, the barcode results are displayed on the page below the video.
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}
}});
Check out CapturedResultReceiver for more information.
With the setup now complete, we can proceed to process the images in two straightforward steps:
open()
method on cameraEnhancer
to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to cvRouter
as per its request.await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
Note:
cvRouter
is engineered to consistently request images from the image source.Template Name | Function Description |
---|---|
ReadBarcodes_Default | Scans multiple barcodes by default setting. |
ReadSingleBarcode | Quickly scans a single barcode. |
ReadBarcodes_SpeedFirst | Prioritizes speed in scanning multiple barcodes. |
ReadBarcodes_ReadRateFirst | Maximizes the number of barcodes read. |
ReadBarcodes_Balance | Balances speed and quantity in reading multiple barcodes. |
ReadDenseBarcodes | Specialized in reading barcodes with high information density. |
ReadDistantBarcodes | Capable of reading barcodes from extended distances. |
Read more on the preset CaptureVisionTemplates.
When making adjustments to some basic tasks, we often only need to modify SimplifiedCaptureVisionSettings.
The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.barcodeSettings.barcodeFormatIds =
Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
For a list of adjustable barcode settings, check out SimplifiedBarcodeReaderSettings.
Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.capturedResultItemTypes |=
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.capturedResultItemTypes =
Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
Please be aware that it is necessary to update the CapturedResultReceiver
object to obtain the original image. For instance:
const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
resultReceiver.onCapturedResultReceived = (result) => {
if (result.barcodeResultItems?.length) {
// Use a filter to get the image on which barcodes are found.
let image = result.items.filter(
item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
)[0].imageData;
}
};
The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
settings.minImageCaptureInterval = 500;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the cameraEnhancer
image source.
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// In this example, we set the scan region to cover the central 25% of the image.
cameraEnhancer.setScanRegion({
x: 25,
y: 25,
width: 50,
height: 50,
isMeasuredInPercentage: true,
});
Note:
cameraEnhancer
enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.See Also:
The preset templates have many more settings that can be customized to suit your use case best. If you download the SDK from Dynamsoft website, you can find the templates under
Upon completing the template editing, you can invoke the initSettings
method and provide it with the template path as an argument.
await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the MultiFrameResultCrossFilter object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
await cvRouter.addResultFilter(filter);
Note:
enableResultCrossVerification
was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
Note:
enableResultDeduplication
was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
Under certain circumstances, this duration can be extended with the method setDuplicateForgetTime()
.
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
await cvRouter.addResultFilter(filter);
You can also enable both options at the same time:
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
filter.enableResultDeduplication("barcode", true);
filter.setDuplicateForgetTime(5000);
await cvRouter.addResultFilter(filter);
When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
The following code snippet adds a "beep" sound for when a barcode is found:
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (result) => {
if (result.barcodeResultItems.length > 0) {
Dynamsoft.DCE.Feedback.beep();
}
};
cvRouter.addResultReceiver(resultReceiver);
// Create a CameraView instance with default settings
let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
// Create a CameraView instance within a specified DOM element
let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
// Create a CameraView instance using a custom UI file path
let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
// Get the UI element associated with the cameraView instance
let uiElement = cameraView.getUIElement();
// Remove the camera selection dropdown from the CameraView's UI element
uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
// Remove the resolution selection dropdown from the CameraView's UI element
uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to customize the UI.
You can check out the detailed documentation about the APIs of the SDK at https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.3100.
If you want to upgrade the SDK from an old version to a newer one, please see how to upgrade.
Learn about what are included in each release at https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html.
Now that you have got the SDK integrated, you can choose to move forward in the following directions
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-barcode-reader-bundle receives a total of 0 weekly downloads. As such, dynamsoft-barcode-reader-bundle popularity was classified as not popular.
We found that dynamsoft-barcode-reader-bundle demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.