Error at faceapi.drawDetection(canvas, boxesWithText).

I am trying to implement the use case list on below site

https://itnext.io/realtime-javascript-face-tracking-and-face-recognition-using-face-api-js-mtcnn-face-detector-d924dd8b5740

i am able to do face detection but getting issue in face recognition with some investigation it looks like boxesWithText is giving empty output which is causing drawDetection to fail.

Error

Uncaught (in promise) TypeError: Cannot read property ‘x’ of undefined at VM1409 face-api.min.js:1 at Array.forEach (<anonymous>) at Object.t.drawDetection (VM1409 face-api.min.js:1) at run2 (VM1410 index.js:75)

JS code

 $(document).ready(function() {
     
  run1()
})

async function run1() {

    const MODELS = "http://localhost:8000/Desktop/FaceID/Face%20Detection%20with%20webcam/models"; // Contains all the weights.

    await faceapi.loadSsdMobilenetv1Model(MODELS)
    await faceapi.loadFaceLandmarkModel(MODELS)
    await faceapi.loadFaceRecognitionModel(MODELS)
    

// try to access users webcam and stream the images
  // to the video element
 const videoEl = document.getElementById('inputVideo')
  navigator.getUserMedia(
    { video: {} },
    stream => videoEl.srcObject = stream,
    err => console.error(err)
)
}

async function run2() {
    
const mtcnnResults = await faceapi.ssdMobilenetv1(document.getElementById('inputVideo'))

overlay.width = 500
overlay.height = 400
const detectionsForSize = mtcnnResults.map(det => det.forSize(500, 400))

faceapi.drawDetection(overlay, detectionsForSize, { withScore: true })    


const input = document.getElementById('inputVideo')
const fullFaceDescriptions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()
    
    
const labels = ['sheldon','ravish']

const labeledFaceDescriptors = await Promise.all(
  labels.map(async label => {
    // fetch image data from urls and convert blob to HTMLImage element
    const imgUrl = `http://localhost:8000/Desktop/${label}.png`
    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)
  })
)

// 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))


const boxesWithText = results.map((bestMatch, i) => {
  const box = fullFaceDescriptions[i].detection.box
  const text = bestMatch.toString()
  const boxWithText = new faceapi.BoxWithText(box, text)
})

faceapi.drawDetection(overlay, boxesWithText)


}

async function onPlay(videoEl) {
    run2()
    setTimeout(() => onPlay(videoEl))
} 

[AndreasRef]

Hi, I am attempting to get this example from the blogpost at itnext.io running as well, but have a few issues. Does anyone have the full source code (HTML + JS) for this, so I can see what I am missing?

[logiticks-github]

const video = document.getElementById(‘video’)

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

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

video.addEventListener(‘play’, async () => { const canvas = faceapi.createCanvasFromMedia(video) document.body.append(canvas) const labeledFaceDescriptors = await loadLabeledImages() const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6) 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) if(resizedDetections.length>0){ 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.label.toString() }) drawBox.draw(canvas) })
}

// faceapi.draw.drawDetections(canvas, resizedDetections)
// faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
// faceapi.draw.drawFaceExpressions(canvas, resizedDetections)

}, 100) })

function loadLabeledImages() { const labels = [‘Black Widow’, ‘Captain America’, ‘Captain Marvel’, ‘Hawkeye’, ‘Jim Rhodes’, ‘Thor’, ‘Tony Stark’] return Promise.all( labels.map(async label => { const descriptions = [] for (let i = 1; i <= 1; i++) { const img = await faceapi.fetchImage(images/${label}.png) const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor() descriptions.push(detections.descriptor) debugger; } return new faceapi.LabeledFaceDescriptors(label, descriptions) }) ) }