script.js

let video = document.getElementById("vid");


             

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


Promise.all([faceapi.nets.tinyFaceDetector.loadFromUri("models"),
             faceapi.nets.faceLandmark68Net.loadFromUri("models"),
             faceapi.nets.faceRecognitionNet.loadFromUri("models"),
             faceapi.nets.faceExpressionNet.loadFromUri("models")
            ]).then(startVideo())


            
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, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
       console.log(detections)
       const resizedDetections = faceapi.resizeResults(detections, displaySize);
       canvas.getContext('2d').clearRect(0,0,canvas.width,canvas.height);
       faceapi.draw.drawDetections(canvas, resizedDetections);
       faceapi.draw.drawFaceLandmarks(canvas,resizedDetections);
       faceapi.draw.drawFaceExpressions(canvas,resizedDetections);
        
    }, 100);
})