JavaScript's Native face detection API

In this blog, we will learn how can we detect face using JavaScript without any external library.

This API is still in experimental and under development. The API is Shape Detection API which is currently in Web Incubator CG(WICG). So in short this API is not publicly available but we can enable it in chrome.

To enable the face detection feature in chrome, Open chrome browser and type chrome://flags/#enable-experimental-web-platform-features in address bar. Now enable this feature using dropdown and relaunch the browser.

Enable Experimental Web Platform Feature
Enable Experimental Web Platform Feature

Now we can use native face detection library.

FaceDetector API

This API is relatively very easy to use.

Syntax

const faceDetector = new FaceDetector([faceDetectorOptions]);

Here faceDetectorOptions is an optional parameter which is an object type that object can be like as follows.

const faceDetectorOptions = {
  maxDetectedFaces: 3,
  fastMode: false
}

Here
maxDetectedFaces can limit the number of faces being found. It's value will be Integer.

fastMode prioritise speed over accuracy. It's value will be boolean.

Now once the object of FaceDector is created we can simply call detect function and in that we can pass image and video source.

Syntax

//using promise
const faceDetector = new FaceDetector();
faceDetector.detect(image).then(faces =>{
//do something
})
//using async await function 
const faceDetector = new FaceDetector();
const faces = await faceDetector.detect(image);
//do something

Example

Following image I am using for face detection

HTML Code

<img id="image" src="myimg">

JavaScript Code

window.onload = () => {
    const img =  document.getElementById("image")
    const faceDetector = new FaceDetector();
    faceDetector.detect(img).then(faces =>console.log(faces))
};

Output

In console, we will get detected faces

Console Output
Console Output

detect() method returns DetectedFaces object which contains boundingBox and landmarks.

boundingBox is rectangle indicating the position and extent of a detected feature aligned to the image axes.

landmarks Elements like the eye and mouth of a person

Note

I ran this program in different different machine, In Linux machine, nothing is detected. In windows I am only getting boundingBox. I didn't tried this in Mac Machine.

Face Detector API Demo

HTML Code

<img id="image" src="myimg.jpg" style="display: none;">
<canvas id="canvas"></canvas>

Javascript Code

const img =  document.getElementById("image")
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var scale = 1;
image.onload = function() {
ctx.drawImage(img,
            0, 0, img.width, img.height,
            0, 0, canvas.width, canvas.height);

scale = canvas.width / img.width;
};

window.onload = () => {

    const faceDetector = new FaceDetector();
    faceDetector.detect(img).then(faces =>{
        console.log(faces)
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'yellow';
        for(let face of faces) {
            ctx.rect(Math.floor(face.boundingBox.x * scale),
                    Math.floor(face.boundingBox.y * scale),
                    Math.floor(face.boundingBox.width * (scale+0.05)),
                    Math.floor(face.boundingBox.height * (scale+0.1)));
            ctx.stroke();
        }
    })
};

Output

Detected Faces
Detected Faces

Demo link

😊😊😊

Sourabh Somani
He is Microsoft MVP & C# Corner MVP. His core competencies include Mobile and web applications development using .NET, Python, Node.js, C#, JavaScript, jQuery, SQL Server, NoSQL, MongoDB, and Angular.
Chittorgarh, Rajasthan, India