Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
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.

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}

This page is compatible for:

Version 1.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support