Reconnaissance faciale avec JavaScript en 30 minutes

Подписаться 20 тыс.

Просмотров 7 тыс.

50% 1

La reconnaissance faciale est possible depuis votre navigateur grâce à la librairie face-api.js. Il suffit pour cela d'utiliser un modèle déjà entraîné fourni par face-api. Ce modèle détectera en effet un visage et même plusieurs sur une photo. Dans cette vidéo, nous allons apprendre à uploader une photo, à détecter les visages de ladite photo puis à les entourer d'un cadre.
Soyez informé des nouvelles formations Code Concept (Front, Back, FullStack) et recevez des coupons de réduction en avant-première :
codeconcept.ck.page/4ea408d1b4
Formations Front, Back et FullStack :
codeconcept.teachable.com/
Accès rapide :
0:00 uploader une image et l'afficher
9:16 détecter les visages
15:45 ajouter un cadre autour de chaque visage détecté
Liens cités dans la vidéo :
justadudewhohacks.github.io/f...
github.com/codeconcept/face-d...

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 18

@VariousSoundEffects 2 года назад

Merci super bien expliquer. Bravo.

@codeconcept 2 года назад

Merci Frédéric :)

@mohammedb7538 2 года назад

Merci beaucoup !

@codeconcept 2 года назад

Merci Mohammed !

@TheFrancesco2688 2 года назад

Bravo et top comme d'habitude :)

@codeconcept 2 года назад

Merci François :)

@jamalse6684 2 года назад

Salut et merci pour tes vidéos hyper claires… Actuellement je suis sur le JS et tes vidéos sont très précieuses. Si je peux me permettre une petite suggestion car y’a beaucoup de vidéos sur le sujet mais y’a encore certaines choses qui m’échappent. Je suis actuellement sur l’asynchrone et les appels API. J’ai bien compris le principe du fetch mais parfois je vois qu’il faut écrire Promise() parfois c’est directement les then, parfois async/await… une vidéo qui explique bien la différence entre toutes ces méthodes serait vraiment intéressante. En espérant que tu me liras bien sûre et continu tes vidéos 👏

@codeconcept 2 года назад

Merci Jamal ! Très bonne idée que cette vidéo sur les Promises et différences entre async/await et then. Je la met dans ma todo list ;)

@sou5426 2 года назад

super vidéo !! Il faut juste faire attention à ne pas confondre "Reconnaissance faciale" et "détection de visage" car ce n'est pas la même chose

@codeconcept 2 года назад

C'est vrai que c'est plutôt de la détection de visage dans cette vidéo. Pour la reconnaissance de visages en JavaScript, il y a apparemment un model entraîné également utilisable par face-api.js : justadudewhohacks.github.io/face-api.js/docs/index.html#models-face-recognition

@tenchigreed 2 года назад

Super video , g g

@codeconcept 2 года назад

Merci bot :D

@lodwagler8561 2 года назад

Merci, sujet très intéressant =) Pour l'alignement absolute (problème à la fin), pourquoi pas mettre 0 et le parent en relatif ? Le plaisir de faire du code ? ;-P En tout cas ça donne envie de découvrir cette outil, d'autant plus avec un flux vidéo !! Ca aurais pu être le bonus de fin de vidéo ça, webcame + facelib ^^ Compatible Node ?

@codeconcept 2 года назад

Merci Lod :) Oui j'aurais pu être davantage sur du CSS. J'ai tendance à réserver les CSS à la mise en page avec Flexbox et les grids et aux animations. Ca m'aurait effectivement facilité la vie :D J'ai même pas pensé à tester face-api depuis une webcam. Ca pourrait être une suite ;) Concernant facelib, c'est l'équivalent de face-api pour le développement en Python ou bien c'est complémentaire de face-api ?

@marctabaries361 2 года назад

Comme d'habitude, la vidéo était très intéressante. J'ai regardé à nouveau la fin de la vidéo, quand il y a le bug avec facesDetected ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YarlWska9WY.html ). En réalité, j'ai l'impression que la variable facesDetectedImage (lignes 42 à 45) ne sert à rien, car elle n'est pas utilisée par la suite dans le code. Autre problème, tu fais un premier drawDetections grâce au tableau faceDetected (ligne 51)... et plus tard tu refais un second drawDetections toujours, grâce au tableau faceDetected, mais via un map (lignes 58 à 60)... mais j'ai l'impression que c'est seulement le second drawDetections qui fonctionne. À mon avis, la ligne 51 est au final en trop. Qu'en penses-tu ?

@codeconcept 2 года назад

Merci Marc ! J'ai dû laisser traîner des choses que j'aurais dû nettoyer après avoir trouvé le bug causé par l'écrasement de mon tableau d'objets par une unique image. Si bien que facesDetectedImage s'est retrouvé à ne pas servir. C'est l'effet tête dans le guidon où on ne voit plus le paysage complet :D Il faut croire que la fonction resizeResult est bien nommée et ne sert que lorsque l'on veut modifier la taille de l'image qui contient les cadres autour des visages.

@belgacemtabbabi3681 Год назад

salut , j'ai un problème dans le code sur le navigateur dans la ligne de fileUpload.addEventListener("change",getImage, false); [Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')] at app.js:4:13

@codeconcept Год назад

Salut, C'est une erreur courante : ce qui aurait dû être un objet est null ou undefinied. Et donc on essaie d'accéder à une propriété de quelque chose qui n'existe pas (ici, la fonction addEventListner()). Pour résoudre ce problème, il suffit de trouver pourquoi l'élément récupéré via un getElementById() est null ou undefined au lieu d'être un div ou un bouton (ou probablement ici l'input de type file). C'est généralement dû à une faute de frappe sur le nom d'un id, à une erreur de majuscule ou minuscule etc. Et parfois même, le fait d'avoir oublié d'ajouter un id côté HTML à l'élément qu'on essaie ensuite de récupérer côté JavaScript. Le code source est ici ;) github.com/codeconcept/face-detection