Error with face-api - Error: toNetInput - expected media to be of type HTMLImageElement

Question

My name is Gabriel and I'm using face-api.js to apply FaceRecognition on my final essay, on my way to graduate.

With the objective of trying the face-api and understand how it works, I created the following test.js:

import faceapi from "face-api.js";

import * as canvas from 'canvas';
const { Canvas, Image, ImageData } = canvas;
faceapi.env.monkeyPatch({ Canvas, Image, ImageData });

const faceDetectionNet = faceapi.nets.ssdMobilenetv1;
const minConfidence = 0.5;
const faceDetectionOptions = new faceapi.SsdMobilenetv1Options({ minConfidence });

async function runRecognition() {    
    await faceDetectionNet.loadFromDisk('./weights');
    await faceapi.nets.faceLandmark68Net.loadFromDisk('./weights');
    await faceapi.nets.faceRecognitionNet.loadFromDisk('./weights');

    const REFERENCE_IMAGE = './bbt1.jpg';
    const QUERY_IMAGE = './bbt2.jpg';

    const referenceImage = await canvas.default.loadImage(REFERENCE_IMAGE);
    const queryImage = await canvas.default.loadImage(QUERY_IMAGE);

    const detections_ref = await faceapi.detectAllFaces(referenceImage, faceDetectionOptions)
        .withFaceLandmarks()
        .withFaceDescriptors();

    const detections_query = await faceapi.detectAllFaces(queryImage, faceDetectionOptions)
        .withFaceLandmarks()
        .withFaceDescriptors();

    const faceMatcher = new faceapi.FaceMatcher(detections_ref);

    detections_query.forEach(fd => {
        const bestMatch = faceMatcher.findBestMatch(fd.descriptor);
        console.log(bestMatch.toString());
    });
}

runRecognition();

But I wasn't able to make it work... Right now, I'm getting the following error: "UnhandledPromiseRejectionWarning: Error: toNetInput - expected media to be of type HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | tf.Tensor3D, or to be an element id at C:\Users\gabri\Desktop\TCC\face-api-teste\node_modules\face-api.js\build\commonjs\dom\toNetInput.js:38:35"

Does anyone have any idea of what the problem is? I checked the type of "referenceImage" and it's an Image instead of HTMLImageElement (I guess..), so I'm investigating the monkey patch, Idk, maybe it's not working properly. But I might be wrong..

Thanks for the help 😄

Answer 1

I did post an Issue to github Face-API page, and there I was able to found a solution, so, if anyone would like to see it: https://github.com/justadudewhohacks/face-api.js/issues/729 Thanks for your time!