Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
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.

BarcodeScanner

The BarcodeScanner class is used for video decoding. Node.js does not support BarcodeScanner.

let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
scanner.onUnduplicatedRead = txt => console.log(txt);
await scanner.show();


Index

Initialize the Engine (Inherited from BarcodeReader)

Static Property Description
engineResourcePath (BarcodeReader) Specify the engine (WASM) url.
_bUseFullFeature (BarcodeReader) If set to true, use the full-featured WASM module.
Static Method Description
isLoaded (BarcodeReader) Check if the decoding module is loaded.
loadWasm (BarcodeReader) Manually load and compile the decoding WASM module.


Create and Destroy Instance

Property Description
bDestroyed Indicates whether the BarcodeScanner instance has been destroyed.
Static Method Description
createInstance Create a BarcodeScanner instance.
Method Description
destroy Destroy the BarcodeScanner instance.


Decode Barcode

Event Description
onUnduplicatedRead Triggered when a new, unduplicated barcode is found.
onFrameRead Triggered after a frame has been scanned.
Method Description
decodeCurrentFrame Decode barcodes from the current frame of the video.


Open and Close

Changing the barcode decoding process will affect the speed and accuracy.

Method Description
open Bind UI, open the camera, start decoding.
close Stop decoding, release camera, unbind UI.
show Bind UI, open the camera, start decoding, and remove the UIElement display style if the original style is display:none;
hide Stop decoding, release camera, unbind UI, and set the Element as display:none;.
openVideo Bind UI, open the camera, but not decode.
showVideo Bind UI, open the camera, but not decode, and remove the UIElement display style if the original style is display:none;.
isOpen Check if the scanner is open.


Play and Pause

Changing the barcode decoding process will affect the speed and accuracy.

Event Description
onPlayed Triggered when the camera video stream is played.
Method Description
play Continue the video.
pause Pause the video. Do not release the camera.
stop Stop the video, and release the camera.
pauseScan Pause the decoding process.
resumeScan Resume the decoding process.


UI

Changing the barcode decoding process will affect the speed and accuracy.

Property Description
defaultUIElementURL The url of the default scanner UI.
regionMaskFillStyle Set the style used when filling the mask beyond the region.
regionMaskStrokeStyle Set the style of the region border.
regionMaskLineWidth Set the width of the region border.
barcodeFillStyle Set the style used when filling in located barcode.
barcodeStrokeStyle Set the style of the located barcode border.
barcodeLineWidth Set the width of the located barcode border.
Method Description
getUIElement Get HTML element containing the BarcodeScanner instance.
setUIElement Set HTML element containing the BarcodeScanner instance.


Camera Settings

Changing the barcode decoding process will affect the speed and accuracy.

Method Description
getAllCameras Get infomation of all available cameras on the device.
getCurrentCamera Get information about the currently used camera.
setCurrentCamera Choose the camera and play it by its information or devide id.
getResolution Get current camera resolution.
setResolution Set current camera resolution.
getVideoSettings Get current video settings.
updateVideoSettings Modify and update video settings.
getCapabilities Get the camera capabilities.
turnOnTorch Turn on the torch/flashlight.
turnOffTorch Turn off the torch/flashlight.
setColorTemperature Adjusts the color temperature.
setExposureCompensation Adjusts the exposure level.
setZoom Adjusts the zoom ratio.
setFrameRate Adjusts the frame rate.


Decoding Settings

Changing the barcode decoding process will affect the speed and accuracy.

Method Description
getRuntimeSettings Get current runtime settings.
updateRuntimeSettings Modify and update the current runtime settings.
resetRuntimeSettings Reset runtime settings to default.
getModeArgument Get argument value for the specified mode parameter.
setModeArgument Set argument value for the specified mode parameter.


License (Inherited from BarcodeReader)

Property Description
productKeys (BarcodeReader) Get or set the Dynamsoft Barcode Reader SDK product keys.
licenseServer (BarcodeReader) Specify the license server URL.
handshakeCode (BarcodeReader) Use Handshake Code to get authentication from network.
organizationID (BarcodeReader) Use organization ID to get authentication from network.
sessionPassword (BarcodeReader) Specify a password to protect the Handshake Code from abuse.


Other

