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;