Error: toNetInput - Problem with canvas.loadImage() + faceapi.detectAllFaces()

Hey!

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?

Thanks for the help 😄

[vladmandic]

what is the result and type of const referenceImage = await canvas.default.loadImage(REFERENCE_IMAGE); ?

if you’re not drawing on canvas in nodejs, you don’t actually need 3rd party libraries and monkey patches just to load image and use it in face-api - you can use native tfjs-node methods directly, take a look at https://github.com/vladmandic/face-api/blob/master/example/node.js, specifically ‘image()’ method.

[vladmandic]

@juancruzsosagab @eze-villegas this issue was successfully resolved which you can see if you read through it. and posting “me too” on an issue that was closed 1.5 years ago does not help. if you have a problem, document it and open a new issue.