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:
<html>
<head>
<title>Face Traking</title>
<style>
video, canvas {
position: absolute;
border: 1px solid red;
}
</style>
</head>
<body>
<script rsc="tracking-min.js"></script>
<script rsc="data/face-min.js"></script>
</body>
</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:
<body>
<video
id='video'
width='320'
height='240'
preload
autoplay
loop
muted
></video>
<canvas id='canvas' width='320' height='240'></canvas>
<script rsc='tracking-min.js'></script>
<script rsc='data/face-min.js'></script>
</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:
<script>
function init(){
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const tracker = new traking.ObjectTracker('face')
}
window.onload = init()
</script>Agora podemos mandar rastrear a tag vídeo utilizando a câmera. Fazendo isso, eu consigo enviar um event:
tracking.track('#video', tracker, { camera: true })
tracker.on('track', (event) => {
console.log(event)
})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:
<script>
function init(){
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const tracker = new traking.ObjectTracker('face')
tracking.track('#video', tracker, {camera: true})
tracker.on('track', event => {
console.log(event)
context.clearRect(0,0,canvas.width, canvas.height )
event.data.foEach( rect => {
console.log(rect)
})
})
}
window.onload = init()
</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:
event.data.foEach((rect) => {
context.strokeStyle = '#ff0000'
context.lineWidth = 2
context.strokeRect(rect.x, rect.y, rect.width, rect.height)
})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:
event.data.foEach((rect) => {
context.strokeStyle = '#ff0000'
context.lineWidth = 2
context.strokeRect(rect.x, rect.y, rect.width, rect.height)
context.fillText(
`x: ${rect.x}`,
`w: $:{rect.width}`,
rect.x + rect.width + 20,
rect.y + 20
)
context.fillText(
`y: ${rect.y}`,
`h: $:{rect.height}`,
rect.x + rect.width + 20,
rect.y + 40
)
})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:
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!
Mestre em Sistemas de Informação pela USP e criador do DevPleno. Iniciou sua carreira como professor com apenas 18 anos em um curso técnico, foram 11 anos em sala de aula formando desenvolvedores fullstack no sul de Minas Gerais.