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.