Dev Center
Table of contents

BarcodeScanner for Video

A barcode scanner object gets access to a camera via the MediaDevices interface, then uses its built-in UI to show the camera input and perform continuous barcode scanning on the incoming frames.

The default built-in UI of each barcode scanner is defined in the file “dbr.ui.html”. If used directly, the UI will fit the entire page and sit on top. There are a few ways to customize it, read more on how to Customize the UI.

Although a barcode scanner is designed to scan barcodes from a video input, it also supports a special mode called singleFrameMode which allows the user to select a still image or take a shot with the mobile camera for barcode scanning.

The BarcodeScanner is a child class of BarcodeReader and inherits all its methods and properties which will not be covered in this article.

The following code snippet shows the basic usage of the BarcodeScanner class.

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

API Index

Create and Destroy Instances

API Name Description
createInstance() Creates a BarcodeScanner instance.
destroyContext() Destroys the BarcodeScanner instance.
isContextDestroyed() Indicates whether the instance has been destroyed.

Decode Barcodes

API Name Description
onUniqueRead This event is triggered when a new, unduplicated barcode is found.
onFrameRead This event is triggered after the library finishes scanning a frame.

Basic Interactions

API Name Description
show() Binds and shows UI, opens the camera and starts decoding.
hide() Stops decoding, releases camera, unbinds and hides UI.
open() Binds UI, turns on the camera and starts decoding.
close() Stops decoding, releases camera and unbinds UI.
isOpen() Indicates whether the camera is turned on.

Scan Settings

API Name Description
singleFrameMode Returns or sets whether to enable the singe-frame mode.
getScanSettings() Returns the current scan settings.
updateScanSettings() Changes scan settings with the object passed in.

UI Control

API Name Description
video Returns HTMLVideoElement element that the BarcodeScanner instance used.
getUIElement() Returns the HTML element that is used by the BarcodeScanner instance.
setUIElement() Specifies an HTML element for the BarcodeScanner instance to use as its UI.
defaultUIElementURL Returns or sets the URL of the .html file that defines the default UI Element.
barcodeFillStyle Specifies the color used inside the shape which highlights a found barcode.
barcodeStrokeStyle Specifies the color used to paint the outline of the shape which highlights a found barcode.
barcodeLineWidth Specifies the line width of the outline of the shape which highlights a found barcode.
regionMaskFillStyle Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input.
regionMaskStrokeStyle Specifies the color used to paint the outline of the scanning region.
barcodeFillStyleBeforeVerification Specifies the color used inside the shape which highlights a found linear barcode which has not been verified.
barcodeStrokeStyleBeforeVerification Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified.
barcodeLineWidthBeforeVerification Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified.
regionMaskLineWidth Specifies the width of the outline of the scanning region.
setVideoFit() Sets the object-fit CSS property of the video element.
getVideoFit() Returns the value of the object-fit CSS property of the video element.
ifShowScanRegionMask Whether to show the scan region mask.
showTip() Shows a Tip message.
hideTip() Hides the Tip message.
updateTipMessage() Changes the Tip message.
onTipSuggested() An event that gets triggered whenever a Tip is suggested.
convertToPageCoordinates() Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document.
convertToClientCoordinates() Converts coordinates of a barcode location to the coordinates within the application’s viewport at which the event occurred (as opposed to the coordinate within the page).

Camera Control

API Name Description
ifSkipCameraInspection Returns or sets whether to skip camera inspection at initialization to save time.
ifSaveLastUsedCamera Returns or sets whether to save the last used camera and resolution.
getAllCameras() Returns information of all available cameras on the device.
getCurrentCamera() Returns information about the current camera.
setCurrentCamera() Chooses a camera as the video source.
getResolution() Returns the resolution of the current video input.
setResolution() Sets the resolution of the current video input.
getVideoSettings() Returns the current video settings.
updateVideoSettings() Changes the video input.
onWarning A callback which is triggered when the resolution is not ideal (< 720P).
testCameraAccess() Test whether there is an available camera.

Video Decoding Process Control

