camera-view.md

layout	title	description	keywords	needAutoGenerateSidebar	needGenerateH3Content	noTitleIndex	breadcrumbText
default-layout	Camera View Class - Dynamsoft Capture Vision React Native Edition	This page is the API reference of Camera View class	Camera view, API reference	true	true	true	Camera View class

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.

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={{
                flex: 1
            }}
            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}