How to detect live face and not photo using face-api.js?

Question

I am using face-api.js to do face recognition for a person and not a photo. However, if the user puts a photo, it is able to identify it. How can I do that?

Astrea

I am working on the same problem and would welcome an advice. I guess the landmarks could be used for that purpose. There are movements within the landmarks in a live video (no capture of a picture) which could be calculated. How could that be calculated? – Sheffie

Answer 1

whis is my script

<script>
    let forwardTimes = []

    let withFaceLandmarks = false
    let withBoxes = true
    function onChangeWithFaceLandmarks(e) {
      withFaceLandmarks = $(e.target).prop('checked')

    }
    function onChangeHideBoundingBoxes(e) {
      withBoxes = !$(e.target).prop('checked')
    }
    function updateTimeStats(timeInMs) {
      forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
      const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
      $('#time').val(`${Math.round(avgTimeInMs)} ms`)
      $('#fps').val(`${faceapi.utils.round(1000 / avgTimeInMs)}`)
    }
    async function onPlay(videoEl) {
      if(!videoEl.currentTime || videoEl.paused || videoEl.ended || !isFaceDetectionModelLoaded())
        return setTimeout(() => onPlay(videoEl))

      const options = getFaceDetectorOptions()
      const ts = Date.now()
      const drawBoxes = withBoxes
      const drawLandmarks = withFaceLandmarks
      let task = faceapi.detectAllFaces(videoEl, options)
      task = withFaceLandmarks ? task.withFaceLandmarks() : task
      const results = await task
      updateTimeStats(Date.now() - ts)
      const canvas = $('#overlay').get(0)
      const dims = faceapi.matchDimensions(canvas, videoEl, true)
      const resizedResults = faceapi.resizeResults(results, dims)
      if (drawBoxes) {
        faceapi.draw.drawDetections(canvas, resizedResults)
      }
      if (drawLandmarks) {
        faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
      }
      setTimeout(() => onPlay(videoEl))
    }
    async function run() {
      // load face detection and face landmark models
      await changeFaceDetector(TINY_FACE_DETECTOR)
          await faceapi.loadSsdMobilenetv1Model('/')
              await faceapi.loadFaceRecognitionModel('/')
      await faceapi.loadFaceLandmarkModel('/')
      changeInputSize(416)
      // start processing frames const labels = ['1','2'] const labeledFaceDescriptors = await Promise.all(   labels.map(async label
=> {
    // fetch image data from urls and convert blob to HTMLImage element
    const imgUrl = `surati/${label}.JPG`
    const img = await faceapi.fetchImage(imgUrl)
   
     // detect the face with the highest score in the image and compute it's landmarks and face descriptor
    const fullFaceDescription = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()
   
     if (!fullFaceDescription) {
      throw new Error(`no faces detected for ${label}`)
    }
   
     const faceDescriptors = [fullFaceDescription.descriptor]
    console.log(label)
    return new faceapi.LabeledFaceDescriptors(label, faceDescriptors)   }) ) const input = document.getElementById('inputVideo') const fullFaceDescriptions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()
   
    // 0.6 is a good distance threshold value to judge // whether the descriptors match or not const maxDescriptorDistance = 0.6 const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, maxDescriptorDistance)  console.log("face matcher"+faceMatcher) const results = fullFaceDescriptions.map(fd => faceMatcher.findBestMatch(fd.descriptor))

    results.forEach((bestMatch, i) => {     const box = fullFaceDescriptions[i].detection.box   const text = bestMatch.toString()   const drawBox = new faceapi.draw.DrawBox(box, { label: text })

drawBox.draw(document.getElementById('overlay'))        console.log(text)   }) //  results  
 

     onPlay($('#inputVideo').get(0)) }


    function updateResults() {}
    $(document).ready(function() {
      renderNavBar('#navbar', 'video_face_tracking')
      initFaceDetectionControls()
      run()
    })

            </script>

Its can detect face, if you open browser console you can see its can recocnaation but with error..  maybe its help you ....  if you have good code maybe shear to my? 

Leslielesly