Face API – Microsoft Azure Cognitive Services

Introducing Surface Studio. Turn your desk into a studio. Pre-order now >

Microsoft Face API is a cloud-based service providing the most advanced face algorithms. It is providing two main functions

  1. Face detection with attributes and
  2. Face recognition

Face Detection

With Face API there can be detected up to 64 faces with high precision face location in an image. You can specify image by bytes or a valid URL.

In this first tutorial for Face API I am going to explain you the process of Face Detection. Following are the steps involved in this process.

  1. You need to subscribe to Microsoft Azure Cognitive Services  Here and get the subscription keys to different APIs which is a very easy process.
    • Locate the Solution Explorer, right click your project and then click Manage NuGet Packages.
    • In NuGet Package Manager window, select nuget.org as your Package Source, search for Microsoft.ProjectOxford.Face and install.

Implementing the Face API

Here in this tutorial I am adopting ASP.Net Core to implement the Face API. Please note that the official example given by the Microsoft is done in WPF application. The reason for this is that right now there is no graphics library available in ASP.Net Core being it a very latest technology there are still many features needed to be implemented. The main purpose of the ASP.Net Core is to be cross platform and previous graphics library based on System.Drawing is just Windows based. Therefore it is not supported in the .Net Core.

So how did I achieve the task? Well I have used the client side graphics to fulfill the need. May be it is not the best idea but I wanted to use it with ASP.Net Core to give a variety of flavors of different new technologies.

So lets get started with that.

Application Functionality

Well application is simple yet it covers some features of the latest technologies.

  1. Implement the Image upload functionality in ASP.Net Core
  2. Detect Faces in uploaded image.
  3. Show the Detected faces highlighted in the UI.

Face API Controller starts with some necessary fields as follows.


IFaceServiceClient is the proxy to the Azure based Cognitive Service for FaceIHostingEnvironment is letting us know the environment wether it is production or staging etc.

All this will happen in an action of a Controller. Following is the code for the desired action.


Now note there are three more private methods in this action which are self explanatory for their actions by their names. Following are the bodies of these methods.




In the method DetecFaces we are calling the asynchronous method DetectAsync from the Face API which takes a FileStream as an argument. The FileStream is pointing to the image file.

Discover Udemy’s featured courses!

Following is the code for the View of the App.


Form Tag Helpers

Please note the features of asp.net core in above code. The tag used as form is actually a Tag Helper for Form tag. Tag Helpers are a new feature in MVC that you can use for generating HTML. The syntax looks like HTML (elements and attributes) but is processed by Razor on the server. Tag Helpers are in many ways an alternative syntax to Html Helper methods but they also provide some functionality that was either difficult or impossible to do with helper methods. Each tag helper has a different behavior and different options.

We are using canvas to show the image and draw the rectangles on the faces. Further it is proceeded with the script tag for JavaScript. The functionality covered in the JavaScript is as follows.


After getting the above objects, we are performing the following functionality on the load of the image object.


The above event contains three function calls, implementations for which are as follows.




As all works perfect following is the output of my application.


My parents are looking awesome 🙂 . That’s all for today folks. I am coming with more details on Face API pretty soon. Happy Coding 🙂

  • Show Comments (0)

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

comment *

  • name *

  • email *

  • website *