Resource Base
Table of contents

DCVCameraView Class

The UI component of Dynamsoft Capture Vision. It provides the following functions:

  • Implement basic camera control like open, close, etc.
  • Define the scan area where barcode reading is performed.
  • Display the video preview, overlay, scan region etc.
Property Description
scanRegion The property for users to specify the region of interest.
scanRegionVisible A property that determines whether the scanRegion is visible.
overlayVisible A property that indicates whether the overlays are visible.
torchState The property that indicates the state of the torch light.
torchButton The property that defines how the torch button will be displayed.
cameraPosition The property for selecting front-facing or back-facing camera.
enhancedFeatures The property for enabling enhanced features.

scanRegion

The property for users to specify the region of interest.

scanRegion: Region;

Code Snippet

render() {
    let region = {
        regionTop: 0,
        regionLeft: 10,
        regionBottom: 55,
        regionRight: 80,
        regionMeasuredByPercentage: true
    }
    return (
        <DCVCameraView
            style=
            ref = {(ref)=>{this.scanner = ref}}
            overlayVisible={true}
            scanRegionVisible={true}
            scanRegion={region}
        >
        </DCVCameraView>
    );
}

scanRegionVisible

A property that defines whether the scanRegion is visible.

scanRegionVisible: boolean;

Code Snippet

View code snippet in the scanRegion section.

overlayVisible

A property that indicates whether the overlays are visible.

overlayVisible: boolean;

Code Snippet

View code snippet in the scanRegion section.

torchState

The property that indicates whether the torch (flash) is toggled on or off. It can be set via string or one of the EnumTorchState options.

torchState: string | EnumTorchState;

Code Snippet

// The following data can be assigned to the torchState
torchState={EnumTorchState.OFF}
torchState={EnumTorchState.ON}
torchState={0}
torchState={1}
torchState={"off"}
torchState={"on"}

torchButton

The property that defines how the torch button will be displayed. The torch button can be displayed on the UI to control the state of torch light. View interface TorchButton to see all available properties for torch button configuration.

torchButton: TorchButton;

Code Snippet

let rect = {
    x:100,
    y:100,
    width:100,
    height:100
}
...
torchButton={
    {
        location: rect,
        visible: true,
        //When the flashlight is on, the button will appear as this image.
        torchOnImageBase64: "Put Your Base64 String Here",
        //When the flashlight is off, the button will appear as this image.
        torchOffImageBase64: "Put Your Base64 String Here"
    }
}

cameraPosition

The property for selecting front-facing or back-facing camera. It can be set via one of the EnumCameraPosition options.

cameraPosition: EnumCameraPosition;

Code Snippet

// The following data can be assigned to the torchState
cameraPosition={EnumCameraPosition.CP_BACK}
cameraPosition={EnumCameraPosition.CP_FRONT}

enhancedFeatures

The property for enabling enhanced features. It can be set via one of the EnumEnhancedFeature options.

enhancedFeatures?: number;

This page is compatible for:

Is this page helpful?

YesYes NoNo

In this article:

latest version

Change +