API Name Description
play() Play the video if it is already open but paused or stopped.
onPlayed This event is triggered when the video stream starts playing.
pauseScan() Pauses the decoding process.
resumeScan() Resumes the decoding process.
pause() Pauses the video without releasing the camera.
stop() Stops the video and releases the camera.
videoSrc Sets or returns the source of the video.

Advanced Camera Control

API Name Description
getCapabilities() Inspects and returns the capabilities of the current camera.
getCameraSettings() Returns the current values for each constrainable property of the current camera.
getFrameRate() Returns the real-time frame rate.
setFrameRate() Adjusts the frame rate.
turnOnTorch() Turns on the torch/flashlight.
turnOffTorch() Turns off the torch/flashlight.
getZoomSettings() Returns the zoom settings.
setZoom() Zooms the video stream.
resetZoom() Resets the zoom level of the video.
getFocusSettings() Returns the focus settings.
setFocus() Sets how the camera focuses.
enableTapToFocus() Enables manual camera focus when clicking/tapping on the video.
disableTapToFocus() Disables manual camera focus when clicking/tapping on the video.
isTapToFocusEnabled() Returns whether clicking/tapping on the video invokes the camera to focus.
getColorTemperature() Returns the color temperature of the selected camera.
setColorTemperature() Adjusts the color temperature of the selected camera.
getExposureCompensation() Returns the exposure compensation index of the selected camera.
setExposureCompensation() Sets the exposure compensation index of the selected camera.

Inherited from the BarcodeReader Class

Change Settings

API Name Description
getRuntimeSettings() Returns the current runtime settings.
updateRuntimeSettings() Updates runtime settings with a given struct or a preset template.
resetRuntimeSettings() Resets all parameters to default values.
getModeArgument() Returns the argument value for the specified mode parameter.
setModeArgument() Sets the argument value for the specified mode parameter.

Auxiliary

API Name Description
ifSaveOriginalImageInACanvas Whether to save the original image into a <canvas> element.
getOriginalImageInACanvas() Returns an HTMLCanvasElement that holds the original image.

createInstance

Creates a BarcodeScanner instance.

static createInstance(): Promise<BarcodeScanner>

Return value

A promise resolving to the created BarcodeScanner object.

Code Snippet

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

See also

destroyContext

Destroys the BarcodeScanner instance. If your page needs to create a new instance from time to time, don’t forget to destroy unused old instances.

destroyContext(): void

Code Snippet

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

See also

isContextDestroyed

Returns whether the instance has been destroyed.

isContextDestroyed(): boolean

See also

onUniqueRead

Specifies an event handler which fires when a new, unduplicated barcode is found.

The library keeps each barcode result (type and value) in the buffer for a period of time (can be set with duplicateForgetTime) during which if a new result is an exact match, it’s seen as a duplicate and will again be kept for that period of time while the old result is removed and so on.

onUniqueRead: (txt: string, result: TextResult) => void

Arguments

txt : a string that holds the barcode text.

result : a TextResult object that contains more detailed info.

Code Snippet

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

See also

onFrameRead

Specifies an event handler which fires after the library finishes scanning a frame.

onFrameRead: (results: TextResult[]) => void

Arguments

results : an array of TextResult object that contains the barcode results in this frame.

Code Snippet

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

See also

show

Binds and shows UI, opens the camera and starts decoding.

If the UI doesn’t exist in the DOM tree, it is appended in the DOM first and then shown. If the UI already exists in the DOM tree but is hidden, it’ll be shown.

show(): Promise<ScannerPlayCallbackInfo>

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

scanner.onUniqueRead = (txt, result) => {
    alert(txt);
    console.log(result);
};
await scanner.show();

See also

hide

Stops decoding, releases camera, unbinds and hides UI.

hide(): void

Code Snippet

await scanner.show();
//...scan barcodes
scanner.hide();

See also

open

Binds UI, turns on the camera and starts decoding.

This method does not change the original state of the UI: if it doesn’t exist in the DOM tree, nothing shows up on the page; if it exists in the DOM tree, it may or may not show up depending on its original state.

open(): Promise<void>

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

await scanner.open();
//...scan barcodes
await scanner.close();

