Dev Center
Table of contents

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 barcode is highlighted with an overlay
  • 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

The default UI of the BarcodeReader class includes several elements that may not match the style of your application. The following code snippet demonstrates how to remove the camera selector, resolution selector, and close button, as well as change the background color:

<div id="UIElement">
    <span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
    <div id="div-ui-container" style="width:100%;height:100%;">
        <div class="dce-video-container" style="position:relative;width:100%;height:100%;"></div>
    </div>
</div>
await scanner.setUIElement(document.getElementById('div-ui-container'));

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. Thus modifying the size of the element is easy. The following code expands the element to fill the entire viewport:

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

Check out the following example code to see how you can expand the video stream to read a barcode and then restore it to its normal size:

Customize the Default Ui

Check out the following example code that demonstrates how to create a custom viewer that is vastly different from the default one. You can feel the possibilities of customization:

To learn more about UI customization, please refer to its corresponding section in the user guide.

Support

If you have any questions, feel free to contact Dynamsoft support via email or live chat via the “Let’s Chat” button.

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest version(10.0.21)
    • Version 10.x
      • Version 10.0.20
    • Version 9.x
      • Version 9.6.40
      • Version 9.6.33
      • Version 9.6.32
      • Version 9.6.31
      • Version 9.6.30
      • Version 9.6.21
      • Version 9.6.20
      • Version 9.6.11
      • Version 9.6.10
      • Version 9.6.2
      • Version 9.6.1
      • Version 9.6.0
      • Version 9.3.1
      • Version 9.3.0
      • Version 9.2.13
      • Version 9.2.12
      • Version 9.2.11
      • 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 +