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

Initialization APIs

API Name Description
createInstance() Creates a CameraEnhancer instance.
defaultUIElementURL Returns or sets the URL of the .html file that defines the default UI Element.
getUIElement() Returns the HTML element that is used by the CameraEnhancer instance.
setUIElement() Specifies an HTML element for the CameraEnhancer instance to use as its UI element.
onWarning A callback which is triggered when the running environment is not ideal.

createInstance

Creates a CameraEnhancer instance.

static createInstance(): Promise<CameraEnhancer>;

Parameters

None.

Return value

A promise resolving to the created CameraEnhancer object.

Code Snippet

(async () => {
    let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
})();

defaultUIElementURL

Returns or sets the URL of the .html file that defines the default UI Element.

static defaultUIElementURL: string;

NOTE: if defaultUIElementURL is not set before open(), it will not take effect and the preset one, which is “dce.ui.html” will be used. If you want to use a different UI element, set defaultUIElementURL beforehand like this:

Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL = "URL-TO-NEW-UIELEMENT";
await cameraEnhancer.open(true);

Also note that the SDK comes with 3 default UI definitions which takes effect automatically (no need to change defaultUIElementURL):

Definition Name Notes
dce.ui.html Used by default if the CameraEnhancer instance is used on its own.
dbr.ui.html Used by default if the CameraEnhancer instance is used as an image source for Dynamsoft Barcode Reader.
dlr.ui.html Used by default if the CameraEnhancer instance is used as an image source for Dynamsoft Label Recognizer.

Code Snippet

// The following line is redundant and is for demonstration purposes only.
Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.ui.html";
(async () => {
    let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
    await enhancer.open(true);
})();

getUIElement

Returns the HTML element that is used by the CameraEnhancer instance.

In 2.3.2 or earlier, you could call getUIElement() right after creating an instance of CameraEnhancer and it would return the default HTML element. In 3.0.0 or later, you should call getUIElement() after calling setUIElement() or calling open(). Otherwise, it will return undefined.

getUIElement(): HTMLElement;

Parameters

None.

Return value

The HTML element used as the UI by the CameraEnhancer instance.

Code Snippet

<!-- Define an element to hold the UI element -->
<div id="enhancerUIContainer"></div>
<script>
    (async () => {
        let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
        await enhancer.open();
        document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
    })();
</script>

setUIElement

Specifies an HTML element for the CameraEnhancer instance to use as its UI. The structure inside the element determines the appearance of the UI.

setUIElement(elementOrURL: HTMLElement | string): Promise<void>;

Parameters

elementOrURL : specifies an existing element on the page or the URL of an HTML file which contains an element.

Return value

A promise that resolves when the operation succeeds.

Code Snippet

<!-- Define an element to hold the video input -->
<!-- The video element will be created and appended to the DIV element with the class 'dce-video-container' , make sure the class name is the same.
Besides, the CSS property 'position' of the DIV element must be either 'relative', 'absolute', 'fixed', or 'sticky'. -->
<div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div>
<script>
    (async () => {
        let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
        await enhancer.setUIElement(document.getElementsByClassName("dce-video-container")[0]);
        await enhancer.open();
    })();
</script>
<!-- Use a UI element defined in a HTML file. -->
<script>
    (async () => {
        let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
        // The following line is not needed if you just want to use the official UI element for CameraEnhancer.
        // Only use it when you want to specify a different HTML page that contains a different UI definition.
        await enhancer.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.ui.html");
        // Note that because the element is not on the current page, you need to pass "true" when calling open() in order to show it.
        await enhancer.open(true);
    })();
</script>

onWarning

A callback which is triggered when the running environment is not ideal. In this version, it may get triggered in two scenarios:

  1. If the page is opened from the disk;
  2. The page is hosted in a HTTP site without SSL;

The following two warnings are returned respectively:

{
    id: 1,
    message: "Not using HTTP protocol, the SDK may not work correctly."
}
{
    id: 2,
    message: "Not connected via SSL (HTTPS), the SDK may not work correctly."
}

Code Snippet

Dynamsoft.DCE.CameraEnhancer.onWarning = warning => console.log(warning);

See Also

Warning

This page is compatible for:

Version 1.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version
  • Version 2.3.2
  • Version 2.3.1
  • Version 2.1.0
  • Version 2.0.0
  • Version 1.0.3
  • Version 1.0.1
  • Version 1.0.0
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support