See also

close

Stops decoding, releases camera and unbinds UI.

close(): void

Code Snippet

await scanner.open();
//...scan barcodes
scanner.close();

See also

isOpen

Indicates whether the camera is turned on.

isOpen(): boolean

Return value

A boolean indicates whether the camera is turned on.

pauseScan

Pause continuous scanning but keep the video stream.

pauseScan(options?: object): void;

Parameters

options: Options to configure how the pause works. At present, it only contains one property keepResultsHighlighted which, when set to true, will keep the barcodes found on the frame (at the time of the pause) highlighted.

See also

resumeScan

Resumes the decoding process.

resumeScan(): void

See also

singleFrameMode

Returns or sets the status of single frame mode. If enabled, the video input will not be played and the user can choose to take a picture with the system camera (mobile only) or select an existing image from the photo library for barcode reading.

Because the system camera of a mobile device can provide pictures with better quality, the API is useful when facing complex scenarios such as reading the dense PDF417 code on a driver license.

It’s important to note that it will behave differently in different environments:

  • false: Stream the camera in the browser.
  • true | “image”: Prompt the user to select a local image.
  • “camera”:
    • On desktop: Prompt the user to select a local image.
    • On mobile devices: Invoke the system camera.

The single-frame mode can only be enabled or disabled before the video input starts playing (before scanner.open() is called).

singleFrameMode: boolean | "image" | "camera";

Default value

In general, the default value is false. But if the browser does not support the MediaDevices/getUserMedia, it will be set as true automatically when createInstance() is called.

Code Snippet

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

getScanSettings

Returns the current scan settings.

getScanSettings(): Promise<ScanSettings>

Return value

A promise resolving to a ScanSettings .

Code Snippet

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

See also

updateScanSettings

Changes scan settings with the object passed in.

updateScanSettings(settings: ScanSettings): Promise<void>

Parameters

settings : specifies the new scan settings.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

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

See also

video

Returns HTMLVideoElement element that the BarcodeScanner instance used.

readonly video: HTMLElement

getUIElement

Returns the HTML element that is used by the BarcodeScanner instance.

getUIElement(): HTMLElement

Return value

The HTML element that is used by the BarcodeScanner instance.

See Also

setUIElement

Specifies an HTML element for the BarcodeScanner instance to use as its UI. The structure inside the element determines the appearance of the UI. See more on how to customize the UI.

setUIElement(elementOrURL: HTMLElement | string): Promise<void>

Parameters

elementOrURL : specifies the element or the element url.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

<!-- Define an element that shows only the video input -->
<!-- The video element will be created and appended to the DIV element with the class 'dce-video-container' , make sure the class name is the same.
Besides, the CSS property 'position' of the DIV element must be either 'relative', 'absolute', 'fixed', or 'sticky'. -->
<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
<script>
    (async () => {
        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
        await scanner.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
        await scanner.open();
    })();
</script>
<!-- Use a UI element defined in a HTML file. -->
<script>
    (async () => {
        let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
        await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.40/dist/dbr.ui.html");
        await scanner.show();
    })();
</script>

See Also

defaultUIElementURL

Returns or sets the URL of the .html file that defines the default UI Element. The URL can only be set before the API createInstance is called.

static defaultUIElementURL: string

Code Snippet

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

barcodeFillStyle

Specifies the color used inside the shape which highlights a found barcode.

barcodeFillStyle: string

Default value

"rgba(254, 180, 32, 0.3)"

See also

barcodeStrokeStyle

Specifies the color used to paint the outline of the shape which highlights a found barcode.

barcodeStrokeStyle: string

Default value

"rgba(254, 180, 32, 0.9)"

See also

barcodeLineWidth

Specifies the line width of the outline of the shape which highlights a found barcode.

barcodeLineWidth: number

Default value

1

See also

barcodeFillStyleBeforeVerification

Specifies the color used inside the shape which highlights a found linear barcode which has not been verified.

barcodeFillStyleBeforeVerification: string

Default value

"rgba(248, 252, 0, 0.2)"

See also

barcodeStrokeStyleBeforeVerification

