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.

• Use the Default Camera UI - Demo
• Use the Default Camera UI - Source Code

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('dbrScanner-sel-camera')[0].hidden = true;
document.getElementsByClassName('dbrScanner-sel-resolution')[0].hidden = true;
document.getElementsByClassName('dbrScanner-btn-close')[0].hidden = true;

Check out the official sample:

• Hide Built-in Controllers - Demo
• Hide Built-in Controllers - Source Code

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:

• Use External Controllers - Demo
• Use External Controllers - Source Code

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.

• Enlarge the Video Stream - Demo
• Enlarge the Video Stream - Source Code