CameraView

Create and Destroy Instances

Drawing and UI

createInstance

Creates a CameraView instance. The CameraView is used to display the camera preview and provides UI controlling APIs. You can add interactable UI elements on the view.

static createInstance(defaultUIElement?: HTMLDivElement | string): Promise<CameraView>;

Parameters

defaultUIElement(optional): Either a DIV element in which to build the default UI, a URL to use an external UI definition, or omitted for no initial DOM element.

Return value

A promise resolving to the created CameraView object.

Code Snippet

let cameraView = await Dynamsoft.DCE.CameraView.createInstance();

or

// Pass the path of the customized UI in the API `createInstance` to set it as the default UI.
let cameraView = await Dynamsoft.DCE.CameraView.createInstance("THE-URL-TO-THE-FILE");

or

<div id="enhancerUIContainer" style="width:1280px;height:720px;background:#ddd;" >
  <div class="dce-video-container" style="width:100%;height:100%;"></div>
</div>
<script>
    // Create 'CameraView' instance and pass an element as its UI.
    let view = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById("enhancerUIContainer"));
</script>

dispose

Releases all resources used by the CameraView instance, so that the instance is left with only one property “disposed” as true.

dispose(): void;

Parameters

None.

Return value

None.

Code Snippet

let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
//...
cameraView.dispose();

disposed

A read-only Boolean value indicating whether the CameraView instance has been disposed.

readonly disposed: boolean; 

Code Snippet

let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
//...
let flag = cameraView.disposed;

getUIElement

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

getUIElement(): HTMLElement; 

Parameters

None.

Return value

Returns an HTMLElement.

Code Snippet

const uiElement = cameraView.getUIElement();

setUIElement

Specifies an HTML element for the CameraView instance to use as its UI element. The structure inside the element determines the appearance of the UI.

setUIElement(element: HTMLDivElement | string): Promise<void>;

Parameters

element: A DIV element in which to build the default UI, or a URL to use an external UI definition.

Return value

None.

Code Snippet

<div id="enhancerUIContainer" style="width:100%;height:100%;">
    <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
</div>
<script>
    (async () => {
        let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
        await cameraView.setUIElement(document.getElementById("enhancerUIContainer"));
    })();
</script>

createDrawingLayer

Creates and returns a DrawingLayer object.

createDrawingLayer(): DrawingLayer;

Parameters

None.

Return value

A DrawingLayer object.

Code Snippet

const newDrawingLayer = cameraView.createDrawingLayer();

getDrawingLayer

Gets the DrawingLayer specified by its ID.

getDrawingLayer(id: number): DrawingLayer;

Parameters

id: The ID of the layer that you want to get.

Return value

Returns the object of the targeting layer.

Code Snippet

retrievedDrawingLayer = cameraView.getDrawingLayer(layerId);

getAllDrawingLayers

Returns an array of all DrawingLayer objects.

getAllDrawingLayers(): Array<DrawingLayer>;

Parameters

None.

Return value

Returns an array of all DrawingLayer objects.

Code Snippet

DrawingLayers = cameraView.getAllDrawingLayers();

deleteUserDefinedDrawingLayer

Deletes a DrawingLayer object specified by its ID.

deleteUserDefinedDrawingLayer(id: number): void;

Parameters

id: The ID of the layer that you want to delete.

Return value

None.

Code Snippet

cameraView.deleteUserDefinedDrawingLayer(DrawingLayerId);

clearUserDefinedDrawingLayers

Removes all user-defined DrawingLayers.

clearUserDefinedDrawingLayers(): void;

Parameters

None.

Return value

None.

Code Snippet

cameraView.clearUserDefinedDrawingLayers();

setTipConfig

Configures the tip feature.

setTipConfig(tipConfig: TipConfig): void;

Parameters

tipConfig: Takes a parameter of type TipConfig and is used to set the configuration for a tip in the cameraView.

Return value

None.

Code Snippet

cameraView.setTipConfig(TipConfig);

See also

TipConfig

getTipConfig

Returns the configuration of the tip.

getTipConfig(): TipConfig;

Parameters

None.

Return value

Returns the configuration of the tip.

Code Snippet

const tipConfig = cameraView.getTipConfig();

setTipVisible

Sets whether to show the tip.

setTipVisible(visible: boolean): void;

Parameters

visible: Sets whether to show the tip.

Return value

None.

Code Snippet

cameraView.setTipVisible(False);
//Set false to hide the tip.

isTipVisible

Returns whether the tip is visible.

isTipVisible(): boolean;

Parameters

None.

Return value

Returns whether the tip is visible.

Code Snippet

const tipIsVisible = cameraView.isTipVisible();
console.log(tipIsVisible); 

updateTipMessage

Updates the message shown in the tip.

updateTipMessage(message: string): void;

Parameters

message: A string used to update or change the content of the tip message displayed in the cameraView.

Return value

None.

Code Snippet

cameraView.updateTipMessage('Hold the phone closer.');

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

cameraView.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

cameraView.getVideoFit();

getVisibleRegionOfVideo

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

getVisibleRegionOfVideo(options: { inPixels?: boolean }): Rect;

Parameters

options: Have an inPixels property to specify whether the returned Rect should be in pixel or percentage.

Return value

Returns a Rect object that defines the visible region of the video.

Code Snippet

let visibleRegion = cameraView.getVisibleRegionOfVideo();

getVideoElement

Returns the video element used by the CameraView instance.

getVideoElement(): HTMLVideoElement;

Parameters

None.

Return value

Returns a HTMLVideoElement.

Code Snippet

let videoElement = cameraView.getVideoElement();

setScanRegionMaskStyle

Sets the drawing style for the scan-region mask.

setScanRegionMaskStyle(newStyle: {
                lineWidth: number,
                strokeStyle: string,
                fillStyle: string
            }): void;

Parameters

lineWidth: The width of the lines used to draw the mask border.

strokeStyle: The color or style of the mask border lines.

fillStyle: The color of the mask’s interior fill.

The default value is

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

Read more on strokeStyle and fillStyle.

Return value

None.

Code Snippet

cameraView.setScanRegionMaskStyle({
  lineWidth: 3,
  strokeStyle: 'red',
  fillStyle: 'rgba(50, 50, 50, 0.3)'
});

getScanRegionMaskStyle

Returns the drawing style for the scan-region mask.

getScanRegionMaskStyle(): DrawingStyle;

Parameters

None.

Return value

Returns the current style settings of the scan region mask, which include properties such as lineWidth, strokeStyle, and fillStyle.

Code Snippet

const currentStyle = cameraView.getScanRegionMaskStyle();
console.log(currentStyle);

setScanRegionMaskVisible

Sets whether to show the scan-region mask.

setScanRegionMaskVisible(visible: boolean): void;

Parameters

visible: Sets whether to show the scan region mask.

Return value

None.

Code Snippet

cameraView.setScanRegionMaskVisible(False);
//Set false to hide the region mask.

isScanRegionMaskVisible

Returns whether the scan-region mask is visible.

isScanRegionMaskVisible(): boolean;

Parameters

None.

Return value

Returns whether the ScanRegionMask is visible.

Code Snippet

const maskIsVisible = cameraView.isScanRegionMaskVisible();
console.log(maskIsVisible); 

setScanLaserVisible

Sets whether to show the laser that indicates the scanning is going on.

setScanLaserVisible(visible: boolean): void;

Parameters

visible: Sets whether to show the laser.

Return value

None.

Code Snippet

cameraView.setScanLaserVisible(False);
//Set false to hide the laser.

isScanLaserVisible

Returns whether the laser is visible.

isScanLaserVisible(): boolean;

Parameters

None.

Return value

Returns whether the laser is visible.

Code Snippet

const laserIsVisible = cameraView.isScanLaserVisible();
console.log(laserIsVisible);