Reconhecimento facial com Azure Cognitive Services, Angular e Node.js – Parte 2

E aí galera! Tudo certo?

Hoje vamos continuar aquela nossa aplicação para realizar reconhecimento facial e identificação de pessoas utilizando os serviços cognitivos do Azure. Como é um serviço exposto via HTTP, podemos fazer a aplicação com a linguagem que quisermos; nesse exemplo vamos utilizar Node.js e Angular. Bora lá!

O post vai ser dividido em duas partes:

  • Parte 1 (aqui): vamos ver um pouco de como funciona o Azure Cognitive Services, como ele reconhece faces, como utilizar e criar esse serviço no portal do Azure e por fim vamos cadastrar faces em um “banco de faces” para serem reconhecidas posteriormente.
  • Parte 2 (esse post): vamos enviar uma face para o serviço de reconhecimento e ver a mágica acontecer.

O que vimos no post anterior?

Na primeira parte desse post, nós aprendemos:

  • O que são os serviços cognitivos do Azure;
  • Como funciona o reconhecimento facial;
  • Como criar um serviço de reconhecimento facial no Azure;
  • Como criar listas, enviar imagens e treinar nossa API.

O que veremos hoje?

Como identificar uma face! 😀

Mãos na massa!

Depois de já termos uma “base” de imagens com os nossos supostos clientes, e da nossa API estar treinada e pronta para reconhecer imagens, para fazer o reconhecimento basta fazermos o seguinte:

  1. Enviar a nossa imagem para um endpoint chamado “detect”, esse endpoint é responsável por identificar faces em imagens; além disso ele também consegue nos trazer alguns atributos sobre as faces encontradas, como por exemplo: gênero, cor, se a pessoa usa maquiagem, óculos ou outro adereço, emoções e afins. Essa imagem que nós vamos enviar pra lá irá receber um identificador e ficará disponível por 24 horas.
  2. Enviar o identificador da face para um endpoint chamado “findsimilars” que será o responsável por nos trazer imagens semelhantes a imagem que nós enviamos.

O resultado final é esse:

reconhecimento

*Me desculpem pela cara de pastel, acabei de sair de uma cirurgia rsrs.

Vejam primeiramente, como ficou a parte do front-end:

<div class="ui-s600">
<form #formReconhecimento="ngForm" class="ui-validate on-dirty on-submit" (submit)="onSubmit(formReconhecimento)">
<ui-card class="elevate-on-toolbar" [class.loading]="loading">
<div class="ui-progress accent" [class.hide]="!loading">
<div class="indeterminate"></div>
</div>
<ui-toolbar class="flat">
<span class="title">Reconhecimento de clientes</span>
</ui-toolbar>
<fieldset [disabled]="saving || loading">
<ui-card-content>
<div class="ui-flex-container">
<video class="ui-flex-container" id="video-user" [src]="videoSrc" autoplay></video>
</div>
</ui-card-content>
<div [hidden]="true">
<canvas class="ui-flex-container" id="canvas" [width]="videoWidth" [height]="videoHeight">
Seu navegador não suporta Canvas 😦
</canvas>
</div>
</fieldset>
</ui-card>
<div class="ui-fab-container">
<button class="ui-button success fab" uiRipple [class.hide]="loading">
<ui-progress-radial class="indeterminate" *ngIf="saving"></ui-progress-radial>
<i class="material-icons">check</i>
</button>
</div>
</form>
</div>

view raw
reconhecimento.html
hosted with ❤ by GitHub

Para reconhecer a câmera, foi utilizado o seguinte trecho de código:

iniciarCamera() {
let nav = <any>navigator;
nav.getUserMedia = nav.getUserMedia || nav.mozGetUserMedia || nav.webkitGetUserMedia;
if (!nav.getUserMedia) {
UiSnackbar.show({
text: 'Seu navegador não tem suporte para Webcam'
});
return;
}
let options = {
video: true,
audio: false
};
nav.getUserMedia(options, (stream) => {
let webcamUrl = URL.createObjectURL(stream);
this.videoSrc = this.sanitizer.bypassSecurityTrustUrl(webcamUrl);
let video = this.element.nativeElement.querySelector('#video-user');
video.autoplay = true;
let reconhecimento = this;
let getVideoSize = function() {
reconhecimento.videoWidth = video.videoWidth;
reconhecimento.videoHeight = video.videoHeight;
video.removeEventListener('playing', getVideoSize, false);
};
video.addEventListener('playing', getVideoSize, false);
}, (err) => {
UiSnackbar.show({
text: 'Ocorreu um erro ao iniciar a Webcam'
});
});
}

E o submit do formulário:

onSubmit(form) {
if (!this.saving) {
this.saving = true;
let video = this.element.nativeElement.querySelector('#video-user');
let canvas = this.element.nativeElement.querySelector('#canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
this.imagem = canvas.toDataURL("image/jpeg");
this.reconhecimentoService.reconhecer(this.imagem).subscribe(data => {
this.saving = false;
this.router.navigate(['/reconhecimento', data['content'].idVisita], { replaceUrl: true });
}, e => {
this.saving = false;
UiSnackbar.show({
text: 'Ocorreu um erro interno, tente novamente mais tarde.'
});
});
}
}

A parte da API, que é a mais importante, se comporta dessa maneira:

Faz o upload da imagem, utilizando o endpoint “detect” que foi explicado acima:

async function uploadFaceParaDeteccao(imageName) {
let config = {
method: 'POST',
uri: `${faceApi}/detect?returnFaceId=true&returnFaceLandmarks=false`,
headers: {
'Ocp-Apim-Subscription-Key': faceApiKey
},
json: true,
body: {
url: `${blobReconhecimentoUrl}/${imageName}`
}
};
let response = await request(config);
return response;
}

view raw
detect.js
hosted with ❤ by GitHub

Dentro do objeto response, temos uma lista de faces que foram identificadas na imagem, para cada face identificada, nós faremos a busca por faces similares utilizando o endponit “findsimilar“:

async function verificarFace(faceId) {
let config = {
method: 'POST',
uri: `${faceApi}/findsimilars`,
headers: {
'Ocp-Apim-Subscription-Key': faceApiKey
},
json: true,
body: {
faceId: faceId,
largeFaceListId: largeFaceListName,
maxNumOfCandidatesReturned: 2,
mode: "matchPerson"
}
};
let response = await request(config);
return response;
};

view raw
find-similar.js
hosted with ❤ by GitHub

E por fim, o reconhecimento é efetuado:

Finish

 

É isso pessoal! Finalizamos o nosso reconhecimento de clientes 😀

Se tiverem qualquer dúvida sobre essa parte, se algo ficou muito vago ou confuso, me enviem feedbacks que irei dar um jeito 😉

Os códigos utilizados estão disponíveis no GitHub:

Por hoje é só isso, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀

One thought on “Reconhecimento facial com Azure Cognitive Services, Angular e Node.js – Parte 2

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s