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.

JavaScript UI Customization Samples

Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) provides a built-in GUI to help developers build an interactive barcode reading interface.

Default GUI

The following official sample demonstrates the default GUI built into the library.

GUI Elements

If you check the GUI on the demo page, you will find that it consists of the following elements

  • The video element that streams the video from a camera
  • A laser beam moving vertically which indicates the working status of the library
  • A dropdown box for selecting a camera
  • A dropdown box for specifying the resolution for the selected camera
  • A close button that closes the GUI when clicked

There are a few other elements

  • Before the video starts streaming, there is a spinner that indicates the loading process
  • When a barcode is found, the location of the barcode is highlighted in the video stream
  • If no camera is found on the device or camera access is denied on the page, the GUI will show a camera icon, which, when clicked, allows the user to select a local image or invoke the system camera interface

Hide Built-in Controllers

As mentioned above, the default UI comes with quite a few elements. Some of them might not fit the style of your own application. The following code snippet removes the camera selector, the resolution selector, the close button as well as changes the backgournd color.

document.getElementById('UIElement').appendChild(scanner.getUIElement());
document.querySelector('#UIElement div').style.background = '';
document.getElementsByClassName('dce-sel-camera')[0].hidden = true;
document.getElementsByClassName('dce-sel-resolution')[0].hidden = true;
document.getElementsByClassName('dce-btn-close')[0].hidden = true;

Check out the official sample:

Use External Controllers

Based on the previous sample, you can build your own UI elements to control the barcode scanning process.

For example, the following code adds a camera selector

<select id="cameraList"></select>
async function updateCameras() {
    let cameras = await scanner.getAllCameras();
    let cameraList = document.getElementById('cameraList');
    cameraList.options.length = 0;
    for (let camera of cameras) {
        let opt = new Option(camera.label, camera.deviceId);
        cameraList.options.add(opt);
    }
}
document.getElementById('cameraList').onchange = async function() {
    try {
        await scanner.setCurrentCamera(document.getElementById('cameraList').value);
    } catch (ex) {
        alert('Play video failed: ' + (ex.message || ex));
    }
};

For more related customization, check out the following official sample:

Enlarge the Video Stream

The library is usually used on mobile devices which have small screens. When scanning barcodes with the mobile camera, the video stream will be limited in the video element and may not be clear enough. Ideally, we should use the whole screen to play the video and find barcodes.

The GUI is pure HTML, so changing the size of the element is very easy. For example, the following enlarges the element to be the full size of the viewport.

document.getElementById('UIElement').style.height = '100vh';
document.getElementById('UIElement').style.width = '100vw';
document.getElementById('UIElement').style.position = 'absolute';

Check out the following sample on how to enlarge the video stream to read a barcode and then change it back to its normal size.

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

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