Microsoft Cognitive Services – Face Detect com Xamarin.Forms

Olá, neste post irei falar um pouco sobre a API de Detecção Facial dos Serviços Cognitivos da Microsoft. E claro, não poderia deixar de demonstrar como implementar em aplicações Xamarin.Forms.

O serviço de Detecção facial, consiste em detectar rostos em uma foto e informações como idade, sexo, emoções e etc.
Para se aprofundar mais no assunto e conhecer outros serviços cognitivos da Microsoft acesse o link: https://azure.microsoft.com/pt-br/services/cognitive-services/face/ 

Para este exemplo irei assumir que você já criou uma aplicação Xamarin.Forms e utilizou o Nuget Package Xam.Plugin.Media para capturar uma foto da câmera. Se você possui dúvidas sobre isso, recomendo ler o post: Utilizando a Câmera – Xamarin.Forms, lá eu explico passo a passo como utilizar o plugin para tirar fotos em aplicações Xamarin.Forms.

 

Obtendo Chaves

É necessário obter uma URL e Chaves para utilizar a API de Detecção Facial, então o primeiro passo é acessar o link:  https://azure.microsoft.com/pt-br/try/cognitive-services/?api=face-api e clicar em “Obter Chave de API”.

1

Em seguida será necessário realizar login com uma conta Microsoft.
Para este exemplo estou utilizando minha conta e os serviços disponibilizados gratuitamente por 30 dias. (Após esse período essas chaves serão desativadas).

2

Agora que você já possui sua URL e as chaves para utilizar a API, recomendo que guarde essas informações.

 

ADICIONANDO NUGET PACKAGES

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

3

 

Digite “Microsoft.ProjectOxford.Face” e selecione o plugin como demonstrado na imagem a seguir.

4.2

 

Selecione apenas o projeto compartilhado e clique no botão “Install”.

4.2

Depois repita esses passos para instalar os seguintes pacotes:

  • Microsoft.ProjectOxford.Common.DotNetStandard
  • Newtonsoft.Json

 

C#

Crie uma variável do tipo IFaceServiceClient e um ObservableCollection de Face. Observe que ambos estão sendo inicializados no construtor. Substitua “URL” pela sua url e “Key” por uma de suas chaves obtidas no passo anterior “Obtendo Chaves”.

5

 

 

Crie um método chamado “TakePicture” como demonstrado no post Utilizando a Câmera – Xamarin.Forms, ele será responsável por tirar a foto.  Em seguida adicione uma chamada para o método Facedetect passando como parâmetro o endereço da foto tirada.

6

 

 

Crie o método Facedetect e instancie um IEnumerable de FaceAttributeType com os atributos que serão retornados pela API.

7

 

 

Realize a chamada para o DetectAsync passando como parâmetro um Stream e os atributos setados anteriormente.

8

 

Código Completo

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Threading.Tasks;
using Microsoft.ProjectOxford.Face;
using Microsoft.ProjectOxford.Face.Contract;
using Plugin.Media;
using Plugin.Media.Abstractions;
using Xamarin.Forms;
namespace DemoFaceDetect
{
public partial class MainPage : ContentPage
{
private readonly IFaceServiceClient _faceServiceClient;
ObservableCollection<Face> list = new ObservableCollection<Face>();
public MainPage()
{
InitializeComponent();
_faceServiceClient = new FaceServiceClient("KEY","URL");
list = new ObservableCollection<Face>();
FacesListView.ItemsSource = list;
}
private async void TakePicture(object sender, EventArgs e)
{
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsTakePhotoSupported || !CrossMedia.Current.IsCameraAvailable)
{
await DisplayAlert("Ops", "Nenhuma câmera detectada.", "OK");
return;
}
var file = await CrossMedia.Current.TakePhotoAsync(
new StoreCameraMediaOptions
{
SaveToAlbum = false,
Directory = "Demo"
});
if (file == null)
return;
await Facedetect(file.AlbumPath);
MinhaImagem.Source = ImageSource.FromStream(() =>
{
var stream = file.GetStream();
file.Dispose();
return stream;
});
}
public async Task Facedetect(string image)
{
IEnumerable<FaceAttributeType> faceAttributes =
new FaceAttributeType[]
{
FaceAttributeType.Gender,
FaceAttributeType.Age,
FaceAttributeType.Smile,
FaceAttributeType.Emotion,
FaceAttributeType.Glasses,
};
list.Clear();
// Call the Face API.
try
{
using (Stream imageFileStream = File.OpenRead(image))
{
var faces = await _faceServiceClient.DetectAsync(imageFileStream,
returnFaceId: true,
returnFaceLandmarks: false,
returnFaceAttributes: faceAttributes);
//Add Faces in List
foreach (var face in faces)
{
list.Add(face);
}
}
}
// Catch and display Face API errors.
catch (FaceAPIException f)
{
await DisplayAlert("Error", f.ErrorMessage, "ok");
}
// Catch and display all other errors.
catch (Exception e)
{
await DisplayAlert("Error", e.Message, "ok");
}
}
}
}
view raw MainPage.xaml.cs hosted with ❤ by GitHub

 

XAML

Crie uma Image para adicionar a foto tirada, um Button para chamar o método TakePicture quando clicado e uma lista para demonstrar todos os rostos encontrados na foto e seus atributos.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoFaceDetect.MainPage">
<ScrollView>
<StackLayout>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center">
<Image x:Name="MinhaImagem" Aspect="AspectFill" HeightRequest="200"
WidthRequest="400" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<Button Clicked="TakePicture" Text="Foto"></Button>
<Label Text="Faces: " FontAttributes="Bold" FontSize="20"
HorizontalOptions="CenterAndExpand"/>
<ListView x:Name="FacesListView"
IsPullToRefreshEnabled="true"
CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout Orientation="Horizontal" >
<Label Text="Sexo:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Gender}"></Label>
<Label Text="Idade:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Age}"></Label>
<Label Text="Óculos:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Glasses}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" >
<Label Text="Raiva:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Emotion.Anger}"></Label>
<Label Text="Felicidade:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Emotion.Happiness}"></Label>
<Label Text="Desprezo:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Emotion.Contempt}"></Label>
<Label Text="Surpreso:" FontAttributes="Bold"></Label>
<Label Text="{Binding FaceAttributes.Emotion.Surprise}"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>
view raw MainPage.xaml hosted with ❤ by GitHub

 

Resultado

ezgif.com-gif-maker (6)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub


Leia mais sobre esse assunto na documentação oficial da Microsoft.

Um comentário em “Microsoft Cognitive Services – Face Detect com Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s