Click here to Skip to main content
15,445,066 members
Please Sign up or sign in to vote.
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:
"Uncaught (in promise) TypeError: Cannot read property 'descriptor' of undefined"

  1  const video = document.getElementById('video')
  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)
 10  function startVideo() {
 11    navigator.getUserMedia(
 12      { video: {} },
 13      stream => video.srcObject = stream,
 14      err => console.error(err)
 15    )
 16  }
 18'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 = => faceMatcher.findBestMatch(d.descriptor))
 30      results.forEach((result, i) => {
 31        const box = resizedDetections[i]
 32        const drawBox = new faceapi.draw.DrawBox(box, {label: result.toString()})
 33        drawBox.draw(canvas) 
 34      })
 36    }, 100) 
 37  })
 39  function loadLabeledImages() {
 41    try{
 42      const labels = ['Jane', 'Alex']
 44      return Promise.all(
 45 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          }
 53          return new faceapi.LabeledFaceDescriptors(label, this.descriptions)      })
 54      )
 56    }
 57    catch(err){
 58      console.log(err)
 59    }
 61  }

What I have tried:

I have tried researching for solutions on google but nothing helped.
Updated 25-Apr-20 6:09am
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.

const results = => 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.

const results = => { 
   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.
Share this answer
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!
It is because your label image doesn't detect any face. You need to ensure the images are person face
Share this answer
idk_Idk 28-Apr-20 14:16pm    
Thank you so much! This was the error. I changed my images and the error went away.
Im getting the same error !! Is that any solution for that ?
Share this answer
Richard MacCutchan 24-Apr-20 13:09pm    
Yes, fix your code so that all references are valid.
Richard Deeming 24-Apr-20 13:34pm     CRLF
"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.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900