zxing-js default zoom level on Huawei P30

Question

I have a website which uses the zxing-js lib to scan for barcodes. The whole process is working, the only issue is, that on a Huawei P30 the video is zoomed in by default, whereas on a Redmi Note9 it shows up without any zoom(same browser on both; chrome 92.0.4515.131). Problem is: with the applied zoom, the autofocus does not work for scanning my barcodes. Can I set the zoomlevel of the <video> somehow? Here is my code so far:

var codeReader;

function toggleScanner(callBackFunction, forwardParams = {}){
    if(codeReader == undefined){
        loadScanner(callBackFunction,forwardParams);
    } else {
        codeReader.reset();
        codeReader = undefined;
    }
}

function showScanner(){
    let scanBlock = createScanBlock(initialScan);
    clearContentDiv();
    clearOverlayContent();
    addToContentDiv(scanBlock);
}

function createScanBlock(callBackFunction, forwardParams = {}){
    let scanBlock = document.createElement('div');
        scanBlock.id = 'scanBlock';
        scanBlock.className = 'scanBlock';
        let video = document.createElement('video');
            video.id = 'video';
            video.className = 'scanVideo';
            video.height = '320px';
            video.width = '240px';
        scanBlock.appendChild(video);
        let scannerButton = document.createElement('div');
            scannerButton.className = 'button scannerButton';
            scannerButton.onclick = function(){
                toggleScanner(callBackFunction, forwardParams);
            };
        scanBlock.appendChild(scannerButton);
        let scanField = document.createElement('input');
            scanField.type = 'text';
            scanField.onkeydown = function(event){
                checkForEnter(event, callBackFunction, forwardParams);
            };
            scanField.style= 'width: calc(90vw - 70px);margin-left: 10px;';
        scanBlock.appendChild(scanField);
    return scanBlock;
}

function loadScanner(callBackFunction, forwardParams = {}){
    codeReader = new ZXing.BrowserMultiFormatReader();
    let selectedDeviceId;
    document.getElementById('video').style.visibility = 'visible';
    codeReader.listVideoInputDevices().then((videoInputDevices) => {
        selectedDeviceId = videoInputDevices[0].deviceId;
        codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
            if (result) {
                stopCodeReader();
                document.getElementById('video').style.visibility = 'hidden';
                clickSound();
                callBackFunction(result.text, forwardParams);
            }
            if (err && !(err instanceof ZXing.NotFoundException)) {
                showError(err);
            }
        });
    });
}

function stopCodeReader(){
    if(codeReader != undefined)
        codeReader.reset();
    codeReader = undefined;
}

I call the showScanner function onload.

zxing-js default zoom level on Huawei P30

0 Answers0