Human detection in webcam in JavaScript with ml5.js

In this article, I am going to introduce you to a human detection project in JavaScript for the browser which is using ml5.js, a JavaScript library on top of TensorFlow.js. It can detect if a person or human is in the webcam video or not.

Before I continue this article, please have a look at the online demo of this machine learning project.

Now, I am going to tell you some interesting fact related to this human detection tool:

Amazing facts about the human detecting ml5.js project

This project is using the ml5js machine learning library which makes machine learning and deep learning process for browser easier.

Below are some of the facts related to this JavaScript machine learning project:

  • Almost 1000 images of persons used to train our model. I use the Teachable Machine tool to train our model with these images.
  • Almost 1000 images used where there is no human or person exists. Thus, our model learns if there are any human exist in the image or not.
  • ml5js JavaScript library used to do this project. The ml5js is built on top of TensorFlow.js to make the work easy.
  • When a human or person detected, it will give a warning sound as well as show warning red-colored text.
  • The script completely works on the browser.
  • p5.js library used in with ml5.js as p5.js works smoothly with the ml5.js machine learning library.
  • This project is actually an image detection project. The ml5js library taking frame by frame images from the webcam video, processing them and classify them. So this is actually an image classification task behind the scene.


Get the source code

You can easily get the complete source code from GitHub. After you download the source code, all you need is just to do is run it on a server. You have to open the humandetect.html on the browser.

Inside the human-model directory, you will find the model. The model was trained with more than 1000 images of humans/persons through a webcam as well as using images from Google image search using the teachable machine.

Need to detect other objects?

Do you want to detect another object with this script?

Well, it is possible. If you want to see other objects also be detected with this script, then all it needs is just to train with multiple images of that object. You can use the teachable machine to train with new images.

After you get your model from the teachable machine, unzip it and keep it inside the human-model directory or create a new relevance directory and change the directory name also in detect.js JavaScript file.

In the code, there are if-else conditions apply to detect a person. In that condition, just replace the “person” with the name of that object that you are using in the model.

Leave a Reply

Your email address will not be published. Required fields are marked *