Detecção de rosto em fotos com JavaScript

Tracking.js é uma biblioteca que usa diversos algoritmos e técnicas de computação com JavaScript, sendo capaz de detectar cores, faces e até outros objetos, usando técnicas como Viola-Jones.

Esta biblioteca pode ser usada para marcação de amigos em fotos como no Facebook ou para contagem de veículos que transitam por uma via. Aqui faremos um exemplo de detecção de rostos em imagens.

Instalando

Para começar crie uma pasta onde estará nosso exemplo, abra o prompt de comando ou bash e navegue até essa pasta usando o comando cd.

cd c:/caminho/da/pasta

Depois use o NPM para instalar o pacote.

npm install tracking

Você precisa ter o Node.js instalado para que isso funcione.

Imagem

Baixe da internet uma imagem qualquer que contenha rostos de pessoas bem expostos e salve na pasta assets com o nome img1.jpg.

Pode baixar esta se preferir:

Happy friends

Usando

Depois disso crie um arquivo HTML com o nome index.html, que deverá ficar dessa forma:

<!DOCTYPE html>
<html>
<head>
	<title>Usando tracking.js</title>
	<script src="node_modules/tracking/build/tracking-min.js"></script>
	<script src="node_modules/tracking/build/data/face-min.js"></script>
</head>
<body>
	<div class="demo-container">
		<img id="img" src="assets/img1.jpg" />
	</div>
</body>
<style type="text/css">
	.rect {
		border: 2px solid green;
		left: -1000px;
		position: absolute;
		top: -1000px;
	}
</style>
<script>
	window.onload = function() {
		var img = document.getElementById('img');
		var tracker = new tracking.ObjectTracker(['face']);
		tracker.setStepSize(1.7);
		tracking.track('#img', tracker);
		tracker.on('track', function(event) {
			event.data.forEach(function(rect) {
				window.plot(rect.x, rect.y, rect.width, rect.height);
			});
		});
		window.plot = function(x, y, w, h) {
			var rect = document.createElement('div');
			document.querySelector('.demo-container').appendChild(rect);
			rect.classList.add('rect');
			rect.style.width = w + 'px';
			rect.style.height = h + 'px';
			rect.style.left = (img.offsetLeft + x) + 'px';
			rect.style.top = (img.offsetTop + y) + 'px';
		};
	};
</script>
</html>

Linha 5: importamos o arquivo JavaScript do tracking.js

Linha 6: importamos o arquivo JavaScript que contém a definição do classificador do objeto procurado, que é definido pelo padrão haarcascade de forma minimizada. Se você tem interesse em identificação de objetos em fotos e vídeos é interessante que estude também este padrão.

Linha 24: Criamos o tracker, ou o marcador, e informamos que queremos marcar a face no array passado por parâmetro. Se você deseja marcar mais objetos, você deve importar os arquivos que contém suas referências como fizemos na linha 6.

Linha 26: Informamos em qual elemento DOM os objetos serão procurados.

Linhas 27 a 31: Ao ser identificado um objeto é chamado um evento track, e nele chamaremos a função plot que irá desenhar as retas na tela.

Linhas 32 a 41: A função plot desenha os retângulos que marcam os objetos identificados.

Resultado

Você terá o seguinte resultado:

Sem título-2.fw

Note que a face da ultima mulher não foi marcada, os motivos podem ser muitos, um deles é a inclinação do rosto dela na diagonal. Mas conhecendo o padrão haarcascade e o conceito Viola-Jones você pode tratar isso facilmente.

[button color=”blue” size=”normal” alignment=”none” rel=”follow” openin=”newwindow” url=”https://github.com/ClubeDosGeeksCoding/tracking.js-sample”]Código Fonte[/button]


Próximos passos

No próximo post faremos um exemplo de detecção de faces usando a webcam. Enquanto isso curta nossa Página no Facebook.

 

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *