Comment utiliser JavaScript pour détecter les visages et appliquer des filtres

J'ai déjà écrit un guide sur la façon de détecter les traits du visage en utilisant Python et j'ai eu beaucoup de questions sur twitter demandant comment faire la même chose en utilisant JavaScript. Aujourd'hui, je vais y répondre et nous ajouterons quelques extras: masquer votre visage avec un filtre Spiderman, ou le filtre pour chien classique. C'est vraiment amusant de travailler sur ce projet et j'espère que vous l'apprécierez aussi.

L'article couvrira deux sujets principaux:

• Reconnaissance des traits du visage
• Ajout de filtres

Donc, voici comment détecter le visage

De la même manière que DLib fonctionne, pour JavaScript, nous avons une bibliothèque appelée clmtrackr qui fera le gros travail de détection de la position du visage sur une image, et sera également identifier les caractéristiques faciales telles que le nez, la bouche, les yeux et plus encore.

Cette bibliothèque fournit des modèles génériques qui sont déjà pré-formés et prêts à l'emploi en suivant la numérotation des caractéristiques comme suit:

Lorsque nous traitons une image avec la bibliothèque, elle renvoie un tableau pour chacun des points de cette carte, où chaque point est identifié par sa position sur x et et axe . Ceci est très important lorsque nous construisons les filtres. Comme vous pouvez déjà probablement le deviner, si nous voulons dessiner quelque chose remplaçant le nez de la personne, nous pouvons utiliser le point 62 qui est au centre du nez.

Mais assez de théorie , commençons à travailler sur quelque chose de cool.

Que construisons-nous?

Dans cet article, nous allons utiliser clmtrackr pour identifier les visages sur un flux vidéo (dans notre cas une webcam ou une caméra) et appliquer des filtres personnalisés qui peuvent être sélectionnés par une liste déroulante sur l'écran. Voici la démo de l'application sur codepen. Pour commencer, assurez-vous d'autoriser dans votre navigateur l'application à accéder à la caméra, sinon cela ne fonctionnera pas.

Génial! Ce n'est peut-être pas parfait, mais il a l'air incroyable.

Maintenant, décomposons le code et expliquons ce que nous faisons.

La structure de code de base

Pour construire l'application que nous utilisons p5. bibliothèque js qui est une bibliothèque JavaScript conçue pour fonctionner principalement avec le canevas, et qui convient parfaitement à notre cas d'utilisation. P5JS n'est pas votre bibliothèque d'interface utilisateur traditionnelle, il fonctionne à la place avec des événements qui définissent quand construire l'interface utilisateur et quand la mettre à jour. Similairement à certains moteurs de jeu.

Il y a 3 événements principaux de p5 que je veux couvrir:

• précharge : qui est exécuté juste après le chargement de la bibliothèque et avant de construire une interface utilisateur ou de dessiner quoi que ce soit sur l'écran. Cela le rend parfait pour charger des actifs.
• configuration : qui est également exécutée une fois, juste après la précharge de et c'est là que nous préparons tout et construisons l'interface utilisateur initiale
• draw : qui est une fonction appelée dans une boucle, et elle est exécutée chaque fois que le système a besoin de rendre l'écran.

Préchargement

Comme par définition, nous utiliserons le [19659013] préchargement événement pour charger les images que nous utiliserons plus tard dans le code. Voici à quoi cela ressemble:

Comme vous pouvez le constater, c'est très simple. La fonction loadImage de p5, comme vous pouvez vous y attendre, chargera l'image et la rendra disponible en tant qu'objet image P5.

Configuration

Ici, les choses deviennent un peu plus intéressant car il est ici où nous chargeons l'interface utilisateur. Nous décomposerons le code exécuté dans cet événement en quatre parties.

Création du canevas

Comme nous voulons que notre code soit réactif, notre canevas aura une taille dynamique qui sera calculée à partir de la taille de la fenêtre et en utilisant un rapport d'aspect de 4: 3. Ce n'est pas l'idéal d'avoir le rapport d'aspect dans un code comme ça, mais nous ferons quelques hypothèses pour garder le code concis pour la démo. Une fois que nous connaissons les dimensions de notre toile, nous pouvons en créer une avec la fonction P5 createCanvas comme illustré ci-après.

Capture du flux vidéo

Après que notre toile fonctionne, nous devons capturer le flux vidéo de la webcam ou de la caméra et le placer dans la toile. Heureusement, P5 le rend très facile à faire avec la fonction videoCapture .

Création du sélecteur de filtre

Notre application est géniale et peut fournir des options pour plus d'un filtre, nous devons donc créer un moyen de sélectionner le filtre que nous voulons activer. Encore une fois, nous pourrions être vraiment fantaisistes ici, cependant, pour plus de simplicité, nous utiliserons une liste déroulante simple, que nous pouvons créer à l'aide de la fonction P5 createSelect () .

Création du tracker d'image

Le tracker d'image est un objet qui peut être attaché à un flux vidéo et identifiera pour chaque image tous les visages et leurs caractéristiques. Le tracker doit être configuré une fois pour une source vidéo donnée.

Dessin de la vidéo et des filtres

Maintenant que tout est configuré, nous devons mettre à jour notre événement dessiner à partir de P5, pour sortir la source vidéo sur le canevas et appliquer n'importe quel filtre qui est sélectionné. Dans notre cas, la fonction draw sera très simple, poussant la complexité dans chaque définition de filtre.

Création du filtre de masque Spiderman

La construction de filtres peut être à la fois une tâche facile ou très complexe. Cela dépendra de ce que le filtre est censé faire. Pour le masque Spiderman, nous devons simplement déplacer l'image du masque Spiderman au centre de l'écran. Pour ce faire, nous nous assurons d'abord que notre objet faceTracker a effectivement détecté un visage en utilisant faceTraker.getCurrentPosition () .

Une fois que notre visage a été détecté, nous utilisons P5 pour rendre l'image à l'aide du le point de face 62, qui est le centre du nez comme centre de l'image, et dont la largeur et la hauteur représentent la taille du visage comme suit.

Assez cool, n'est-ce pas?

Maintenant, le filtre pour chien fonctionne de la même manière mais en utilisant trois images au lieu d'une, une pour chaque oreille et une pour le nez. Je ne vous ennuierai pas avec plus du même code, mais si vous voulez le vérifier, passez en revue le codepen, qui contient le code complet de la démo.

Avec l'aide des bibliothèques JavaScript, il est très facile d'identifier traits du visage et commencez à créer vos propres filtres. Il y a cependant quelques considérations que nous n'avons pas abordées dans ce tutoriel. Par exemple, que se passe-t-il si le visage n'est pas droit sur l'appareil photo? Comment déformer nos filtres pour qu'ils suivent la courbure du visage? Ou si je veux ajouter des objets 3D au lieu de filtres 2D?

Cet article a été initialement publié sur Live Code Stream par Juan Cruz Martinez fondateur et éditeur de Live Code Stream. Il est ingénieur logiciel avec plus de 10 ans d'expérience dans le domaine, travaillant dans une grande variété de projets, des solutions open source aux applications d'entreprise. Heureusement marié, avec un enfant, officiellement fiancé à JavaScript, dans une relation amoureuse avec Python, et poursuivant le rêve de l'écrivain! Vous pouvez lire cette pièce originale ici .

Live Code Stream est également disponible sous forme de newsletter hebdomadaire gratuite. Inscrivez-vous pour recevoir des mises à jour sur tout ce qui concerne la programmation, l'IA et l'informatique en général.