Face recognition on webcam implementation: cannot read property 'descriptor' of undefined

Question

1.00/5 (1 vote)

See more:

, +

Facing this issue in the implementation of face recognition on the webcam camera for the browser using node js for the web application. This error only comes when I add more than 1 name in my labels in loadLabeledImages() function. If I have one name, it works perfectly fine. Beginner here and I have been getting the same error for days now :c

Any help is appreciated, This is a part of a project that has to be completed in a week!
Thank you so much!

Geeting error:

Quote:
"Uncaught (in promise) TypeError: Cannot read property 'descriptor' of undefined"

JavaScript

  1  const video = document.getElementById('video')
  2  
  3  Promise.all([
  4    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  5    faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  6    faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  7    faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
  8  ]).then(startVideo)
  9  
 10  function startVideo() {
 11    navigator.getUserMedia(
 12      { video: {} },
 13      stream => video.srcObject = stream,
 14      err => console.error(err)
 15    )
 16  }
 17  
 18  this.video.addEventListener('play',() => {
 19    const canvas = faceapi.createCanvasFromMedia(video)
 20    document.body.append(canvas)
 21    const displaySize = { width: video.width, height: video.height }
 22    faceapi.matchDimensions(canvas, displaySize)
 23    setInterval(async () => {
 24      const detections = await faceapi.detectAllFaces(video).withFaceLandmarks().withFaceDescriptors()
 25      const resizedDetections = faceapi.resizeResults(detections, displaySize)
 26      canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
 27      faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
 28      this.labeledFaceDescriptors = await this.loadLabeledImages()    const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
 29      const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
 30      results.forEach((result, i) => {
 31        const box = resizedDetections[i].detection.box
 32        const drawBox = new faceapi.draw.DrawBox(box, {label: result.toString()})
 33        drawBox.draw(canvas) 
 34      })
 35  
 36    }, 100) 
 37  })
 38  
 39  function loadLabeledImages() {
 40  
 41    try{
 42      const labels = ['Jane', 'Alex']
 43  
 44      return Promise.all(
 45        labels.map(async label => {
 46          const descriptions = []
 47          for (let i = 1; i <= 3; i++) {
 48            const img = await faceapi.fetchImage(`public/img/${label}/${i}.jpg`)
 49            const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()
 50            descriptions.push(detections.descriptor)          
 51          }
 52    
 53          return new faceapi.LabeledFaceDescriptors(label, this.descriptions)      })
 54      )
 55  
 56    }
 57    catch(err){
 58      console.log(err)
 59    }
 60  
 61  }

What I have tried:

I have tried researching for solutions on google but nothing helped.

Posted 15-Apr-20 14:47pm

idk_Idk

Updated 25-Apr-20 6:09am

Richard Deeming

v3

Add a Solution

Comments

Richard MacCutchan 16-Apr-20 5:15am

The message means that you are trying to use a variable that does not exist. But since you have not told us which line it occurs on we cannot guess why. Also, please do not say your question is urgent. Every question has equal priority here.

idk_Idk 16-Apr-20 9:49am

I am so sorrryyy! New here but I respect and acknowledge that I should not have said its urgent. I have removed that part. I did not know how to highlight the line number so I underlined the lines where "descriptor"- which is the issue appears. Thank you!

Richard Deeming 16-Apr-20 10:11am

I've added line numbers to your code block. Which line is the error thrown from?

Richard MacCutchan 16-Apr-20 10:42am

Thanks, Richard, 29 or 50.

Richard MacCutchan 16-Apr-20 10:41am

It cannot be that line since it does not contain a reference to descriptor. It must be either line 29 or 50. You need to find out why the reference on either of those lines is null.

idk_Idk 16-Apr-20 12:03pm

Thank you Richard and Richard!
Yes, the error refers to line 51. And the error also refers to line 28 since the loadLabledImages() function is being called on 28. I underlined the other lines as descriptor is mentioned in all those lines.
I realise that it is because there is no value in descriptor. I read a lot about the undefined error to figure it out. But I can't understand why it is null. It works fine when its only one person. But as soon as another person gets added, it becomes undefined. I am so sorry for the confusion, I am just very desperately searching for a solution. Thank you for your help!

3 solutions

Solution 2

const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))

Your issue lies here. Read the error message more closely.

"Uncaught (in promise) TypeError: Cannot read property 'descriptor' of undefined"

I recommend adding some logging to see what exactly your resizedDetections array contains within each object to ensure the descriptor property exists.

try

const results = resizedDetections.map(d => { 
   console.dir(d); 
   return faceMatcher.findBestMatch(d.descriptor); 
});

TO ensure the property you're gettin an error about exists. This will get you closer to finding the true culprit.

Posted 25-Apr-20 5:48am

Joshua Jones

Comments

idk_Idk 28-Apr-20 14:15pm

Thank you, yes this way helps a lot. I realised the issue was not in my code but in my images instead. I changed my images and the error went away. Thank you for your help!

Solution 1

Im getting the same error !! Is that any solution for that ?

Posted 24-Apr-20 7:03am

Member 14812370

Comments

Richard MacCutchan 24-Apr-20 13:09pm

Yes, fix your code so that all references are valid.

Richard Deeming 24-Apr-20 13:34pm

"Me too" is not a solution to the problem.

If you want to ask for more information, click the "Have a Question or Comment?" button under the question and post a comment.

If you want to ask a new question, then Ask a Question[^].

Do not post your comment as a "solution" to someone else's question.

idk_Idk 28-Apr-20 14:17pm

My issue got fixed by changing my images. They were of very bad quality so it could not detect any face in them, hence, the error.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 14812370 · Accepted Answer · 2020-04-25T06:10:00

Solution 3

It is because your label image doesn't detect any face. You need to ensure the images are person face

Posted 25-Apr-20 6:10am

Member 14812370

Comments

idk_Idk 28-Apr-20 14:16pm

Thank you so much! This was the error. I changed my images and the error went away.