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)

)

}

video.addEventListener('play', () => {

const canvas = faceapi.createCanvasFromMedia(video)

document.body.append(canvas)

const displaySize = { width: video.width, height: video.height }

faceapi.matchDimensions(canvas, displaySize)

let labeledFaceDescriptors

(async () => {

labeledFaceDescriptors = await loadLabeledImages()

})()

setInterval(async () => {

const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors()

const resizedDetections = faceapi.resizeResults(detections, displaySize)

canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)

if (labeledFaceDescriptors) {

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)

})

}

}, 200)

})

function loadLabeledImages() {

const labels = ['teste']

return Promise.all(

labels.map(async label => {

const descriptions = []

for (let i = 1; i <= 1; i++) {

const img = await faceapi.fetchImage(`http://localhost:7777/img/${label}/${i}.jpg`)

const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()

descriptions.push(detections.descriptor)

}

return new faceapi.LabeledFaceDescriptors(label, descriptions)

})

)

}