Face-api.js: Face Recognition on Webcam Implementation: Cannot read property 'descriptor' of undefined

[shriyaaa]

Urgent: Facing this issue in the implementation of face recognition on the webcam camera for the browser. 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. Any help is appreciated. This is a part of a project that has to be completed in a week!
Thank you so much!

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

This is the code for your reference:

`

 const video = document.getElementById('video')

 Promise.all([
   faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
   faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
   faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
   faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
 ]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

this.video.addEventListener('play',() => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video).withFaceLandmarks().withFaceDescriptors()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
    this.labeledFaceDescriptors = await this.loadLabeledImages()
    const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
    const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
    results.forEach((result, i) => {
      const box = resizedDetections[i].detection.box
      const drawBox = new faceapi.draw.DrawBox(box, {label: result.toString()})
      drawBox.draw(canvas) 
    })

  }, 100) 
})

function loadLabeledImages() {

  try{
    const labels = ['Shriya', 'judhi']

    return Promise.all(
      labels.map(async label => {
        const descriptions = []
        for (let i = 1; i <= 3; i++) {
          const img = await faceapi.fetchImage(`public/img/${label}/${i}.jpg`)
          const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()
          descriptions.push(detections.descriptor)
        }

        return new faceapi.LabeledFaceDescriptors(label, this.descriptions)
      })
    )

  }
  catch(err){
    console.log(err)
  }

}`

[chenchiuchi]

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

[shriyaaa]

@chenchiuchi Thank you so much, this fixed my problem. The issue was that my image was of bad quality. Thank you

[shriyaaa]

Sorry, I have another question. What do I do to record the timestamp of whenever the face is recognised? I am making an attendance system so I need to record the check-in, check-out time. Thank you.

[jartaud]

@idkidk-idk leave the timestamp to your backend (or DB level). I mean, once you have a successful match, you make a request to your backend to record the clock in/out.

[ThaiNhung]

Hi @idkidk-idk,
I have a problem as above, so as your comment "The issue was that my image was of bad quality." I have updated my image so it still displays the error. Could you please help me share your opinion?

[shriyaaa]

Heyy @ThaiNhung
I was stuck with this issue for almost half a month. My problem was that I had taken a screenshot of a pretty small picture and saved it and never looked at it again. So I thought my code was wrong and I kept making changes to the code. I opened the picture and noticed its too small and hence the quality was bad and I replaced it and everything worked.
So basically if your error points out to the descriptor in the loadLabledImages() function then it's because it can't find a face in the image you have stored and nothing is wrong with your code. If its not your quality, then there should be something wrong with perhaps the color or some other element that is making it difficult to recognise the face in the stored image. So I guess try changing it to a clear picture of just the face.
I hope it helped! My code remained the same. Let me know if you need any help from my side! Good luck <3

[ThaiNhung]

Hi @idkidk-idk ,
Thank you for your quick response. As your comment, I try to change to a clear picture just the face so so it still displays this error. Besides, I take care of some elements such as color, Brightness but it not feasible.