In this article, we will share with you how to face detection using webcam by javascript in PHP application. in some web applications, you need to detect face then this article will be very helpful for you. here will share with you how to detect face from webcam or any photos help of some javascript code.

We can be done our face detection functionality in web application help of faceapi js. this javascript library allows to you some functions to detect the face in web application. we will also use some by default model data to detect face expression when we detect the face. you can read the document here FaceAPIJS

Preview :

After done all steps then the preview will look like in the browser.

Project Directories Structure

Please follow the directories structure for this tutorial.

facedetection
├── models
├── face-api.min.js
├── index.php
└── script.js

After, create the above structure than the first things you need to download all models form this link Face detection models and put into the model's folder.

Then the download face-api.min.js from this link face-api.min.js

Step - 1 : Create index.php file

First, we need to create one index.php file and write the following code into it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Face Detection</title>
  <script defer src="face-api.min.js"></script>
  <script defer src="script.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    canvas {
      position: absolute;
    }
  </style>
</head>
<body>
  <video id="video" width="720" height="560" autoplay muted></video>
</body>
</html>

Step - 2 : Create script.js file

Now, we need to create script.js a file for write face detection js code. simply copy the following code and paste it into your script.js file.

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')
]).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)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
    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)
})

Conclusion

You can download this project from Github link Download

You can see face detection functionality is very easy to built help of face-api.js. You can check I hope you will like this article. Also please follow us on Twitter and Like our Facebook page for updates.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

3 Comments

  • Image
    Mark
    March 31, 2020 Reply

    Can u show me how to download the model?

    Thank you

    Image
    Mark
    Tue March, 2020

    I saw it Thank you

  • Image
    Maryjo
    December 31, 2019 Reply

    I have been surfing on-line more than 3 hours today, but I by no means discovered any fascinating
    article like yours. It's pretty worth enough for me.
    In my view, if all website owners and bloggers made good content as
    you probably did, the internet might be
    a lot more helpful than ever before. Its like you read my mind!
    You appear to grasp so much approximately this, such as you wrote
    the book in it or something. I feel that you simply can do with a few p.c.
    to force the message home a bit, however other than that, this
    is excellent blog. An excellent read. I'll definitely be back.
    Howdy just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Chrome.
    I'm not sure if this is a formatting issue or something to do with browser compatibility but I thought I'd
    post to let you know. The design look great
    though! Hope you get the problem resolved soon. Many thanks http://foxnews.net/

    Image
    Site Admin
    Tue December, 2019

    Hi Maryjo,

    Wishing you a Merry Christmas and happy new year

    Thank you

  • Image
    Hardik Savani
    December 29, 2019 Reply

    Great article,

    Thank you!