Specifies the color used to paint the outline of the shape which highlights a found linear barcode which has not been verified.

barcodeStrokeStyleBeforeVerification: string

Default value

"transparent"

See also

barcodeLineWidthBeforeVerification

Specifies the line width of the outline of the shape which highlights a found linear barcode which has not been verified.

barcodeLineWidthBeforeVerification: number

Default value

2

See also

regionMaskFillStyle

Specifies the color used in the square-loop shape between the actual scanning area and the boundary of the video input. This shape only appears when the barcode scanning is limited to a specified region.

regionMaskFillStyle: string

Default value

"rgba(0, 0, 0, 0.5)"

See also

regionMaskStrokeStyle

Specifies the color used to paint the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region.

regionMaskStrokeStyle: string

Default value

"rgb(254, 142, 20)"

See also

regionMaskLineWidth

Specifies the width of the outline of the scanning region. This outline only appears when the barcode scanning is limited to a specified region.

regionMaskLineWidth: number

Default value

2

See also

setVideoFit

Sets the object-fit CSS property of the video element.

setVideoFit(objectFit: string): void;

Parameters

objectFit : specify the new fit type. At present, only “cover” and “contain” are allowed. Check out more on object-fit.

Return value

None.

Code Snippet

scanner.setVideoFit("cover");

See also

getVideoFit

Returns the value of the object-fit CSS property of the video element.

getVideoFit(): string;

Parameters

None.

Return value

The value of the object-fit CSS property.

Default value

"contain"

Code Snippet

let videoFit = scanner.getVideoFit();

ifShowScanRegionMask

Whether to show the scan region mask.

ifShowScanRegionMask: boolean;

Default value

true

Code Snippet

scanner.ifShowScanRegionMask = false;

showTip

Shows a Tip message.

showTip(x: number, y: number, width: number, initialMessage?: string, duration?: number, autoShowSuggestedTip?: boolean) => void;

Parameters

x , y : specifies where to put the Tip message. width : specifies the width of the Tip message, wrapping if the message is too long.

initialMessage : optional. The initial message.

duration : optional. The time during which a Tip message is displayed. The duration is reset each time the message is updated. Default value is 3000.

autoShowSuggestedTip : optional. Whether or not the Tip box is updated automatically when a tip is suggested. A tip is usually suggested by another SDK such as Dynamsoft Barcode Reader. Default value is true.

Return value

None.

Code Snippet

scanner.showTip(500, 200, 500, "The camera is too far away, please move closer!", 3000, true);

See also

hideTip

Hides the Tip message.

hideTip(): void; 

Return value

None.

Code Snippet

scanner.hideTip();

See also

updateTipMessage

Changes the Tip message.

updateTipMessage:(message: string) => void;

Parameters

message : specifies a new message as the Tip.

Return value

None.

Code Snippet

scanner.updateTipMessage("This is a new message!");

onTipSuggested

An event that gets triggered whenever a Tip is suggested.

onTipSuggested: (occasion: string, message: string) => any;

Arguments

occasion : specifies the occasion for the Tip.

message : the Tip message for the occasion.

Code Snippet

scanner.onTipSuggested = (occasion, message) {
    console.log(message);
}

See Also

convertToPageCoordinates

Converts coordinates of a barcode location to the coordinates relative to the top left point of the entire document.

convertToPageCoordinates: (point: Point) => Point;

Parameters

point : the coordinates to convert.

Return value

The converted coordinates.

Code Snippet

let newCoordinates = scanner.convertToPageCoordinates({x: 300, y: 600});

NOTE

Call this method only after scanner is open.

See also

convertToClientCoordinates

Converts coordinates of a barcode location to the coordinates within the application’s viewport at which the event occurred (as opposed to the coordinate within the page).

convertToClientCoordinates: (point: Point) => Point;

Parameters

point : the coordinates to convert.

Return value

The converted coordinates.

Code Snippet

let newCoordinates = scanner.convertToClientCoordinates({x: 300, y: 600});

NOTE

Call this method only after scanner is open.

ifSkipCameraInspection

