BarcodeScanner
class
BarcodeScanner extends BarcodeReader
The
BarcodeScanner
class is used for video decoding.Node.js
does not supportBarcodeScanner
.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.
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.
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.
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 isdisplay: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 isdisplay:none;
.isOpen Check if the scanner is open.
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.
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.
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.
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.
Static Property Description version (BarcodeReader) Get the current version.
Property Description bSaveOriCanvas If set to true
, save the original image inoriCanvas
.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
static
createInstance(): Promise<BarcodeScanner>
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
- decodeCurrentFrame(): Promise<TextResult[]>
Decode barcodes from the current frame of the video.
await scanner.showVideo(); console.log(await scanner.decodeCurrentFrame());
Open and Close
open
- open(): Promise<ScannerPlayCallbackInfo>
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
- show(): Promise<ScannerPlayCallbackInfo>
Bind UI, open the camera, start decoding, and remove the UIElement
display
style if the original style isdisplay: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
- openVideo(): Promise<ScannerPlayCallbackInfo>
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
- showVideo(): Promise<ScannerPlayCallbackInfo>
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
event
onPlayed?: (info: ScannerPlayCallbackInfo) => void
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
- play(deviceId?: string, width?: number, height?: number): Promise<ScannerPlayCallbackInfo>
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
- getAllCameras(): Promise<VideoDeviceInfo[]>
Get infomation of all available cameras on the device.
let cameras = await scanner.getAllCameras(); if(cameras.length){ await scanner.setCurrentCamera(cameras[0]); }
getCurrentCamera
- getCurrentCamera(): Promise<VideoDeviceInfo | null>
Get information about the currently used camera.
let camera = await scanner.getCurrentCamera();
setCurrentCamera
- setCurrentCamera(cameraInfoOrDeviceId: any): Promise<ScannerPlayCallbackInfo>
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
- getVideoSettings(): MediaStreamConstraints
Get current video settings.
updateVideoSettings
- updateVideoSettings(MediaStreamConstraints: any): Promise<ScannerPlayCallbackInfo | void>
Modify and update video settings.
await scanner.updateVideoSettings({ video: {width: {ideal: 1280}, height: {ideal: 720}, facingMode: {ideal: 'environment'}} });
getCapabilities
- getCapabilities(): MediaTrackCapabilities
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();
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();
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
- getRuntimeSettings(): Promise<RuntimeSettings>
Gets current runtime settings.
let settings = await scanner.getRuntimeSettings(); settings.deblurLevel = 5; await scanner.updateRuntimeSettings(settings);
updateRuntimeSettings
- updateRuntimeSettings(settings: RuntimeSettings | string): Promise<void>
Update runtime settings with a given struct, or a string of
speed
,balance
,coverage
andsingle
to use preset settings for BarcodeScanner.We recommend using the speed-optimized
single
preset if scanning only one barcode at a time. Thesingle
is only available inBarcodeScanner
.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
readonly
oriCanvas: HTMLCanvasElement | OffscreenCanvas
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. Useframe
ortrue
to play a sound when any barcode is found within a frame. Useunduplicated
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
- soundOnSuccessfullRead: HTMLAudioElement
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. Useframe
ortrue
to vibrate when any barcode is found within a frame. Useunduplicated
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.
getScanSettings
- getScanSettings(): Promise<ScanSettings>
Get current scan settings.
let scanSettings = await scanner.getScanSettings(); scanSettings.intervalTime = 50; scanSettings.duplicateForgetTime = 1000; await scanner.updateScanSettings(scanSettings);
updateScanSettings
- updateScanSettings(settings: ScanSettings): Promise<void>
Modify and update scan settings.
let scanSettings = await scanner.getScanSettings(); scanSettings.intervalTime = 50; scanSettings.duplicateForgetTime = 1000; await scanner.updateScanSettings(scanSettings);