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 👏
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
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 ?
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 ?
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 ( ruclips.net/video/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 ?
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.
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
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
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 👏
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 ;)
Merci super bien expliquer.
Bravo.
Merci Frédéric :)
Bravo et top comme d'habitude :)
Merci François :)
Merci beaucoup !
Merci Mohammed !
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
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
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 ?
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 ?
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 ( ruclips.net/video/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 ?
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.
Super video , g g
Merci bot :D
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
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