CODEWITHSUNDEEP
javascriptnode.jsface-api
Jorge Cajina
Jorge Cajina

Reputation: 53

Error Detecting Faces with Face-api.js Expected media to be of type HTMLImageElement | HTMLVideoElement | HTMLCanvasElement

I do not understand how I should send an HTMLImageElement to the detection routine of face-api.js.. I'm using node-red for this implementation..

I have this error :

UnhandledPromiseRejectionWarning: Error: toNetInput - expected media to be of type HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | tf.Tensor3D, or to be an element id at /root/.node-red/node_modules/tfjs-image-recognition-base/build/commonjs/dom/toNetInput.js

And this is the code i'm using : 

var fa = global.get('faceapi');
var ca = global.get('canvas');

const {Image, loadImage, ImageData,createCanvas,HTMLCanvasElement,HTMLImageElement } = ca;

fa.env.monkeyPatch({
   Image: HTMLImageElement
})

//Load all the models ... 
Promise.all([
fa.nets.ssdMobilenetv1.loadFromDisk('/home/models'),
fa.nets.faceRecognitionNet.loadFromDisk('/home/models'),
fa.nets.faceLandmark68Net.loadFromDisk('/home/models'),
]).then(Detector).catch((error) =>  node.warn(error));


function Detector(){
   ca.loadImage('URL OF MY PICTURE').then((image) => 
   {
           let detection = fa.detectSingleFace(image).withFaceLandmarks().withFaceDescriptor().then((detect) => {
               if(detect){
                       node.warn('DETECTED..!');
               }
           });
   }).catch((error) =>  node.warn(error) );
}

Upvotes: 2

Views: 2802

Answers (1)

gonpeche
gonpeche

Reputation: 99

I faced the same issue and found out that I wasn't sending the right argument to the detectSingleFace() function. I don't know what's inside the image value in your code (after loading the image), but be sure that you are sending an HTML element (either Video, Canvas or Image).

For example:

<img id="image" src="data:image/png;base64,iVB...." alt="image">

Beware that the image should be in base64.

If the problem persist, you could try running the repo project and see how the data is being handle, at least this worked for me with the examples-browser folder.

Hope this helps you,

Upvotes: 3

Related Questions