UI APIs

getVisibleRegion

Returns a Region object which specifies which part of the original video is shown in the video element

getVisibleRegion(inPixels?: boolean): Region;

Parameters

inPixels: [optional] The coordinate type. If omitted or set to false, the returned coordinates are represented by percentage, otherwise, by pixels.

Return value

The visible region represented by a Region object.

Code Snippet

enhancer.getVisibleRegion();

See also

Region

addScanRegionOverlayCanvas

Add a canvas of the same size as the scan area directly above the scan area.

addScanRegionOverlayCanvas(): Canvas;

Parameters

None.

Return value

The added Canvas object.

Code Snippet

let cvs = enhancer.addScanRegionOverlayCanvas();
let ctx = cvs.getContext('2d');
ctx.fillStyle = "white";
ctx.font = '50px serif';
ctx.fillText('Dynamsoft Camera Enhancer', 50, 90);

ifShowScanRegionMask

Returns or sets whether the scan region mask is shown. The default is true.

ifShowScanRegionMask: boolean;

ifShowScanRegionLaser

Returns or sets whether the laser indicator is shown in the scan region. The default is false.

This API only works when the viewer element contains the elements with the class names dce-scanarea and dce-scanlight (like the built-in viewer).

ifShowScanRegionLaser: boolean;

setScanRegionMaskStyle

Sets the styles for the scan region mask.

setScanRegionMaskStyle(maskStyle: any): void;

Parameters

maskStyle: specify the new style. Read more on strokeStyle and fillStyle.

The default value is

lineWidth = 2;
strokeStyle = "rgb(254,142,20)";
fillStyle = "rgba(0,0,0,0.5)";

Return value

None.

Code Snippet

enhancer.setScanRegionMaskStyle({
    lineWidth: 5,
    strokeStyle: "white",
    fillStyle: "rgba(50,50,50,0.3)"
});

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 and the default is “contain”. Check out more on object-fit.

Return value

None.

Code Snippet

enhancer.setVideoFit("cover");

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.

Code Snippet

enhancer.getVideoFit();

setViewDecorator

Sets and shows the view decorator.

setViewDecorator(type: string | string[], area: Area): void;

Parameters

type: specify the decorator type. Allowed values are “rectangle” , “focus” , “crossline” , “crosshair” , [“rectangle”, “crossline”], [“rectangle”, “crosshair”], [“focus”, “crossline”] and [“focus”, “crosshair”]. If passed an empty string, the decorator is cleared.

area: specify where to place the decorator. It accepts 4 values:

• x, y: top-left point of the decorator in percentage (0~100) of the width/height of the viewer.
• width, height: size of the decorator in percentage (0~100) of the width/height of the viewer.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

See also

Area

getViewDecorator

Gets what view decorator is shown.

getViewDecorator(): {type: string[], area: Area, canvas: Canvas};

See also

Area

setViewDecoratorLineWidth

Sets the line width for drawing the view decorator.

setViewDecoratorLineWidth(type: string, width: number): void;

Parameters

type: specify the decorator type. Allowed values are “rectangle” , “focus” , “crossline” and “crosshair”.

width: specify the line width.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorLineWidth("rectangle", 10);
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorStrokeStyle

Sets the stroke style for drawing the view decorator.

setViewDecoratorStrokeStyle(type: string, strokeStyle: string): void;

Parameters

type: specify the decorator type. Allowed values are “rectangle” , “focus” , “crossline” and “crosshair”.

strokeStyle: specify the stroke style. Read more on strokeStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorStrokeStyle("rectangle", "white");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorFillStyle

Sets the fill style for drawing the view decorator.

setViewDecoratorFillStyle(type: string, fillStyle: string): void;

Parameters

type: specify the decorator type. Allowed values are “rectangle” and “focus”.

fillStyle: specify the fill style. Read more on fillStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorFillStyle("rectangle", "rgba(50,50,50,0.3)");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);

setViewDecoratorMaskFillStyle

Sets the fill style for drawing the ask for the view decorator.

setViewDecoratorMaskFillStyle(type: string, fillStyle: string): void;

Parameters

type: specify the decorator type. Allowed values are “rectangle” and “focus”.

fillStyle: specify the fill style. Read more on fillStyle.

Return value

None.

Code Snippet

let area = {
    x: 5,
    y: 10,
    width: 90,
    height: 80
};
enhancer.setViewDecoratorMaskFillStyle("rectangle", "rgba(50,50,50,0.3)");
enhancer.setViewDecorator(["rectangle", "crosshair"], area);