WHAT IS FACE DETECTION?
The definition of face detection refers to a subset of computer
technology that can identify people’s faces within digital images. Face
detection applications employ algorithms focused on detecting human faces
within larger images that might contain landscapes, objects and other parts of
humans.
HOW FACE
DETECTION WORKS
Face detection technology might begin by searching for human eyes.
It might do this by testing valley regions in the gray-level image. It might
then use a genetic algorithm to detect facial regions including eyebrows, the
mouth, nose, nostrils and the iris. The algorithm would first identify possible
facial regions and then apply additional testing to validate.
APPLICATIONS
OF FACE DETECTION
Photography
Marketing
Social Medias
Find Missing person
Helping blind people
Advertising
Smart phones
Prevent retail crimes
VIP detection
Track attendance
And so many ….
Here we can see how we can use/integrate Microsoft Face Api for
detecting face.
Prerequisites
·
An
Azure subscription. If you do not have
one, you can sign up for a free account.
·
Visual
studio 2017 15.9.4
Step 1: Create a .net core project
Step 2: Go to extension and
support from Tools
Step 3 : Then search for Cognitive Services
Then install the Cognitive services
Note: In my system the service is already installed, if in your system it
is not installed then it will show the button to install.
Installing an extension requires a restart of the integrated
development environment (IDE).
Step 4: Restart Visual Studio. The extension installs when you
close Visual Studio, and is available next time you launch the IDE.
Step 5: Open the visual studio again and open then project which we
created earlier. Then right click Connected services from solution explorer
then select Add Connected Service
Step 6: Then select “Get Face
attributes with Face API” from the list
Step 7: If you don’t have an Azure subscription on the signed account
then it will show a page like this. From here you can go to the page and there
you can create an Azure subscription
Step 8: I have used my personal email for the subscription, you can use yours
(either personal or official)
Step 9: Once you have completed the subscription you will get a page
like below
Step 10: You can click on the edit button to edit the Name , Location
etc..
Step 11: Once you have completed then Click on the add button.
Step 12: Check your appsettings.json
There you can find Service key, Service end point etc.
Step 13: Now we are ready to use the face api.
Create a view for uploading the file you can use the below example.
<div class="row">
<div class="col-md-3">
<h2>Application uses</h2>
<ul>
<li>Face detection</li>
</ul>
</div>
</div>
<div class="row">
<form asp-action="FaceDetection" enctype="multipart/form-data">
<div class="form-group">
<div class="col-md-10">
<p>Upload one file using
this form:</p>
<input type="file" name="formFile" />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Upload" />
</div>
</div>
</form>
</div>
<div>
Step 14: Create a controller method which accepts this file, calls face
api and get the results.
You can use the below controller method sample
/// <summary>
/// Detect face from image
/// </summary>
/// <param name="formFile"></param>
/// <returns></returns>
public IActionResult
FaceDetection(IFormFile formFile)
{
if (formFile.Length > 0)
{
byte[] fileBytes;
using (var ms = new MemoryStream())
{
formFile.CopyTo(ms);
fileBytes = ms.ToArray();
}
ViewBag.ImageArray = fileBytes;
///Best practice tip ->Read these items from config rather than
using them directly
string faceApiKey = "b6251d51608640fc9b98871301c415e6";
string faceApiEndPoint = "https://southeastasia.api.cognitive.microsoft.com/face/v1.0";
HttpClient client = new HttpClient();
//
Request headers.
client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", faceApiKey);
//
Request parameters. A third optional parameter is "details".
string requestParameters = "returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise";
//
Assemble the URI for the REST API Call.
string uri = faceApiEndPoint + "/detect?" + requestParameters;
string contentStringFace = string.Empty;
using (ByteArrayContent content = new ByteArrayContent(fileBytes))
{
// This example uses content type
"application/octet-stream".
// The other content types you can use are
"application/json" and "multipart/form-data".
content.Headers.ContentType
= new MediaTypeHeaderValue("application/octet-stream");
// Execute the REST API call for getting the face detection data.
var response = client.PostAsync(uri, content).Result;
// Get the face detection json response
contentStringFace =
response.Content.ReadAsStringAsync().Result;
ViewBag.FaceDetectionResults = contentStringFace;
}
}
return View(nameof(Index));
}
Step 15: Make sure that you have included your
faceApiKey, in example I have used mine.
Step 16: Now our method is ready to call faceapi. If we want to
see then results in the ui then use the below code in the cshtml
<div>
@if (ViewBag.ImageArray !=
null)
{
var base64 = Convert.ToBase64String(ViewBag.ImageArray);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
<div class="row">
<div class="col-md-12">
<img src="@imgSrc" />
</div>
</div>
<div class="row">
<div class="col-md-12">
@ViewBag.FaceDetectionResults
</div>
</div>
}
</div>
This will show the selected image as well the data from the Face api.
Step 17: Run the application and choose a file which contains a
face.
Step 18: Click on the Upload button to see the results
There you can find the faceRectangle key that will contain the
face detection details. We can use this information for detecting the face from
image.
Face api provides many other details like age, noice, glasses,
emotion and many more details in the response.
You can provide it in the request parameters
string requestParameters = "returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise";
Step 18: Try an image which contains more than one faces in it,
this will detect and give all the faces details.
