Table of contents

Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

Advanced Customizations

Show internal logs

Include the following in your code to print internal logs in the console.

Dynamsoft.DBR.BarcodeReader._onLog = console.log;

Read a specific area/region

To speed up the scanning process, you can choose to scan only a specific area/region.

let settings = await scanner.getRuntimeSettings();
 * The following code shrinks the decoding region by 25% on all sides
settings.region.regionMeasuredByPercentage = 1;
settings.region.regionLeft = 25;
settings.region.regionTop = 25;
settings.region.regionRight = 75;
settings.region.regionBottom = 75;
await scanner.updateRuntimeSettings(settings);

Try in JSFiddle

Set mode arguments

To precisely control a mode, you can adjust its specific parameters.

let settings = await scanner.getRuntimeSettings();

 * The following code sets the sensitivity of the TextureDetectionModes to 9

settings.furtherModes.textureDetectionModes = [            
Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION, 0, 0, 0, 0, 0, 0, 0];

await scanner.updateRuntimeSettings(settings);
// The 2nd parameter 0 specifies the first mode of TextureDetectionModes, which is "Dynamsoft.DBR.EnumTextureDetectionMode.TDM_GENERAL_WIDTH_CONCENTRATION" in this case.
await scanner.setModeArgument("TextureDetectionModes", 0, "Sensitivity", "9" ); 

Display the intermediate result images or the original canvas

The intermediate result images are created when intermediateResultTypes is set in RuntimeSettings. Then they can be returned with the method getIntermediateResults(). These images can be used to show and debug the barcode reading process.

The original canvas (oriCanvas) means the actual canvas which holds the image to be passed to the barcode reader engine for decoding.


For efficiency, the library may utilize WebGL (Web Graphics Library) for preprocessing an image before passing it to the barcode reader engine. If WebGL is used, the image captured from the camera will not be rendered on the canvas, instead, it gets processed by WebGL first and then is passed to the barcode reader engine directly. In this case, there won’t be an original canvas. Therefore, if bSaveOriCanvas is set to true for a BarcodeReader or BarcodeScanenr instance, the WebGL feature will be disabled for that instance.

On the other hand, if WebGL is disabled and you try to get the intermediate result specified by EnumIntermediateResultType.IRT_ORIGINAL_IMAGE, it will be exactly the same image as you would get with oriCanvas.

The following shows how to display these images on the page

<div id='scannerV' style="width:50vw;height:50vh"></div>
<div id='cvses'></div>
// If `_bUseFullFeature` is set to false, the original canvas will be displayed, otherwise, the intermediate result image(s) is displayed
Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true;
let scanner = null;
(async () => {
    scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
    /* The default of `_bUseWebgl` is true which means the intermediate result for  
       IRT_ORIGINAL_IMAGE will be one that has been preprocessed by WebGL */ 
    scanner._bUseWebgl = false;
    await scanner.updateRuntimeSettings('balance');
    let rs = await scanner.getRuntimeSettings();
    if (Dynamsoft.DBR.BarcodeReader._bUseFullFeature) {
        rs.intermediateResultTypes = 1;
    } else {
        scanner.bSaveOriCanvas = true;
    await scanner.updateRuntimeSettings(rs);
    scanner.onUnduplicatedRead = async (txt, result) => {
        try {
            let cvss = Dynamsoft.DBR.BarcodeReader._bUseFullFeature ? await scanner.getIntermediateCanvas() : [scanner.oriCanvas];
            for (let cvs of cvss) {
                if (cvs.convertToBlob) {
                    var newCanvas = document.createElement("canvas");
                    var ctx = newCanvas.getContext("bitmaprenderer");
                } else {
        } catch (ex) {
    await scanner.show();

This page is compatible for:

Version 7.5

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest Version
  • version 8.0
  • version 7.6
  • version 7.5
Change +
© 2003–2020 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support