Returns or sets whether to skip camera inspection at initialization to save time. Note that if a previously used camera is already available in the localStorage, the inspection is skipped automatically. Read more on ifSaveLastUsedCamera.

ifSkipCameraInspection: boolean;

Default value

false

ifSaveLastUsedCamera

Returns or sets whether to save the last used camera and resolution. This feature makes use of the localStorage of the browser.

NOTE

This feature only works on mainstream browsers like Chrome, Firefox and Safari. Other browsers may change the device IDs dynamically thus making it impossible to track the camera.

ifSaveLastUsedCamera: boolean;

Default value

false

getAllCameras

Returns infomation of all available cameras on the device.

getAllCameras(): Promise<VideoDeviceInfo[]>

Return value

A promise resolving to an array of VideoDeviceInfo objects.

Code Snippet

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

See also

getCurrentCamera

Returns information about the current camera.

getCurrentCamera(): Promise<VideoDeviceInfo>

Return value

A promise resolving to a VideoDeviceInfo object.

Code Snippet

let camera = await scanner.getCurrentCamera();

See also

setCurrentCamera

Chooses a camera as the video source.

If called before open() or show(), the selected camera will be used. Otherwise, the system will decide which one to use.

setCurrentCamera(deviceId: string): Promise<ScannerPlayCallbackInfo>

Parameters

deviceID : specifies the camera.

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

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

See also

getResolution

Returns the resolution of the current video input.

getResolution(): number[]

Return value

An array of two numbers representing the resolution.

Code Snippet

let rsl = scanner.getResolution();
console.log(rsl[0] + " x " + rsl[1]);

See also

setResolution

Sets the resolution of the current video input. If the specified resolution is not exactly supported, the closest resolution will be applied.

If called before open() or show(), the camera will use the set resolution when it opens. Otherwise, the default resolution is used, which is 1280 x 720 on mobile devices or 1920 x 1080 on desktop.

setResolution(width: number, height: number): Promise<ScannerPlayCallbackInfo>

Parameters

width : specifies the horizontal resolution.

height : specifies the vertical resolution.

To speed up the barcode scanning, the image frames will be scaled down when it exceeds a size limit either horizontally or vertically.

  • The limit is 2048 pixels on mobile devices and 4096 on other devices.
  • If the template “dense” or “distance” is used, the limit is 4096 regardless of which device is used.

Therefore, setting a very high resolution will not help with the scanning.

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

await scanner.setResolution(width, height);

See also

getVideoSettings

Returns the current video settings.

getVideoSettings(): MediaStreamConstraints

Return value

A MediaStreamConstraints object.

See also

updateVideoSettings

Changes the video input.

updateVideoSettings(constraints: MediaStreamConstraints): Promise<ScannerPlayCallbackInfo | void>

Parameters

constraints : specifies the new video settings.

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

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

See also

onWarning

A callback which is triggered when the resolution is not ideal (< 720P).

In this case, the warning is:

{
    id: 3,
    message: "Camera resolution too low, please use a higher resolution (720P or better)."
}

Code Snippet

const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
scanner.onWarning = warning => console.log(warning.message);

See Also

Warning

testCameraAccess

Test whether there is an available camera. It is also a trick to speed up the opening of the camera.

static testCameraAccess(): Promise<CameraTestResponse>;

Parameters

None.

Return value

A promise resolving to a CameraTestResponse object.

interface CameraTestResponse {
    readonly ok: boolean;
    readonly message: string;
};

The possible responses are

{
    ok: false,
    message: "Insecure context."
}
{
    ok: false,
    message: "No camera detected."
}
{
    ok: false,
    message: "No permission to access camera."
}
{
    ok: false,
    message: "Some problem occurred which prevented the device from being used."
}
{
    ok: false,
    message: "A hardware error occurred."
}
{
    ok: false,
    message: "User media support is disabled."
}
{
    ok: true,
    message: " Successfully accessed the camera."
}

Code Snippet

// The first request to connect to the camera.
// Here we do not use `await`, to let it run concurrently with `createInstance()`.
Dynamsoft.DBR.BarcodeScanner.testCameraAccess()
  .then(testResponse=>{
    console.log(testResponse.message);
  });

