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

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 (
        <DynamsoftCameraView
            style=
            ref = {(ref)=>{this.scanner = ref}}
            overlayVisible={true}
            scanRegionVisible={true}
            scanRegion={region}
        >
        </DynamsoftCameraView>
    );
}

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"
    }
}