Veuillez vous connecter à votre compte.
Tu pensais avoir fait le tour de ce que JavaScript pouvait faire ? Tu as manipulé le DOM, fait des appels API, peut-être même joué avec une ou deux animations. Mignon. Aujourd'hui, on va laisser tout ça loin derrière nous. On va s'attaquer à un domaine qui, il y a peu, était réservé aux laboratoires de recherche et aux serveurs surpuissants : la vision par ordinateur en temps réel.
Notre mission, si tu l'acceptes : construire une application web capable de détecter des visages humains via une webcam, en direct. Et le plus fou dans tout ça ? Tout, absolument tout, se passera dans ton navigateur. Pas un seul octet de ta vidéo ne sera envoyé sur un serveur. On va utiliser la puissance brute de TensorFlow.js, la bibliothèque d'intelligence artificielle de Google pour le web, et un de ses modèles les plus optimisés, BlazeFace. Prépare-toi, on ne va pas juste copier-coller du code, on va le disséquer, comprendre chaque ligne et assembler une véritable application d'IA, brique par brique.
Avant le code : Comprendre la magie et la logique
Avant de se jeter dans l'éditeur de code, il est crucial de comprendre les concepts et la logique qui sous-tendent notre projet. Tenter de construire ça sans un plan, c'est comme naviguer sans carte : on finit vite par se noyer.
C'est quoi, TensorFlow.js et BlazeFace ?
Imagine que tu puisses faire tourner des modèles d'intelligence artificielle complexes, normalement réservés à des langages comme Python, directement en JavaScript. C'est ça, TensorFlow.js (TFJS). C'est une bibliothèque qui ouvre les portes du Machine Learning aux développeurs web. Elle peut utiliser le GPU de ton ordinateur pour des calculs ultra-rapides, ce qui est essentiel pour le traitement vidéo en temps réel.
BlazeFace, quant à lui, est un modèle spécifique, pré-entraîné par Google, spécialisé dans une seule chose : trouver des visages. Mais il le fait incroyablement bien et vite. Il est si léger qu'il peut tourner sans problème sur un smartphone. C'est le "cerveau" que nous allons charger et interroger.
Notre plan de bataille en 5 étapes
Toute application complexe se résume à une séquence logique d'étapes. Voici la nôtre :
- Mettre en place la scène : On va créer une structure HTML simple mais efficace pour accueillir notre vidéo et nos dessins. Un peu de CSS rendra le tout présentable.
- Allumer les caméras : On demandera à l'utilisateur l'autorisation d'accéder à sa webcam et on affichera le flux vidéo sur la page. C'est notre source de données.
- Charger le cerveau : Une fois la vidéo active, on chargera le modèle BlazeFace en mémoire. C'est une étape asynchrone qui peut prendre un instant.
- Créer la boucle de détection : C'est le cœur de notre application. On mettra en place une boucle infinie qui, à chaque "tick", enverra une image de la vidéo au modèle BlazeFace.
- Afficher les résultats : Le modèle nous renverra les coordonnées des visages détectés. Notre dernière tâche sera de dessiner une forme (un ovale en pointillés) autour de chaque visage sur un canevas superposé à la vidéo.
Étape par Étape
Maintenant que la théorie est claire, passons à la pratique. Chaque morceau de code sera présenté et expliqué.
1. La Structure HTML
On commence par le squelette. Un fichier HTML qui définit les éléments dont nous aurons besoin. Il est minimaliste : un titre, un conteneur pour la vidéo et le canevas, et une carte pour afficher le statut actuel de l'application. On n'oublie pas d'inclure les scripts de TensorFlow.js et BlazeFace via leurs CDN respectifs.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Détecteur de Visages avec JS</title>
<!-- Ici viendra notre CSS -->
</head>
<body>
<h1>Détection de Visages en Temps Réel</h1>
<div class="container">
<video autoplay="true" id="videoElement" playsinline></video>
<canvas id="overlayCanvas"></canvas>
</div>
<div id="statusCard" class="status-card">
<p class="message"><span class="loader"></span> Initialisation...</p>
</div>
<!-- Scripts de l'IA (à placer avant notre script) -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
<!-- Notre propre script viendra ici -->
</body>
</html>2. Le Style CSS
Un bon projet se doit d'être agréable à l'œil. Ce CSS met en place une disposition centrée et, surtout, superpose parfaitement le <canvas> sur l'élément <video>. L'effet miroir (transform: scaleX(-1)) sur la vidéo est un détail ergonomique important : il rend les mouvements de l'utilisateur plus naturels, comme s'il se regardait dans une glace.
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f2f2f7;
font-family: sans-serif;
overflow: hidden;
}
.container {
position: relative;
width: 90vmin;
max-width: 640px;
aspect-ratio: 4/3;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
#videoElement, #overlayCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#videoElement {
transform: scaleX(-1);
}
#overlayCanvas {
z-index: 2;
}
.status-card {
margin-top: 20px;
padding: 15px 25px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 12px;
}
</style>3. JavaScript : Initialisation et accès à la caméra
On entre dans le vif du sujet. D'abord, on récupère les références à nos éléments HTML. Ensuite, on crée notre fonction startCamera. Cette fonction est déclarée async car navigator.mediaDevices.getUserMedia retourne une Promesse. On attend (await) que l'utilisateur donne son autorisation. Une fois le flux vidéo (`stream`) obtenu, on l'assigne à notre élément vidéo et on attend que ses métadonnées soient chargées avant de lancer la suite.
<script>
const videoElement = document.getElementById("videoElement");
const overlayCanvas = document.getElementById("overlayCanvas");
const ctx = overlayCanvas.getContext('2d');
const statusMessage = document.querySelector("#statusCard .message");
// Fonction pour mettre à jour le statut (très utile !)
function updateStatus(message) {
statusMessage.innerHTML = message;
}
async function startCamera() {
updateStatus("Démarrage de la caméra...");
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: { ideal: 640 }, height: { ideal: 480 } }
});
videoElement.srcObject = stream;
videoElement.onloadedmetadata = () => {
videoElement.play();
overlayCanvas.width = videoElement.videoWidth;
overlayCanvas.height = videoElement.videoHeight;
loadBlazeFaceModel(); // Prochaine étape !
};
} catch (err) {
updateStatus("Erreur: Impossible d'accéder à la webcam. Vérifiez les permissions.");
console.error(err);
}
}
startCamera(); // On lance le processus
</script>4. JavaScript : Chargement du modèle BlazeFace
Cette fonction est également async. Le chargement du modèle (blazeface.load()) implique le téléchargement de fichiers et leur initialisation. On informe l'utilisateur que le modèle est en cours de chargement. Une fois que blazeface.load() a résolu sa Promesse, le modèle est prêt, et on peut enfin lancer la boucle de détection.
<script>
// ... (code précédent)
let blazeFaceModel = null;
async function loadBlazeFaceModel() {
updateStatus("Chargement du modèle d'IA...");
try {
blazeFaceModel = await blazeface.load();
updateStatus("Modèle prêt. Détection en cours...");
startFaceDetection(); // L'étape finale !
} catch (error) {
updateStatus("Erreur: Impossible de charger le modèle de détection.");
console.error(error);
}
}
// ... (le reste du script)
</script>5. JavaScript : La Boucle de détection et le dessin
C'est la partie la plus excitante. On utilise setInterval pour créer une fonction qui s'exécute en boucle. À l'intérieur, on appelle blazeFaceModel.estimateFaces() sur l'élément vidéo. C'est l'appel magique qui fait tout le travail. Il retourne un tableau de "prédictions". S'il y a des prédictions, on boucle dessus et pour chacune, on dessine notre fameux ovale en pointillés sur le canevas. On n'oublie jamais de nettoyer le canevas avec ctx.clearRect() au début de chaque tick pour effacer les dessins de l'image précédente.
<script>
// ... (code précédent)
function startFaceDetection() {
setInterval(async () => {
if (!blazeFaceModel || videoElement.paused || videoElement.ended) {
return; // On ne fait rien si les conditions ne sont pas réunies
}
const predictions = await blazeFaceModel.estimateFaces(videoElement, false);
ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
if (predictions.length > 0) {
updateStatus(`Visage(s) détecté(s) : ${predictions.length}`);
predictions.forEach(prediction => {
// Calculs pour l'ovale
const start = prediction.topLeft;
const end = prediction.bottomRight;
const width = end[0] - start[0];
const height = end[1] - start[1];
const centerX = start[0] + width / 2;
const centerY = start[1] + height / 2;
const radiusX = width / 1.8;
const radiusY = height / 1.7;
// Dessin sur le canevas
ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.strokeStyle = '#007aff';
ctx.lineWidth = 3;
ctx.setLineDash([6, 6]);
ctx.stroke();
ctx.setLineDash([]);
});
} else {
updateStatus("Aucun visage détecté.");
}
}, 100); // 10 fois par seconde
}
// ... (le reste du script)
</script>Pour t'éviter la tâche fastidieuse de tout assembler et de déboguer les petites erreurs de copier-coller, j'ai préparé le fichier
Cam.html final. Il contient tout ce dont tu as besoin, parfaitement ordonné et commenté. Télécharge-le, ouvre-le, et vois ton détecteur prendre vie instantanément.
Conclusion
Félicitations. Si tu as suivi jusqu'ici, tu as non seulement le code, mais surtout la compréhension de la logique derrière une application de vision par ordinateur moderne. Tu as vu comment chaque brique - HTML, CSS, et les différentes parties du script JavaScript - s'emboîte pour créer une expérience fluide et puissante.
Assembler tout cela correctement, en gérant les états de chargement, les erreurs potentielles et la boucle de rendu, demande de la rigueur. Chaque partie dépend de la précédente, et une seule erreur peut empêcher l'ensemble de fonctionner.