// The first `createInstance()` will spend a few seconds to get the necessary resources.
let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
scanner.onUniqueRead = txt => console.log(txt);
// Now the `show()` has been sped up.
// The second request to connect to camera will be much faster than the first one.
await scanner.show();

play

Play the video if it is already open but paused or stopped. If the video is already playing, it will start again.

play(): Promise<ScannerPlayCallbackInfo>

Return value

A promise resolving to a ScannerPlayCallbackInfo object.

Code Snippet

scanner.pause();
//..doing other things without the video
await scanner.play();

See also

onPlayed

This event is triggered when the video stream starts playing.

event onPlayed: (info: ScannerPlayCallbackInfo) => void

Arguments

info: a ScannerPlayCallbackInfo object which describes the information of the camera.

Code Snippet

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

See also

pause

Pauses the video without releasing the camera.

pause(): void

stop

Stops the video and releases the camera.

stop(): void

See also

videoSrc

Sets or returns the source of the video.

You can use this property to specify an existing video as the source to play which will be processed the same way as the video feed from a live camera.

videoSrc: string | MediaStream | MediaSource | Blob;

Default value

null

getCapabilities

Inspects and returns the capabilities of the current camera.

At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

getCapabilities(): MediaTrackCapabilities

Return value

A MediaTrackCapabilities object which specifies the values or range of values for each constrainable property of the current camera.

Code Snippet

scanner.getCapabilities();
/* Result sample
{
  aspectRatio: {max: 1280, min: 0.001388888888888889},
  brightness: {max: 64, min: -64, step: 1},
  colorTemperature: {max: 6500, min: 2800, step: 10},
  contrast: {max: 95, min: 0, step: 1},
  deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed",
  exposureMode: ["continuous", "manual"],
  exposureTime: {max: 10000, min: 39.0625, step: 39.0625},
  facingMode: [],
  focusDistance: {max: 1024, min: 0, step: 10},
  focusMode: ["continuous", "manual"],
  frameRate: {max: 30, min: 0},
  groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f",
  height: {max: 720, min: 1},
  resizeMode: ["none", "crop-and-scale"],
  saturation: {max: 100, min: 0, step: 1},
  sharpness: {max: 7, min: 1, step: 1},
  whiteBalanceMode: ["continuous", "manual"],
  width: {max: 1280, min: 1},
  zoom: {max: 800, min: 100, step: 100},
}
*/

See also

getCameraSettings

Returns the current values for each constrainable property of the current camera.

Right now, this method only works in Chrome and should be called when the scanner is open.

getCameraSettings(): any

Return value

The current values for each constrainable property of the current camera in the form of a MediaTrackSettings object.

Code Snippet

scanner.getCameraSettings();
/* Result sample
{
  aspectRatio: 1.4033333333333333,
  brightness: 0,
  colorTemperature: 4600,
  contrast: 0,
  deviceId: "3a505c29a3312600ea0afd79f8e2b4ba4fba3e539257801ff1de8718c27f2bed",
  exposureMode: "continuous",
  exposureTime: 156.25,
  focusDistance: 120,
  focusMode: "continuous",
  frameRate: 30,
  groupId: "35a82dcb7d5b0ef5bda550718d194f04a812c976175e926ccb81fb9d235d010f",
  height: 480,
  resizeMode: "none",
  saturation: 73,
  sharpness: 2,
  whiteBalanceMode: "continuous",
  width: 640,
  zoom: 100,
}
*/

See also

setFrameRate

Adjusts the frame rate.

At present, this method only works in Edge, Safari, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

setFrameRate(rate: number): Promise<void>

Parameters

rate : specifies the new frame rate.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.setFrameRate(10);

See also

getFrameRate

Returns the real-time frame rate.

getFrameRate(): number;

Parameters

None.

Return value

The calculated real-time frame rate.

Code Snippet

await scanner.getFrameRate();

enableTapToFocus

Enables manual camera focus when clicking/tapping on the video.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported).

enableTapToFocus() : void;

Parameters

None.

Return value

None.

Code Snippet

