Customize the UI

const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
await scanner.show();

scanner.setVideoFit('cover');

scanner.setVideoFit('contain');

scanner.onPlayed = async info => {
    let sideLen = Math.min(info.width, info.height) * 0.4;
    let precentW = Math.round(sideLen / info.width * 100)
    let precentH = Math.round(sideLen / info.height * 100);
    let rs = await scanner.getRuntimeSettings();
    rs.region.regionLeft = (100 - precentW) / 2;
    rs.region.regionRight = (100 + precentW) / 2;
    rs.region.regionTop = (100 - precentH) / 2;
    rs.region.regionBottom = (100 + precentH) / 2;
    rs.region.regionMeasuredByPercentage = 1;
    await scanner.updateRuntimeSettings(rs);
}

// Changes the highlight color to light green.
scanner.barcodeFillStyle = "rgba(73, 245, 73, 0.3)";

// Changes the rectangle to be a green wide one.
scanner.barcodeLineWidth = 5;
scanner.barcodeStrokeStyle = "rgba(73, 245, 73, 1)";

scanner.onUniqueRead = (txt, result) => {
    document.getElementById('result').value = result.barcodeFormatString + ": " + txt;
    document.getElementById('result').focus();
    setTimeout(() => {
        document.getElementById('result').blur();
    }, 2000);
};

renderCamreaSelector();
renderResolutionSelector();

// define html elements needed
const camOptions = document.getElementById("options_camera");
const resOptions = document.getElementById("options_resolution");
// add the click event to the selector
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
// initial selector renderer
async function renderCamreaSelector() {
    let scanner = await pScanner;
    const cameras = await scanner.getAllCameras();
    document.getElementById("ul_options_camera").innerHTML = "";
    cameras.forEach(camera => {
        let li = document.createElement("li");
        let span = document.createElement("span");
        span.setAttribute("id", camera.deviceId);
        span.innerText = camera.label;
        li.appendChild(span);
        document.getElementById("ul_options_camera").appendChild(li);
    });
    // highlight and display the selected option and add click event to selector
    const camOption = document.querySelectorAll("#ul_options_camera span");
    const currentCamera = await scanner.getCurrentCamera();
    camOption.forEach(sapn => {
        sapn.addEventListener("click", camOptionSelected);
        if (sapn.id === currentCamera.deviceId) {
            document.getElementById("selector_input_camera").value = sapn.innerText;
            sapn.classList.add("selected");
        } else {
            sapn.classList.remove("selected");
        }
    });
}
async function renderResolutionSelector() {
    let scanner = await pScanner;
    const currentResolution = await scanner.getResolution();
    const gotResolution = document.querySelector("#gotResolution span");
    gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
    gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
    document.getElementById("selector_input_resolution").value = gotResolution.innerText;
    gotResolution.classList.add("selected");
    let resOption = document.querySelectorAll("#ul_options_resolution span");
    for (let i = 0; i < resOption.length; i++) {
        resOption[i].addEventListener("click", resOptionSelected);
    };
    toggleMaskView();
}
// when the selector is clicked
let animateTimer = null;
function toggleCamView(e) {
    // expanding and collapsing control options by changing the classList
    clearTimeout(animateTimer);
    camOptions.classList.toggle("noheight");
    document.getElementById("arrow_camera").classList.toggle("trans");
    const hidden = camOptions.classList.value.search("unshow");
    if (hidden !== -1) {
        camOptions.classList.replace("unshow", "show");
        document.addEventListener("click", clickToHidden);
    } else {
        // remove styles such as shadows after the transition ends
        animateTimer = setTimeout(() => {
            camOptions.classList.replace("show", "unshow");
        }, 200);
    }
}

function toggleResView(e) {
    clearTimeout(animateTimer);
    resOptions.classList.toggle("noheight");
    document.getElementById("arrow_resolution").classList.toggle("trans");
    const hidden = resOptions.classList.value.search("unshow");
    if (hidden !== -1) {
        resOptions.classList.replace("unshow", "show");
        document.addEventListener("click", clickToHidden);
    } else {
        animateTimer = setTimeout(() => {
            resOptions.classList.replace("show", "unshow");
        }, 200);
    }
}
// when option is selected
async function camOptionSelected(e) {
    let scanner = await pScanner;
    const currentCamera = await scanner.getCurrentCamera();
    if (currentCamera.deviceId === e.target.id) {
        return;
    }
    toggleMaskView();
    const cameras = await scanner.getAllCameras();
    cameras.forEach(async camera => {
        if (camera.deviceId === e.target.id) {
            try {
                await scanner.setCurrentCamera(camera);
            } catch (ex) {
                alert('Play video failed: ' + (ex.message || ex));
            }
            renderResolutionSelector();
        }
    })
}
async function resOptionSelected(e) {
    const data = e.target.id.split("x");
    let scanner = await pScanner;
    const currentResolution = await scanner.getResolution();
    if (currentResolution[0] == data[0] && currentResolution[1] == data[1]) {
        return;
    }
    toggleMaskView();
    const targetResolution = [parseInt(data[0]), parseInt(data[1])];
    await scanner.setResolution(targetResolution);
    renderResolutionSelector();
}
// camera's styles mask show or not
function toggleMaskView() {
    let dceLoading = document.getElementById('dce-loading');
    let dceMask = document.getElementById('dce-mask');
    let container = document.getElementsByClassName('dce-video-container')[0];
    let dceScanlight = document.getElementsByClassName('dce-scanlight')[0];
    dceLoading.style.display = dceLoading.style.display === "none" ? "inline-block" : "none"
    dceMask.hidden = !dceMask.hidden;
    container.hidden = !container.hidden;
    dceScanlight.hidden = !dceScanlight.hidden;
}
// click anywhere outside the options to collapse the options
function clickToHidden(e) {
    const camViewable = camOptions.classList.value.search("unshow");
    const resViewable = resOptions.classList.value.search("unshow");
    if (camViewable === -1 && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
        toggleCamView();
    }
    if (resViewable === -1 && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
        toggleResView();
    }
    if (camViewable !== -1 && resViewable !== -1) {
        // trigger only once
        document.removeEventListener("click", arguments.callee)
    }
}