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 >
Dev Center
Table of contents

Thanks for downloading Dynamsoft Barcode Reader Package!

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

What are the different ways to customize the UI?

« Back to FAQ index

There are three different ways to customize the UI -

  • The first is to modify the file dist/dbr.ui.html directly. However, this means that the resource files should be hosted on your own server, rather than using the CDN.

  • The second is to make a copy of the dist/dbr.ui.html and include it in your application, modifying the copy as you wish. Afterwards, you can tell the SDK to use the modified copy using the defaultUIElement property:

Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE";

Note - This needs to be set before createInstance is called.

  • The third way is to build the UI element by incorporating the HTML element yourself, and then point to those HTML element(s) during initialization using the setUIElement(HTMLElement) method.
    1. The first part of this is to embed the video element. Please note that the classnames of the different sub-elements must match the ones in dist/dbr.ui.html.
    2. The second part is to add the camera list and resolution list and as before, the classnames must match the ones listed in dist/dbr.ui.html.

Note - For more info on how to customize the UI, please refer to this section of the user guide.

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

latest version

    • Latest version
    • Version 9.x
      • Version 9.2.12
      • Version 9.0.2
      • Version 9.0.1
      • Version 9.0.0
    • Version 8.x
      • Version 8.8.7
      • Version 8.8.5
      • Version 8.8.3
      • Version 8.8.0
      • Version 8.6.3
      • Version 8.6.0
      • Version 8.4.0
      • Version 8.2.5
      • Version 8.2.3
      • Version 8.2.1
      • Version 8.2.0
      • Version 8.1.3
      • Version 8.1.2
      • Version 8.1.0
      • Version 8.0.0
    • Version 7.x
      • Version 7.6.0
      • Version 7.5.0
    Change +
    © 2003–2023 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support