scanner.enableTapToFocus();

See also

disableTapToFocus

Disables manual camera focus when clicking/tapping on the video.

disableTapToFocus() : void;

Parameters

None.

Return value

None.

Code Snippet

scanner.disableTapToFocus();

See also

isTapToFocusEnabled

Returns whether clicking/tapping on the video invokes the camera to focus.

isTapToFocusEnabled() : boolean;

Parameters

None.

Return value

true means clicking/tapping on the video will invoke the camera to focus. false means clicking/tapping on the video does nothing.

Code Snippet

if (scanner.isTapToFocusEnabled()) {
    console.log("You can tap or click on the video to focus!");
}

See also

getColorTemperature

Returns the color temperature of the selected camera.

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.

getColorTemperature(): number;

Return value

Color temperature of the selected camera.

See also

setColorTemperature

Adjusts the color temperature.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

setColorTemperature(colorTemperatur: number): Promise<void>

Parameters

colorTemperatur : specifies the new color temperature.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.setColorTemperature(5000);

See also

getExposureCompensation

Returns the exposure compensation index of the selected camera.

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.

getExposureCompensation(): number;

Return value

Exposure compensation index of the selected camera.

See also

setExposureCompensation

Sets the exposure compensation index.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

setExposureCompensation(exposureCompensation: number): Promise<void>

Parameters

exposureCompensation : specifies the new exposure compensation index.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.setExposureCompensation(-0.7);

See also

getFocusSettings

Returns the focus settings.

type FocusArea = {
    centerPoint: { x: string, y: string };
    width: string;
    height: string;
};
type FocusSettings = {
    mode: string;
    distance: number;
    area: FocusArea;
};
getFocusSettings(): FocusSettings;

Parameters

None.

Return value

The current focus settings.

Code Snippet

scanner.getFocusSettings();

See also

setFocus

Sets the focus mode and focus distance of the camera.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

setFocus(mode: string, distance?: number): Promise<void>;

Parameters

mode : specifies the focus mode, the available values include continuous and manual .

distance : specifies the focus distance, only required when the mode is set to manual . Use getCapabilities to get the allowed value range.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.setFocus("manual", 5);

See also

getFocus

Gets the focus mode and the focus distance.

getFocus(): {mode: string, distance?: number};

Parameters

None.

Return value

An object describing the current camera’s focus properties “mode” and “distance”. If mode is continuous, distance has no meaning and is omitted from the object.

Code Snippet

await scanner.getFocus();

See also

getZoomSettings

Returns the zoom settings.

getZoomSettings(): { factor: number };;

Return value

An object that describes the zoom settings. As of version 3.2, it contains only the zoom factor.

Code Snippet

console.log(scanner.getZoomSettings().factor);

See also

setZoom

Sets current zoom value.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

setZoom(zoomValue: number): Promise<void>

Parameters

zoomValue : specifies the new zoom value.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.setZoom(2);

See also

resetZoom

Resets the zoom level of the video.

resetZoom(): Promise<void>;

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.resetZoom();

See also

turnOnTorch

Turns on the torch/flashlight if the current camera supports it.

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.

turnOnTorch(): Promise<void>

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.turnOnTorch();

See also

turnOffTorch

Turns off the torch/flashlight.

At present, this method only works in Edge, Chrome and other Chromium-based browsers (Firefox is not supported). Also, it should be called when a camera is open.

turnOffTorch(): Promise<void>

Return value

A promise that resolves when the operation succeeds.

Code Snippet

await scanner.turnOffTorch();

See also

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version(10.0.21)
  • Version 10.x
    • Version 10.0.20
  • Version 9.x
    • Version 9.6.40
    • Version 9.6.33
    • Version 9.6.32
    • Version 9.6.31
    • Version 9.6.30
    • Version 9.6.21
    • Version 9.6.20
    • Version 9.6.11
    • Version 9.6.10
    • Version 9.6.2
    • Version 9.6.1
    • Version 9.6.0
    • Version 9.3.1
    • Version 9.3.0
    • Version 9.2.13
    • Version 9.2.12
    • Version 9.2.11
    • 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 +