Не подключается изображение при включении камеры, что делать?

Question

Алексей @Eldenhard

Не подключается изображение при включении камеры, что делать?

Всем привет, не могу понять почему не включается картинка при включении камеры, делал приложение для работы с маской

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/npm/clmtrackr@1.1.2/build/clmtrackr.min.js"></script> <!-- Обнаружение черт лица -->

</head>
<body>
    
    <script src="js/app.js"></script>
</body>
</html>

let outputWidth;
let outputHeight;

let faceTracker;
let videoInput;

let imgMask;
let imgFace;

let selected = -1;



function preload() { //выполняется перед построение  пользовательского интерфейса
    imgMask = loadImage("https://img.icons8.com/officel/2x/user.png");
    imgFace = loadImage("https://img.icons8.com/officel/2x/user.png");
}

function setup(){ //Загружаем пользовательский интерфейс выполняется 1 раз и готовим всё и создаем интерфейс
   
    const maxWidth= Math.min(windowWidth, windowHeight);
    pixelDensity(1);
    outputHeight = max.Width * 0.75; //Сделал разрешение 4 на 3
    outputWidth = maxWidth;

    createCanvas(outputWidth, outputHeight)

    videoInput = createCapture(VIDEO);
    videoInput.size(outputWidth,outputHeight);
    videoInput.hide();

    const sel = createSelect();
    const selectList = ['Mask', 'Face'];
    sel.option('Select filter', -1); //Здесь нет маски
    for(let i=0; i<selectList.length; i++){
        sel.option(selectList[i],i);
    }
    sel.changed(applyFilter);


    faceTraker = new clm.tracker();
    faceTracker.init();
    faceTracker.start(videoInput.elt)

}


function applyFilter() {
    selected = this.selected();
}


function draw(){ // Чтобы система могла визуализировать экран
 image(videoInput, 0, 0, outputWidth, outputHeight);

 switch (selected) {
     case '-1': break;
     case '0' : drawMask(); break;
     case '1' : drawFace(); break;
 }
 
}
function drawMask(){
    const positions = faceTracker.getCurrentPosition();
    if (positions !== false) {
        push();
         const wx = Math.abs(positions[13][0] - positions [1][0]) * 1.2;
         const wy = Math.abs(positions[7][1] - Math.min(positions[16][1], positions[20][1]))*1.2;
         translate(-wx/2, -wy/2);
         image(imgMask, positions[62][0], positions[62][1], wx,wy);
         pop();
    }
}
function drawFase(){
    const positions = faceTracker.getCurrentPosition();
    if (positions !== false) {
        push();
         const wx= Math.abs(positions[13][0] - positions [1][0]) * 1.2;
         const wy= Math.abs(positions[7][1] - Math.min(positions[16][1], positions[20][1]))*1.2;
         translate(-wx/2, -wy/2);
         image(imgFace, positions[62][0], positions[62][1], wx,wy);
         pop();
    }
}
function windowResized(){
    const maxWidth = Math.min(windowWidth, windowHeight);
    pixelDensity(1);
    outputHeight= maxWidth * 0.75;
    outputWidth = maxWidth;
    resizeCanvas(outputWidth, outerHeight);
}