Static Property Description
version (BarcodeReader) Get the current version.
Property Description
bSaveOriCanvas If set to true, save the original image in oriCanvas.
oriCanvas An canvas object that holds the original image.
bPlaySoundOnSuccessfulRead Whether to play sound when the scanner reads a barcode successfully.
soundOnSuccessfullRead The sound to play when the scanner get successfull read.
bVibrateOnSuccessfulRead Whether to vibrate when the scanner reads a barcode successfully.
vibrateDuration Get or set how long (ms) the vibration lasts.
Static Method Description
detectEnvironment (BarcodeReader) Detect environment and get a report.
Method Description
getScanSettings Get current scan settings.
updateScanSettings Modify and update scan settings.


Create and Destroy Instance

bDestroyed

  • bDestroyed: boolean

Indicates whether the instance has been destroyed.


createInstance

Create a BarcodeScanner instance.

let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();


destroy

  • destroy(): Promise<void>

Destroy the BarcodeScanner instance. If your page needs to create new instances from time to time, don’t forget to destroy unused old instances, otherwise it will cause memory leaks.


Decode Barcode

onUnduplicatedRead

  • event onUnduplicatedRead?: (txt: string, result: TextResult) => void

This event is triggered when a new, unduplicated barcode is found. txt holds the barcode text string. result contains more info. Old barcodes will be remembered for duplicateForgetTime.

scanner.onUnduplicatedRead = (txt, result) => {
  alert(txt);
  console.log(result);
}


onFrameRead

  • event onFrameRead?: (results: TextResult[]) => void

The event is triggered after a frame has been scanned. The results object contains all the barcode results in this frame.

scanner.onFrameRead = results => {
    for(let result of results){
        console.log(result.barcodeText);
    }
};


decodeCurrentFrame

Decode barcodes from the current frame of the video.

await scanner.showVideo();
console.log(await scanner.decodeCurrentFrame());

Open and Close

open

Bind UI, open the camera, start decoding.

await scanner.setUIElement(document.getElementById("my-barcode-scanner"));
scanner.onUnduplicatedRead = (txt, result) => { alert(txt); console.log(result); };
await scanner.open();

@see show


close

  • close(): Promise<void>

Stop decoding, release camera, unbind UI.

await scanner.open();
await scanner.close();

await scanner.openVideo();
await scanner.close();


show

Bind UI, open the camera, start decoding, and remove the UIElement display style if the original style is display:none;.

await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html");
scanner.onUnduplicatedRead = (txt, result) => { alert(txt); console.log(result); };
await scanner.show();


hide

  • hide(): Promise<void>

Stop decoding, release camera, unbind UI.

await scanner.open();
await scanner.hide();

await scanner.openVideo();
await scanner.hide();


openVideo

Bind UI, open the camera, but not decode.

await scanner.setUIElement(document.getElementById("my-barcode-scanner"));
await scanner.openVideo();
console.log(await scanner.decodeCurrentFrame());


showVideo

Bind UI, open the camera, but not decode.

await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html");
await scanner.showVideo();
console.log(await scanner.decodeCurrentFrame());


isOpen

  • isOpen(): boolean

Check if the scanner is open.


Play and Pause

onPlayed

Triggered when the camera video stream is played.

scanner.onplayed = rsl=>{ console.log(rsl.width+'x'+rsl.height) };
await scanner.show(); // or open, play, setCurrentCamera, like these.


play

Continue the video.

scanner.pause();
\\*** a lot of work ***
await scanner.play();


pause

  • pause(): void

Pause the video. Do not release the camera.


stop

  • stop(): void

Stop the video, and release the camera.


pauseScan

  • pauseScan(): void

Pause the decoding process.


resumeScan

  • resumeScan(): void

Resume the decoding process.


UI

defaultUIElementURL

  • static defaultUIElementURL: string

The url of the default scanner UI.

Can only be changed before createInstance.

Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html";
let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
await scanner.show();


regionMaskFillStyle

  • regionMaskFillStyle: string = “rgba(0,0,0,0.5)”

Set the style used when filling the mask beyond the region.


regionMaskStrokeStyle

  • regionMaskStrokeStyle: string = “rgb(254,142,20)”

Set the style of the region border.


