How to Face Detection using Webcam in PHP?

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.

├── 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">
  <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>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;

    canvas {
      position: absolute;
  <video id="video" width="720" height="560" autoplay muted></video>

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


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

video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  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)


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


4 Comment

January 05, 2021

saya download dan run aplikasi kenapa Blank aja ya

Mon February, 2021

coba pidahin folder models di luar

March 31, 2020

Can u show me how to download the model?

Thank you

Tue March, 2020

I saw it Thank you

December 31, 2019

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

Site Admin
Tue December, 2019

Hi Maryjo,

Wishing you a Merry Christmas and happy new year

Thank you

Hardik Savani
December 29, 2019

Great article,

Thank you!