• Thursday , 9 July 2020

Build Real Time Face Detection With JavaScript

Code Canyon

In this video we will be setting up real time face detection through a webcam using AI. This AI is so quick that we are able to draw in real time the various faces and expressions of every person in the video without much performance overhead. We will be using the Face API JS library built on Tensor Flow to setup the face detection.

By the end of this video you will have fully functional real time face detection on your site which can be used with any webcam or phone camera. If you want to see a part two of this video make sure to let me know in the comments below.


Part 2 (Face Recognition) Tutorial: https://youtu.be/AZ4PdALMqx0

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/Face-Detection-JavaScript
Face API Library: https://github.com/justadudewhohacks/face-api.js
Models Used: https://github.com/WebDevSimplified/Face-Detection-JavaScript/tree/master/models

🧠 Concepts Covered:

– Streaming a webcam through HTML
– Using Face API to detect faces in real time
– Drawing facial landmarks in real time
– Determining emotion through facial expressions in real time

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

#AI #FaceDetection #JavaScript

Original source

3d Ocean

Related Posts


  1. Web Dev Simplified
    October 22, 2019 at 18:01

    A common issue many people are running into is a 404 error when loading the models folder. This is caused when you are not running your code inside a server that loads the models folder. For example just right clicking the file and opening in Chrome will not work. I use Live Server with VSCode to run the code and that works for me.

  2. Kumar Raunak
    October 22, 2019 at 18:01

    i am having a problem while loading models error-Fetch API cannot load file:///E:/models/tiny_face_detector_model-weights_manifest.json. URL scheme must be "http" or "https" for CORS request.

  3. Rosis Ocis
    October 22, 2019 at 18:01

    Thnks!! Im gonna play fortnite now

  4. soyrandom1
    October 22, 2019 at 18:01

    i'm having trouble with google chrome, i can't get this to work on it, works great on opera.
    I get this error:


  5. m b
    October 22, 2019 at 18:01

    for eavery one who has the 404 error, or the webcam dont load or etc… open the script.js file and add to the example: "faceapi.nets.tinyFaceDetector.loadFromUri('/models')," a dot (.) before the dash (/) = ('./models') like this do this for al the face api links and it wil work. hope it helps

  6. Adrian Dias
    October 22, 2019 at 18:01

    hey bro does this relate to neutral network?

  7. GrvRoy90
    October 22, 2019 at 18:01

    Can you help something with image detection and implementing AR object on it in real time?????

  8. leThe Superhans
    October 22, 2019 at 18:01

    Is it also working on mobile phones?

  9. Rock Star
    October 22, 2019 at 18:01

    Can you make a code for AI face detection in Python?

  10. Muhammad Rafli
    October 22, 2019 at 18:01

    is it firefox can do?

  11. Bilal Javed
    October 22, 2019 at 18:01

    hello dear, i need javascript, my blogger website opan only target country, and not opan any proxy or VPN, so plz give me javascript

  12. Алексей Андреев
    October 22, 2019 at 18:01


  13. Zee J
    October 22, 2019 at 18:01

    hello there, I have opened it in live server . when i am attaching the photo its doing nothing after that
    help any one

  14. iUnixPL
    October 22, 2019 at 18:01


  15. Rohit Katake
    October 22, 2019 at 18:01

    Can we detect multiple faces in a room with face impressions and save the result in database?

  16. Maximilian S.
    October 22, 2019 at 18:01

    Why do you have an expensive studio mic that still sounds like a 5$ headset mic?

  17. Raihan Setyo
    October 22, 2019 at 18:01

    While i am learning about :
    Support vector machine
    K Nearest Neighbour
    Boosted tree
    HSV recognition

    Damn my mid term test was so hard 🙁

    Nice to see an easy way how to do it 🙂

  18. TroyGarner
    October 22, 2019 at 18:01

    In addition to all of the other comments, this isn't AI… It's an API which exposes a machine learning model that takes the data and provides output. It's amazing how many people can't differentiate between AI, ML, and Deep Learning… Thumbs down.

  19. JustyleR
    October 22, 2019 at 18:01

    Bruh.. You didn't "build", you just showed how to use something that is already "built".. Don't clickbait like that man

  20. john adjanohoun
    October 22, 2019 at 18:01

    how do we use with a phone camera, i need more clarity about this please! Thanks

  21. brandon kiprono
    October 22, 2019 at 18:01

    It doesn't seem to work on firefox. Works well in Chrome.

  22. Leivi Cyper
    October 22, 2019 at 18:01

    I liked, please part two ❤

  23. Tony Paino
    October 22, 2019 at 18:01

    You just doxxed your own IP at 2:20 ….

  24. Illu07
    October 22, 2019 at 18:01

    You didn't build the face detection algorithm, nor you've implemented it.

  25. Robert
    October 22, 2019 at 18:01


    October 22, 2019 at 18:01

    I have imported this project and run but the HTML page shows just video. I did console log detections and I got an empty array. It doesn't detect anything. Detection problem I believe.

  27. B Begich
    October 22, 2019 at 18:01

    Face detection works with C languages only

  28. ultimat Vulex
    October 22, 2019 at 18:01

    This works, good tutorial, but I had to change a little of code in startVideo() func.

  29. KB gaming
    October 22, 2019 at 18:01

    Does it work in sublime text

Leave A Comment

You must be logged in to post a comment.