regionMaskLineWidth

  • regionMaskLineWidth: number = 2

Set the style used when filling in located barcode.


barcodeFillStyle

  • barcodeFillStyle: string = “rgba(254,180,32,0.3)”

Set the style used when filling in located barcode.


barcodeStrokeStyle

  • barcodeStrokeStyle: string = “rgba(254,180,32,0.9)”

Set the style of the located barcode border.


barcodeLineWidth

  • barcodeLineWidth: number = 1

Set the width of the located barcode border.


getUIElement

  • getUIElement(): HTMLElement

Get HTML element containing the BarcodeScanner instance.


setUIElement

  • setUIElement(elementOrUrl: HTMLElement | string): Promise<void>

Set html element containing the BarcodeScanner instance.

<video class="dbrScanner-video" playsinline="true"></video>
<script>
  let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
  await scanner.setUIElement(document.getElementsByClassName("dbrScanner-video")[0]);
  await scanner.open();
</script>
<!-- <video class="dbrScanner-video" playsinline="true"></video> -->
<script>
  let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
  await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.scanner.html");
  await scanner.show();
</script>


Camera Settings

getAllCameras

Get infomation of all available cameras on the device.

let cameras = await scanner.getAllCameras();
if(cameras.length){
  await scanner.setCurrentCamera(cameras[0]);
}


getCurrentCamera

Get information about the currently used camera.

let camera = await scanner.getCurrentCamera();


setCurrentCamera

Choose the camera and play it by its information or devide id.

let cameras = await scanner.getAllCameras();
if(cameras.length){
  await scanner.setCurrentCamera(cameras[0]);
}


getResolution

  • getResolution(): number[]

Get current camera resolution.

let rsl = await scanner.getResolution();
console.log(rsl.width + " x " + rsl.height);


setResolution

  • setResolution(width: number | number[], height: number)

Set current camera resolution.

await scanner.setResolution(width, height);


getVideoSettings

Get current video settings.


updateVideoSettings

Modify and update video settings.

await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} });


getCapabilities

Gets the camera capabilities.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

> scanner.getCapabilities()
< {
  "aspectRatio":{"max":3840,"min":0.000462962962962963},
  "colorTemperature":{max: 7000, min: 2850, step: 50},
  "deviceId":"1e...3af7",
  "exposureCompensation": {max: 2.0000040531158447, min: -2.0000040531158447, step: 0.16666699945926666},
  "exposureMode":["continuous","manual"],
  "facingMode":["environment"],
  "focusMode":["continuous","single-shot","manual"],
  "frameRate":{"max":30,"min":0},
  "groupId":"71...a935",
  "height":{"max":2160,"min":1},
  "resizeMode":["none","crop-and-scale"],
  "torch":true,
  "whiteBalanceMode":["continuous","manual"],
  "width":{"max":3840,"min":1},
  "zoom":{max: 606, min: 100, step: 2}
}


turnOnTorch

  • turnOnTorch(): Promise<void>

Turns off the Torch.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.turnOnTorch();

@see turnOffTorch getCapabilities


turnOffTorch

  • turnOffTorch(): Promise<void>

Turns off the torch.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.turnOffTorch();

@see turnOnTorch getCapabilities


setColorTemperature

  • setColorTemperature(value: number): Promise<void>

Adjusts the color temperature.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.setColorTemperature(5000);

@see getCapabilities


setExposureCompensation

  • setExposureCompensation(value: number): Promise<void>

Adjusts the exposure level.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.setExposureCompensation(-0.7);

@see getCapabilities


setZoom

  • setZoom(value: number): Promise<void>

Adjusts the zoom ratio.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.setZoom(400);

@see getCapabilities


setFrameRate

  • setFrameRate(value: number): Promise<void>

Adjusts the frame rate.

This method should be called when the camera is turned on. Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.

await scanner.setFrameRate(10);

@see getCapabilities


Decoding Settings

getRuntimeSettings

Gets current runtime settings.

let settings = await scanner.getRuntimeSettings();
settings.deblurLevel = 5;
await scanner.updateRuntimeSettings(settings);


updateRuntimeSettings

Update runtime settings with a given struct, or a string of speed, balance, coverage and single to use preset settings for BarcodeScanner.

We recommend using the speed-optimized single preset if scanning only one barcode at a time. The single is only available in BarcodeScanner.

The default settings for BarcodeScanner is single.

await scanner.updateRuntimeSettings('balance');
let settings = await scanner.getRuntimeSettings();
settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED;
await scanner.updateRuntimeSettings(settings);

@see RuntimeSettings


resetRuntimeSettings

  • resetRuntimeSettings(): Promise<void>

Resets all parameters to default values.

await scanner.resetRuntimeSettings();


getModeArgument

  • getModeArgument(modeName: string, index: number, argumentName: string): Promise<string>

Get argument value for the specified mode parameter.

let argumentValue = await scanner.getModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy");

@see C++ getModeArgument


setModeArgument

  • setModeArgument(modeName: string, index: number, argumentName: string, argumentValue: string): Promise<string>

Set argument value for the specified mode parameter.

await scanner.setModeArgument("BinarizationModes", 0, "EnableFillBinaryVacancy", "1");

@see C++ setModeArgument


Other

bSaveOriCanvas

  • bSaveOriCanvas: boolean = false;

Whether to save the original image into canvas.

scanner.bSaveOriCanvas = true;
let results = await scanner.decode(source);
document.body.append(scanner.oriCanvas);


oriCanvas

An canvas object that holds the original image.

scanner.bSaveOriCanvas = true;
let results = await scanner.decode(source);
document.body.append(scanner.oriCanvas);


bPlaySoundOnSuccessfulRead

  • bPlaySoundOnSuccessfulRead: (boolean | string) = false;

Whether to play sound when the scanner reads a barcode successfully. Default value is false, which does not play sound. Use frame or true to play a sound when any barcode is found within a frame. Use unduplicated to play a sound only when any unique/unduplicated barcode is found within a frame.

// A user gesture required. https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies
startPlayButton.addEventListener('click', function() {
  scanner.bPlaySoundOnSuccessfulRead = true;
});

refer: favicon bug https://bugs.chromium.org/p/chromium/issues/detail?id=1069731&q=favicon&can=2


soundOnSuccessfullRead

The sound to play when the scanner get successfull read.

scanner.soundOnSuccessfullRead = new Audio("./pi.mp3");


bVibrateOnSuccessfulRead

  • bVibrateOnSuccessfulRead: (boolean | string) = false

Whether to vibrate when the scanner reads a barcode successfully. Default value is false, which does not vibrate. Use frame or true to vibrate when any barcode is found within a frame. Use unduplicated to vibrate only when any unique/unduplicated barcode is found within a frame.

// Can I use? https://caniuse.com/?search=vibrate
// A user gesture required. https://developer.chrome.com/blog/autoplay/#chrome-enterprise-policies
startVibrateButton.addEventListener('click', function() {
  scanner.bVibrateOnSuccessfulRead = true;
});


vibrateDuration

  • vibrateDuration: number = 300

Get or set how long (ms) the vibration lasts.

@see bVibrateOnSuccessfulRead


getScanSettings

Get current scan settings.

let scanSettings = await scanner.getScanSettings();
scanSettings.intervalTime = 50;
scanSettings.duplicateForgetTime = 1000;
await scanner.updateScanSettings(scanSettings);


updateScanSettings

Modify and update scan settings.

let scanSettings = await scanner.getScanSettings();
scanSettings.intervalTime = 50;
scanSettings.duplicateForgetTime = 1000;
await scanner.updateScanSettings(scanSettings);


This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

version 8.2.5

  • Latest version
  • Version 9.x
    • Version 9.2.12
    • Version 9.0.2
    • Version 9.0.1
    • Version 9.0.0
  • Version 8.x
    • Version 8.8.7
    • Version 8.8.5
    • Version 8.8.3
    • Version 8.8.0
    • Version 8.6.3
    • Version 8.6.0
    • Version 8.4.0
    • Version 8.2.5
    • Version 8.2.3
    • Version 8.2.1
    • Version 8.2.0
    • Version 8.1.3
    • Version 8.1.2
    • Version 8.1.0
    • Version 8.0.0
  • Version 7.x
    • Version 7.6.0
    • Version 7.5.0
Change +
© 2003–2023 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support