Reconhecimento Facial com Face API & Node.js
Tags: node, tutorial, javascript, azure
Published: 2019-10-17 18:35:31

---
title: Reconhecimento Facial com Face API & Node.js
published: true
description: Nesse artigo você aprenderá a como realizar reconhecimento facial usando o Face API & Node.js
tags: nodejs, tutorial, javascript, azure
series: Aprenda Serviços Cognitivos & I.A com Node.js
---

# Reconhecimento Facial com Face API & Node.js

[![Screen-Shot-10-14-19-at-02-02-PM.png](https://i.postimg.cc/d3QLCwvj/Screen-Shot-10-14-19-at-02-02-PM.png)](https://postimg.cc/BLyS9Wjj)

Dando continuidade a nossa série **Aprenda Serviços Cognitivos & I.A com Node.js** e no **[último artigo](https://dev.to/azure/realizando-traducoes-em-tempo-real-com-translator-text-node-js-1oeb)** aprendemos a realizar traduções simultâneas com o **[Translator Text](http://bit.ly/2OlOjo4)** e vimos o quão poderoso é fazer uso dos **[Serviços Cognitivos](http://bit.ly/30MCcTN)** para deixar as nossas aplicações mais inteligentes, dinâmicas e interativas! 

Hoje, vamos falar um pouco sobre o **[Face Api](http://bit.ly/2VGVetL)**. Porém, vamos entender um pouco o que seria o Face API!

## O que é Face API?

[![face-api-cs.jpg](https://i.postimg.cc/50PDbW4R/face-api-cs.jpg)](https://postimg.cc/phFsJ7nf)

O **[Face API](http://bit.ly/2VGVetL)** é um **[Serviço Cognitivo](http://bit.ly/30MCcTN)** do Azure que permite detectar, reconhecer e analisar rostos humanos em imagens. Como ele faz isso? Por meio de algoritmos! E o Face API possui várias funções diferentes! Entre elas:

* ➡️ **[Reconhecimento Facial](http://bit.ly/35BNNZe)**: que permite reconhecer rostos humanos numa imagem. E extrae uma série de informações como: gênero, idade, emoção entre outros pontos.

* ➡️ **[Verificação Facial](http://bit.ly/35zAUza)**: aqui a API irá avaliar se dois rostos pertencem à mesma pessoa.

* ➡️ **[Encontrar Rostos Semelhantes](http://bit.ly/2VIsQrl)**: diferente da **Verificação Facial**, aqui a API irá procurar se há rostos semelhantes numa imagem e identificar para nós, por meio do `matchPerson`, que realiza uma filtragem da API **[Face - Verify](http://bit.ly/2MdKgsD)** e daí retorna uma lista de rostos que sejam parecidos e se pertencem a mesma pessoa.

* ➡️ **[Agrupamento Facial](http://bit.ly/2Bd8Weu)**: como o próprio nome diz, aqui podemos ter um conjunto de rostos desconhecidos em vários grupos. Aqui se faz uso da API **[Face - Group](http://bit.ly/35vHqXH)**

* ➡️ **[Identificação Pessoal](http://bit.ly/2J5yrmv)**: aqui o uso da API é bem legal. Pois podemos identificar um rosto detectado e comparar com uma base de dados de pessoas.. Esse recurso é legal pois podemos fazer uso de gerenciamento de fotos. Se desejarem saberem mais a respeito dessa API, bastam acessar a documentação de referência na **[Face - Identify](http://bit.ly/2MetM3g)**

Para mais informações a respeito do Face API, pode ter um overview com maiores detalhes **[AQUI](http://bit.ly/35A2RXp)**.

## Criando a aplicação! 

Sim, esse aquele momento em que vamos começar a codar e criar a aplicação em Node.js usando o Face API. Para isso, utilizaremos:

* **[Node.js](https://nodejs.org/en/)**
* **[Visual Studio Code](http://bit.ly/2AEfJ0q)**
* **[Conta Gratuita - Azure](http://bit.ly/35bF1RR)**

E caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no **[Azure for Students](https://azure.microsoft.com/pt-br/free/students/?WT.mc_id=devto-blog-gllemos)**. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: **[AQUI](https://azure.microsoft.com/pt-br/free/students/?WT.mc_id=devto-blog-gllemos)**

Todo o código desenvolvido desse artigo encontra-se disponível **[AQUI](https://github.com/glaucia86/faceapi-node.js-demo)**. Depois de instalar e criar uma conta Azure aí sim poderemos prosseguir com o nosso tutorial.

## Criando Recurso do Face API no Azure

Assim, como no **[artigo anterior](https://dev.to/azure/realizando-traducoes-em-tempo-real-com-translator-text-node-js-1oeb)**, precisamos criar um **[Recurso do Face API](http://bit.ly/2ON1kaE)** no **[Portal Azure](https://azure.microsoft.com/?WT.mc_id=devto-blog-gllemos)**. Após isso, aí sim, poderemos começar a codar a nossa aplicação. Caso não saibam, bastam seguir o passo a passo no gif abaixo:

[![01---face-api-nodejs.gif](https://s3.gifyu.com/images/01---face-api-nodejs.gif)](https://gifyu.com/image/k4Ei)

Observem na imagem abaixo que, após criarmos o nosso Recurso dentro do Portal Azure, que geram uma `key` e `endpoint`. Guardem essa `key`, pois precisaremos dela para o próximo passo.

[![Screen-Shot-10-14-19-at-04-16-PM.png](https://i.postimg.cc/rF29nFLF/Screen-Shot-10-14-19-at-04-16-PM.png)](https://postimg.cc/vDX9DyBp)

## Desenvolvendo o código

Agora que já temos a nossa `key`, vamos agora criar a aplicação em Node.js para fazer uso do Face API. Para isso, abre o seu **[Visual Studio Code](http://bit.ly/2AEfJ0q)** e dentro da pasta que você criou para o seu projeto, digite o seguinte comando, para criar um arquivo padrão do `package.json` no nosso projeto: 

```bash
> npm init -y
```



Com esse comando ele criará um arquivo padrão do `package.json`. Porém, abre o Visual Studio Code e altere o arquivo conforme o código abaixo:

* **arquivo: package.json**

```json

{
  "name": "faceapi-node.js-demo",
  "version": "1.0.0",
  "description": "Demo para realizar reconhecimento de imagem via Face API & Node.js",
  "main": "face-detection.js",
  "scripts": {
    "dev": "node src/face-detection.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/faceapi-node.js-demo.git"
  },
  "keywords": [
    "nodejs",
    "cognitive-services",
    "azure",
    "face-api",
    "javascript"

  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/faceapi-node.js-demo/issues"
  },
  "homepage": "https://github.com/glaucia86/faceapi-node.js-demo#readme"
}

```

Perfeito! Agora, crie a estrutura do projeto conforme a imagem abaixo:`src -> face-detection.js`

[![Screen-Shot-10-16-19-at-01-49-PM.png](https://i.postimg.cc/GmvPkR6B/Screen-Shot-10-16-19-at-01-49-PM.png)](https://postimg.cc/CRLfg3hY)

E no arquivo `.gitignore`, inclua o seguinte bloco de código

* **arquivo: .gitignore**

```js
node_modules
lib
.env
```

Show! Vamos agora instalar as dependências no nosso projeto. Precisaremos de 2:

* **[request](https://www.npmjs.com/package/request)**: esse pacote nos ajudará a realizar requisições no Face API de maneira muito fácil via código.

* **[dotenv](https://www.npmjs.com/package/dotenv)**: esse pacote será de grande ajuda, pois como estaremos incluindo chaves dos serviços Azure na aplicação e para que não fiquem expostas, esse pacote nos ajudará a criar variáveis de ambiente sem precisar 'setar' localmente na nossa máquina.

Para isso, vamos instalar esse dois pacotes com o seguinte comando via prompt:

```bash

> npm i request dotenv

```

No final, o nosso arquivo `package.json` ficará da seguinte maneira:

```json
{
  "name": "faceapi-node.js-demo",
  "version": "1.0.0",
  "description": "Demo para realizar reconhecimento de imagem via Face API & Node.js",
  "main": "face-detection.js",
  "scripts": {
    "dev": "node src/face-detection.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/faceapi-node.js-demo.git"
  },
  "keywords": [
    "nodejs",
    "cognitive-services",
    "azure",
    "face-api",
    "javascript"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/faceapi-node.js-demo/issues"
  },
  "homepage": "https://github.com/glaucia86/faceapi-node.js-demo#readme",
  "dependencies": {
    "dotenv": "^8.2.0",
    "request": "^2.88.0"
  }
}

```

Agora, vamos criar a lógica para realizar o reconhecimento de imagem via Face API & Node.js.

## Criando a lógica no arquivo 'face-detection.js'

Abram o arquivo `face-detection.js` e incluam o seguinte bloco de código abaixo:

* **arquivo: face-detection.js**

```js

/**
 * arquivo: src/facedetection.js
 * Data: 16/10/019
 * Descrição: Arquivo responsável por realizar o reconhecimento facial usando o Face API & Node.js
 * Author: Glaucia Lemos
 */

'use strict';

const request = require('request');

require('dotenv').config();

const subscriptionKey = process.env.SUBSCRIPTION_FACE_API_KEY;
const uriBase = process.env.URI_BASE;
const imageUrl = 'https://cdn-ofuxico.akamaized.net/img/upload/noticias/2019/05/13/silvio_santos_reproducao_instagram_349201_36.jpg';

```

Aqui estamos fazendo o chamada de 2 pacotes: `request` e o `dotenv`. E logo abaixo, criando 3 variáveis para processar as informações geradas para nós no Portal Azure: `key`, `endpoint` e uma url de uma imagem que estaremos pegando na internet! 

Notem que nas variáveis `subscriptionKey` e `uriBase`, estamos criando uma espécie variáveis secretas? É justamente aí que usaremos o pacote `dotenv`. Para isso, crie um arquivo chamado `.env`, fora da pasta `src` e vejam como ela deve ficar:

[![Screen-Shot-10-16-19-at-02-18-PM.png](https://i.postimg.cc/zXjBgXk2/Screen-Shot-10-16-19-at-02-18-PM.png)](https://postimg.cc/YhvMc7ZQ)

É justamente nesse arquivo que ficará guardado as informações mais sensíveis, tipo: keys, endpoints e tudo mais! Notem que, se vocês abrirem o arquivo `.gitignore` esse arquivo não será enviado para o GitHub. Justamente, para evitar de ser usado por outras pessoas!
 
Dando continuidade no nosso desenvolvimento, vamos agora concluir esse arquivo! Inclua o seguinte bloco de código no arquivo:

* **arquivo: face-detection.js**

```js
const params = {
  'returnFaceId': 'true',
  'returnFaceLandmarks': 'false',
  'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' +
  'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
};

const options = {
  uri: uriBase,
  qs: params,
  body: '{"url": ' + '"' + imageUrl + '"}',
  headers: {
    'Content-Type': 'application/json',
    'Ocp-Apim-Subscription-Key' : subscriptionKey
  }
};

request.post(options, (error, response, body) => {
  if (error) {
    console.log('Error ao identificar a imagem: ', error);
    return;
  }

  let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
  console.log('JSON Response\n');
  console.log(jsonResponse);
});

```

No bloco de código acima, estamos declarando algumas variáveis para justamente tratar de fazer a chamada da nossa api para que possa realizar a identificação da imagem concedida via URL. Note que, na variável `params`, temos inúmeros parâmetros que nos retornarão em forma de json. Esses parâmetros são padrão do Face API, que podem ser analisados **[AQUI](http://bit.ly/2BerGdE)**

[![Screen-Shot-10-16-19-at-03-22-PM.png](https://i.postimg.cc/Z5FjyQ7x/Screen-Shot-10-16-19-at-03-22-PM.png)](https://postimg.cc/68qCkMN8)

E por último ele, retornará um Json com todas as informações solicitadas na variável `params`.

Vamos testar a aplicação agora?! Vejam no gif abaixo como testar:

[![02---face-api-nodejs.gif](https://s3.gifyu.com/images/02---face-api-nodejs.gif)](https://gifyu.com/image/k8tY)

Observem que a api retornou que na imagem é um homem, de cor marrom, não está usando óculos e até a dedução da idade foi dada.

Vejam o retorno abaixo para a imagem do `Silvio Santos`:

* **JSON Response**

```json

[
  {
    "faceId": "8b121a4e-407a-4b91-9b90-4ba2592a6329",
    "faceRectangle": {
      "top": 82,
      "left": 237,
      "width": 163,
      "height": 163
    },
    "faceAttributes": {
      "smile": 1,
      "headPose": {
        "pitch": -6.3,
        "roll": 4.4,
        "yaw": -7.5
      },
      "gender": "male",
      "age": 50,
      "facialHair": {
        "moustache": 0.1,
        "beard": 0.1,
        "sideburns": 0.1
      },
      "glasses": "NoGlasses",
      "emotion": {
        "anger": 0,
        "contempt": 0,
        "disgust": 0,
        "fear": 0,
        "happiness": 1,
        "neutral": 0,
        "sadness": 0,
        "surprise": 0
      },
      "blur": {
        "blurLevel": "medium",
        "value": 0.42
      },
      "exposure": {
        "exposureLevel": "goodExposure",
        "value": 0.72
      },
      "noise": {
        "noiseLevel": "medium",
        "value": 0.46
      },
      "makeup": {
        "eyeMakeup": false,
        "lipMakeup": false
      },
      "accessories": [],
      "occlusion": {
        "foreheadOccluded": false,
        "eyeOccluded": false,
        "mouthOccluded": false
      },
      "hair": {
        "bald": 0.17,
        "invisible": false,
        "hairColor": [
          {
            "color": "brown",
            "confidence": 1
          },
          {
            "color": "black",
            "confidence": 0.85
          },
          {
            "color": "gray",
            "confidence": 0.48
          },
          {
            "color": "blond",
            "confidence": 0.1
          },
          {
            "color": "red",
            "confidence": 0.09
          },
          {
            "color": "other",
            "confidence": 0.05
          }
        ]
      }
    }
  }
]
```



Legal não é mesmo?! Mas, e se eu quiser ver a imagem e o retorno no browser?! Não tem problema! Criei uma outra aplicação, fazendo uso do: `demo-2`

* **Node.js**
* **Pug**
* **Express**
* **Bootstrap**
* **JQuery**

Vejam em ação aqui no gif abaixo:

[![03---face-api-nodejs.gif](https://s3.gifyu.com/images/03---face-api-nodejs.gif)](https://gifyu.com/image/k8DL)

Todo o código desenvolvido encontra-se **[AQUI](https://github.com/glaucia86/faceapi-node.js-demo)**. E lá no repositório explico como devem executar as aplicações! ;)


## Palavras Finais

Podemos fazer muitas coisas legais usando o Face API com Node.js & JavaScript. Pois como se trata de uma API aberta, podemos usar de diferentes maneiras!

Lembrando que o Face API você pode usar ele em outras linguagens, tais como:

* **[C#](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/csharp?WT.mc_id=devto-blog-gllemos)**
* **[cURL](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/curl?WT.mc_id=devto-blog-gllemos)**
* **[Golang](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/go?WT.mc_id=devto-blog-gllemos)**
* **[Java](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/java?WT.mc_id=devto-blog-gllemos)**
* **[PHP](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/php?WT.mc_id=devto-blog-gllemos)**
* **[Python](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/python?WT.mc_id=devto-blog-gllemos)**
* **[Ruby](https://docs.microsoft.com/azure/cognitive-services/face/quickstarts/ruby?WT.mc_id=devto-blog-gllemos)**

Abaixo listo alguns recursos e links importantes que pode ser de ajuda para criar mais aplicações usando o Face API:

- ✅ **[Material e Recursos sobre: Face API](https://docs.microsoft.com/azure/cognitive-services/face/?WT.mc_id=devto-blog-gllemos)**

- ✅ **[Azure para devs JavaScript & Node.js](https://docs.microsoft.com/pt-br/javascript/azure/?WT.mc_id=devto-blog-gllemos&view=azure-node-latest)**

- ✅ **[Cursos Grátis - Cognitive Speech Services](https://docs.microsoft.com/learn/paths/translate-speech-with-speech-services/?WT.mc_id=devto-blog-gllemos)**

- ✅ **[Cursos Grátis - Cognitive Services](https://docs.microsoft.com/learn/browse/?term=cognitive&WT.mc_id=devto-blog-gllemos)**

- ✅ **[Curso Grátis - Engenheiro de I.A](https://docs.microsoft.com/learn/browse/?roles=ai-engineer&WT.mc_id=devto-blog-gllemos)**

- ✅ **[E-book Grátis: Crie seu primeiro bot inteligente com a I.A da Microsoft](https://azure.microsoft.com/es-es/resources/create-your-first-intelligent-bot-with-microsoft-ai-pt-br/?WT.mc_id=devto-blog-gllemos)**

- ✅ **[Teste Grátis - Cognitive Services](https://azure.microsoft.com/es-es/services/cognitive-services/?WT.mc_id=faceapinodejs-github-gllemos)**

- ✅ **[Teste Grátis A.I](https://azure.microsoft.com/free/ai/?WT.mc_id=devto-blog-gllemos)**

- ✅ **[A.I School](https://aischool.microsoft.com/home?WT.mc_id=devto-blog-gllemos)**


Estarei num futuro próximo redescrevendo esse tutorial para Vue.js! E realizando live streaming como desenvolver essa aplicação com Face API e Node.js. Assim que, aguardem!

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Nos vemos! Até a próxima série pessoal! 😍