Détecter un ou plusieurs visages dans une image/vidéo est désormais possible pour les développeurs web via des API qui permettent de dessiner des rectangles à l’endroit où les visages se trouvent, ainsi que les détails de visage comme arriver à identifier les yeux, la bouche à partir d’une vidéo ou une image. La librairie tracking.js présente une solution légère (~7 KB) basée sur des spécifications HTML5 modernes et combinant des algorithmes robustes de computer vision afin de rendre possible un tracking en temps réel des visages, couleurs, objets et autres.
Les prérequis pour comprendre Tracking js
Dans cet article, je vous fournis un tutoriel qui va vous permettre d’utiliser cette librairie. Cependant, avant de commencer :
- Téléchargez le projet qui inclut les exemples tracking.js complets avec les dépendances nécessaires afin d’exécuter et évoluer vos projets.
Voici la liste des exemples qui couvrent toutes les fonctionnalités de trackingJS :
Afin d’exploiter les exemples, il faut dézipper le code vers un serveur http de façon à pouvoir tester ensuite en accédant à l’url dans le navigateur. Exemple : https://localhost:8000/tracking.js/
Etape 1 : Créer votre premier exemple
Créer une page web first_tracking.html sous le répertoire examples/ dans les fichiers que vous avez dézippé.
Voici le code de first_tracking.html :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tracking.js - first tracking</title> <script src="../build/tracking-min.js"></script> </head> <body> <script> // Start tracking here... </script> </body> </html>
Etape 2 : Choisir ce que vous allez tracker
Tracking.js offre l’identification du visage (avec précision yeux, bouche), une couleur, tagger une personne, ou personnaliser votre propre tracker.
Dans votre page first_tracking.html on va ajouter un code permettant d’identifier les couleurs dans une image ou dans une vidéo. Sous le répertoire examples/ vous pouvez copier et coller le code du fichier correspondant si vous voulez tester une autre fonctionnalité.
Voici fichier first_tracking.html après ajout du code qui va permettre l’identification des couleurs :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - first tracking</title>
<script src="../build/tracking-min.js"></script>
</head>
<body>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
<script>
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track('#myVideo', colors);
</script>
</body>
</html>
Cet exemple va demander la permission d’utiliser votre caméra puis va identifier les couleurs magenta, bleu cyan et jaune s’ils apparaissent devant la caméra.
Les coordonnées de l’objet ayant ces couleurs vont s’afficher devant vous si vous présentez un objet de cette couleur devant la caméra.
Etape 3 : Détection faciale par Tracking js
Afin d’ajouter la fonctionnalité de détection faciale, il faut importer d’autres librairies (approximativement 60 KB).
Insérer ce code va permettre cet import :
<script src="tracking.js/build/data/face.js"></script>
<script src="tracking.js/build/data/eye.js"></script>
<script src="tracking.js/build/data/mouth.js"></script>
suite à cet import, on peut définir le tracker qui va permettre d’identifier le visage, les yeux et la bouche.
var objects = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
Une fois l’objet définit, on va définir l’action qui va permettre d’écouter l’événement « track »
objects.on('track', function(event) {
if (event.data.length === 0) {
// No objects were detected in this frame.
} else {
event.data.forEach(function(rect) {
// rect.x, rect.y, rect.height, rect.width
});
}
});
Et enfin on va lancer l’événement après l’avoir configuré :
tracking.track('#myVideo', objects);
Voici le code complet de la détection faciale :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - face hello world</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="../build/tracking-min.js"></script>
<script src="../build/data/face-min.js"></script>
<script src="../build/data/eye-min.js"></script>
<script src="../build/data/mouth-min.js"></script>
<style>
.rect {
border: 2px solid #a64ceb;
left: -1000px;
position: absolute;
top: -1000px;
}
#img {
position: absolute;
top: 50%;
left: 50%;
margin: -173px 0 0 -300px;
}
</style>
</head>
<body>
<div class="demo-title">
<p><a href="https://trackingjs.com" target="_parent">tracking.js</a> － detect faces, eyes and mouths in a image</p>
</div>
<div class="demo-frame">
<div class="demo-container">
<img id="img" src="assets/faces.jpg" />
</div>
</div>
<script>
window.onload = function() {
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
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>
</body>
</html>
Retrouvez le code sur GIST : https://gist.github.com/SquirrelMobile/da2ec649f80dbffcb3ab17602601532d
Voici une démo de l’exemple
Si un élément vous perturbe et vous bloque, n’hésitez pas à prendre contact avec nous !