Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

Class DCVCameraView

DCVCameraView is the class that used to display the view of camera and related UI elements.

class DCVCameraView

Property	Description
`bindToHtmlElement`	Bind DCVCameraView to a HTML element.
`setOverlayVisible`	A property that indicates whether the `overlays` are visible.
`setTorchButton`	A property that determines whether a torch button will be displayed on the `DCVCameraView` and how the torch button will be displayed.

bindToHtmlElement

Bind DCVCameraView to a HTML element.

bindToHtmlElement(element:HTMLElement): void;

Parameters

element: A HTML <div> for displaying DCVCameraView.

Code Snippet

Create an HTML element first.

<div id="camera_view" style="width: 100vw; height: 100vh; z-index: -1;">
    <div id="show_result" style="position: fixed; width: 100vw; bottom: 10vh;  text-align:center; color: white; "></div>
</div>

Get and bind the HTML element to DCVCameraView

// Get the HTML element.
const cameraViewElement = document.getElementById("camera_view")
// Create an instance of the camera view.
var cameraView = new Dynamsoft.DCVCameraView()
// Bind the camera view instance with the HTML element.
cameraView.bindCameraViewToElement(cameraViewElement)

setOverlayVisible

Set whether to display highlight overlays on the detected significant areas (like barcode areas).

setOverlayVisible(vis:boolean): void;

Parameters

vis: A boolean value that indicates whether the overlays are visible.

Code Snippet

cameraView.setOverlayVisible(true)

setTorchButton

Set whether a torch button will be displayed on the DCVCameraView and how the torch button will be displayed.

setTorchButton(btn:TorchButton): void;

Parameters

btn: A TorchButton object that contains torch button properties.

Code Snippet

You can simply display a torch button on the top-left corner of the view.

cameraView.setTorchButton({
    visible:true
})

You can change the size and the position of the torch button.

cameraView.setTorchButton({
    location: {
        x: 100,
        y: 100,
        width: 100,
        height: 100
    },
    visible:true
})

You can also change the image of the torch button.

cameraView.setTorchButton({
    location: {
        x: 100,
        y: 100,
        width: 100,
        height: 100
    },
    visible:true,
    torchOnImage: "Put your file path here. This image will be displayed when the torch is on.",
    torchOffImage: "Put your file path here. This image will be displayed when the torch is off."
})