UI APIs
Name | Description |
---|---|
getVisibleRegion() | Returns a Region object which specifies which part of the original video is shown in the video element. |
addScanRegionOverlayCanvas() | Add a canvas of the same size as the scan area directly above the scan area. |
ifShowScanRegionMask | Returns or sets whether the scan region mask is shown. |
ifShowScanRegionLaser | Returns or sets whether the laser indicator is shown in the scan region. |
setScanRegionMaskStyle() | Sets the styles for the scan region mask. |
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. |
setViewDecorator() | Sets and shows the view decorator. |
getViewDecorator() | Gets what view decorator is shown. |
setViewDecoratorLineWidth() | Sets the line width for drawing the view decorator. |
setViewDecoratorStrokeStyle() | Sets the stroke style for drawing the view decorator. |
setViewDecoratorFillStyle() | Sets the fill style for drawing the view decorator. |
setViewDecoratorMaskFillStyle() | Sets the fill style for drawing the ask for the view decorator. |
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
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
anddce-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
getViewDecorator
Gets what view decorator is shown.
getViewDecorator(): {type: string[], area: Area, canvas: Canvas};
See also
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);