Face Tracking with JavaScript on The Browser (Mobile Or Desktop)

Face Tracking with JavaScript on The Browser (Mobile Or Desktop)

The JavaScript for Face Detection, Face Recognition the camera through the mediaDevices API. Face tracking with JavaScript on the browser (mobile or desktop) - In our JavaScript, we’re going to add a loop that runs Face Mesh on our video feed and outputs predicted face-recognition.js Want to build a website that uses face tracking? Well, you’re in the right place!

Today I’m going to show you how to set up a webpage that does real-time face tracking in any browser, mobile, or desktop. I’m doing everything in HTML and JavaScript to allow for cross-device portability. I’ll also show some easily extended working demos for face tracking, a basic Snapchat filter, and scientific applications.

All demos can be found here: facemeshmedium.netlify.app/

About the Model

With Google’s rapid development of Tensorflow.JS, machine learning on the web has never been easier. We’re going to be using Google MediaPipe’s Face Mesh model for all of our face-tracking needs.

Analyzing two faces

https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html

Google Research has a subdivision called MediaPipe which focuses on making machine learning models run cross-device. This lets them predict anything from a big, chunky desktop to a mobile smartphone with no GPU (main site here).  Face Mesh is their face tracking model, which takes in a camera frame and outputs 468 labeled landmarks on detected faces. It also clusters the landmarks by facial region (“Upper Lip,” “Left Eye,” etc.) and gives bounding boxes of the face in the output.

Oh, and did I mention that the landmarks it gives you are in 3D coordinates — with depth for the face?! How dope is that?

Face Mesh also outputs the relative depth of each region of your face ( link)

If you scroll down on Face Mesh’s page, you may be wondering why I’m writing this guide; MediaPipe already provides HTML examples using Face Mesh. There are two reasons for this:

  1. Their examples don’t work on mobile browsers due to a difference in the way video streams are handled on mobile and desktop JavaScript.
  2. The drawing and editing libraries are in this

web-development javascript programming machine-learning

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Machine Learning Developers in India

We supply you with world class machine learning experts / ML Developers with years of domain experience who can add more value to your business.

Hire Machine Learning Engineer | Offshore Machine Learning Experts

We are a Machine Learning Services provider offering custom AI solutions, Machine Learning as a service & deep learning solutions. Hire Machine Learning experts & build AI Chatbots, Neural networks, etc. 16+ yrs & 2500+ clients.

Hire Machine Learning Developer | Hire ML Experts in India

We supply you with world class machine learning experts / ML Developers with years of domain experience who can add more value to your business.

Applications of machine learning in different industry domains

We supply you with world class machine learning experts / ML Developers with years of domain experience who can add more value to your business.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.