How to compare and match faces in Javascript

Facial recognition technology has become increasingly sophisticated in recent years, with Deep Learning advances providing an incredible boost in accuracy and reliability. Generally it is rather daunting to set all of this up from a developer’s standpoint. In response to this dilemma, we have created an API that can be called upon to perform such facial comparison checks remotely. This post will quickly demonstrate its setup and use.

For Javascript users, importing our client for the API will be the initial step; use this script tag in your HTML file to do this.

<script src="https://cdn.cloudmersive.com/jsclient/cloudmersive-image-client.js"></script>

Following that, call the facial comparison function from the API with this code block here:

var CloudmersiveImageApiClient = require('cloudmersive-image-api-client');var defaultClient = CloudmersiveImageApiClient.ApiClient.instance;// Configure API key authorization: Apikeyvar Apikey = defaultClient.authentications['Apikey'];Apikey.apiKey = 'YOUR API KEY';// Uncomment the following line to set a prefix for the API key, e.g. "Token" (defaults to null)//Apikey.apiKeyPrefix = 'Token';var apiInstance = new CloudmersiveImageApiClient.FaceApi();var inputImage = "/path/to/file"; // File | Image file to perform the operation on; this image can contain one or more faces which will be matched against face provided in the second image.  Common file formats such as PNG, JPEG are supported.var matchFace = "/path/to/file"; // File | Image of a single face to compare and match against.var callback = function(error, data, response) {if (error) {console.error(error);} else {console.log('API called successfully. Returned data: ' + data);}};apiInstance.faceCompare(inputImage, matchFace, callback);

Now enter your matchFace (against which images will be tested) and an inputImage to try it out. For example with this matchFace:

Image for post
Image for post

And this inputImage

Image for post
Image for post

We shall get this result:

{
"Successful": true,
"Faces": [
{
"LeftX": 218,
"TopY": 150,
"RightX": 304,
"BottomY": 237,
"HighConfidenceMatch": true,
"MatchScore": 0.7584117650985718
}
],
"FaceCount": 1,
"ErrorDetails": null
}

As you can see, the results are quite accurate despite the difference in face angle and expression.

Written by

There’s an API for that. Cloudmersive is a leader in Highly Scalable Cloud APIs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store