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:
- 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.
- 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:
*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> |
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; | |
| } |
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; | |
| }; |
E por fim, o reconhecimento é efetuado:
É 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”