Trying to use Face api to compare a captured image with another one compressed as a base64 that is stored as a string ina json file

Question
I’m working on a project that uses the Face API to compare a live video image with a base64-encoded image. However, when I click the button with the id captureButton, I encounter the following error in the console:

undefined:1 GET http://127.0.0.1:5501/undefined 404 (Not Found) I’m unsure why I’m getting a 404 Not Found error, as I believe my code should be capturing an image from the video stream and comparing it with a base64 image successfully.

Project Context
The goal of my project is to implement a face recognition system that captures images from a video feed (using the device’s webcam) and compares them to a pre-existing image in base64 format. The user can upload an image that is then encoded into base64 format, which I attempt to match against the live video feed to see if they represent the same individual.

Code Overview
Below is the relevant code I’m using, which initializes the Face API, captures a video feed, and sets up the image comparison functionality:

// Funcionalidad api
const base64Image = postData("imagen", {
    dni: dni
});

const video = document.getElementById("video");
const overlayCanvas = document.getElementById("overlayCanvas");
const imageUpload = document.getElementById("imageUpload");
const capturedImage = document.getElementById("capturedImage");
const captureButton = document.getElementById("captureButton");

let uploadedFaceData; // Esto se mantendrá para la imagen subida, si se necesita.
let capturedFaceData;

document.addEventListener("DOMContentLoaded", async () => {
    // Código de inicialización
    console.time("Cargar modelos");
    await faceapi.nets.tinyFaceDetector.loadFromUri("./face-api/models");
    await faceapi.nets.faceLandmark68Net.loadFromUri("./face-api/models");
    await faceapi.nets.faceRecognitionNet.loadFromUri("./face-api/models");
    console.timeEnd("Cargar modelos");
    startVideo();
});

function startVideo() {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
            video.srcObject = stream;
            // Código para manejar el video
        })
        .catch((err) => {
            console.error("Error al acceder a la cámara", err);
            alert("No se pudo acceder a la cámara");
        });
}

captureButton.addEventListener("click", async () => {
    // Código para capturar la imagen del video y comparar
});

Here is my html

<div class="pagina4 pagina flex_center" id="pagina4">

            <div class="contenedor_pagina4 flex_center_evenly">

                <p class="bienvenida_pagina4">Bienvenido/a, (<b id="nombre" class="gradientDCI">nombre</b>)</p>

                <span>Mirá a la cámara!</span>

                <div class="desbloqueo_pagina4 flex_center" id="cara">

                    <div class="camara glass flex_center">

                        <video id="video" autoplay playsinline></video>

                        <img id="capturedImage" style="display: none;"/>

                        <canvas id="overlayCanvas" width="640" height="480" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;"></canvas></div>

                    <div class="opciones_camara flex_center_evenly">

                        <button id="captureButton" class="glass button_hover flex_center"></button>

                        <img id="capturedImage" style="display: none;"/>

                        <!-- <button id="compareButton" class="glass"></button> -->

                        <!-- <button id="retry" class="glass"></button> -->

                        <img id="uploadedImage" style="display: none;"/>

                    </div>

                  </div>

                  <input type="file" id="imageUpload" accept="image/*" style="position: absolute; right: 1em; top: 72%;"/>

            </div>

            <div class="contenedor_home_back">

                <button class="home glass button_hover"></button>

                <button id="back4" class="glass button_hover"></button>

            </div>

        </div>