Reconhecimento facial com JS

Escrito por

Hoje vamos fazer um hands-on em uma biblioteca que eu achei muito interessante chamada TrackingJS. Ela nos ajuda a trabalhar com visão computacional.

Visão computacional é uma forma que temos de processar imagens para extrair alguma coisa delas, nesse exemplo vamos fazer um tracking facial, reconhecer a face em uma imagem.

Um exemplo prático seria por exemplo, se a pessoa subir uma foto para o perfil dela, esse tracking facial poderia te ajudar a centralizar e realizar o crop da foto.

A primeira coisa que vamos fazer é acessar o site "trackingjs.com" e baixar um pacote com todos os arquivos. Vamos pegar a pasta build e deixar dentro do diretório em que vamos criar a aplicação. Além disso, vou rodar também o HTTP server na pasta que eu estou criando os arquivos.

Vamos criar um arquivo index.html. O trackingjs já vem com várias coisas que podemos reaproveitar,uma delas é reconhecer o vídeo da webcam. Para fazer isso, vamos importar da pasta build o traking-min.js e o data/face-min.js:

1<html>
2 <head>
3 <title>Face Traking</title>
4 <style>
5 video, canvas {
6 position: absolute;
7 border: 1px solid red;
8 }
9 </style>
10 </head>
11 <body>
12 <script rsc="tracking-min.js"></script>
13 <script rsc="data/face-min.js"></script>
14 </body>
15</html>

O reconhecimento de faces funciona basicamente por meio de um treinamento, onde fazemos em uma rede neural e precisamos desse arquivo de dados, que é o treinamento realizado.

Agora vamos criar dois itens, um deles é uma tag víde. Vamos definir uma largura e altura. O outro é um canvas para podermos desenhar em cima desse vídeo e mostrar onde está sendo reconhecido realmente o rosto:

1<body>
2 <video
3 id="video"
4 width="320"
5 height="240"
6 preload
7 autoplay
8 loop
9 muted
10 ></video>
11 <canvas id="canvas" width="320" height="240"></canvas>
12 <script rsc="tracking-min.js"></script>
13 <script rsc="data/face-min.js"></script>
14</body>

Agora vamos começar realmente a fazer esse tracking do rosto. Quando carregarmos a página, vamos chamar a função init que vai ter nosso vídeo, canvas um contexto para o canvas e um tracker, que é nosso rastreador em específico:

1<script>
2 function init(){
3 const video = document.getElementById('video')
4 const canvas = document.getElementById('canvas')
5 const context = canvas.getContext('2d')
6 const tracker = new traking.ObjectTracker('face')
7 }
8 window.onload = init()
9</script>

Agora podemos mandar rastrear a tag vídeo utilizando a câmera. Fazendo isso, eu consigo enviar um event:

1tracking.track("#video", tracker, { camera: true })
2tracker.on("track", event => {
3 console.log(event)
4})

Ao dar F5 no browser e acessar o F12, percebam que ele muda à medida que o rosto se mexe dentro do limite que escolhemos, com isso vamos desenhar em cima do canvas:

1<script>
2 function init(){
3 const video = document.getElementById('video')
4 const canvas = document.getElementById('canvas')
5 const context = canvas.getContext('2d')
6 const tracker = new traking.ObjectTracker('face')
7 tracking.track('#video', tracker, {camera: true})
8 tracker.on('track', event => {
9 console.log(event)
10 context.clearRect(0,0,canvas.width, canvas.height )
11 event.data.foEach( rect => {
12 console.log(rect)
13 })
14 })
15 }
16 window.onload = init()
17</script>

O retângulo já está lá reconhecendo a cabeça ao se mexer, porém ainda não conseguimos visualizar ele.

Então, para cada retângulo reconhecido, vamos desenhar ele na tela:

1event.data.foEach(rect => {
2 context.strokeStyle = "#ff0000"
3 context.lineWidth = 2
4 context.strokeRect(rect.x, rect.y, rect.width, rect.height)
5})

Com isso já conseguimos ver o reconhecimento do meu rosto. Em uma aplicação real, eu poderia, por exemplo, reconhecer o rosto, dar um freeze e cortar a imagem um pouco para cima e para os lados para ajudar no crop.

Além disso ainda podemos mostrar uma informação de onde está sendo reconhecido esse retângulo:

1event.data.foEach( rect => {
2 context.strokeStyle = '#ff0000'
3 context.lineWidth = 2
4 context.strokeRect(rect.x, rect.y, rect.width, rect.height)
5 context.fillText(`x: ${rect.x}`, `w: $:{rect.width}`, rect.x+rect.width+20, rect.y+20)
6 context.fillText(`y: ${rect.y}`, `h: $:{rect.height}`, rect.x+rect.width+20, rect.y+40)
7})

Assim temos a informação precisa de onde foi encontrado o nosso rosto. Poderíamos utilizar isso para fazer o crop.

Como colocamos isso em um vetor, é possível reconhecer mais de um rosto no vetor, a partir disso podemos fazer, por exemplo, um sistema de tag para marcar os amigos.

Veja o vídeo:

Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium