Maison > Article > interface Web > Technologie de reconnaissance faciale JavaScript et bibliothèque JavaScript de reconnaissance faciale Compétences Tracking.js_javascript
J'ai toujours été très intéressé par la technologie de reconnaissance de l'intelligence artificielle, car je n'arrive pas à imaginer de quel type d'algorithme il s'agit et de quel type de processus d'analyse il s'agit. Qu'il s'agisse de la reconnaissance vocale, de la reconnaissance faciale ou d'autres types de reconnaissance, l'apparence des gens et la façon dont ils parlent sont si différents. Vous pouvez prendre une photo de différentes manières et sous différents angles. Je ne comprends pas comment fonctionnent ces technologies de reconnaissance. Il existe un jeu appelé « Mask » qui utilise également cette technologie de reconnaissance. Je pense que la technologie de reconnaissance faciale devrait également être étudiée. Facebook utilise cette technologie, et elle peut également être utilisée dans les contrôles gestuels, il y aura donc une place pour elle sur votre site Web.
Un package JavaScript que j'ai trouvé et qui peut être utilisé pour la reconnaissance faciale est Face Detection, qui a été développé par Jay Salvat et Liu Liu. Il s'agit d'un plugin jQuery standard qui analyse l'image fournie et renvoie les coordonnées de toutes les images de visage trouvées. Voyons comment il est utilisé !
jQuery.faceDetection
Pour utiliser le plugin jQuery de détection de visage, vous devez importer quatre fichiers js :
<script src="jquery-1.4.3.min.js"></script> <!-- mas js --> <script src="facedetection/ccv.js"></script> <script src="facedetection/face.js"></script> <script src="jquery.facedetection.js"></script>
Les deux premiers fichiers de ce plug-in de reconnaissance faciale sont ses différents programmes fonctionnels. Grâce à eux, vous pouvez obtenir un objet tableau. Ces objets stockent les informations de coordonnées faciales dans l'image. Voici un exemple :
var coords = jQuery("#myImage").faceDetection(); /* 返回: { x: 525 y: 435, width: 144, height: 144, positionX: 532.6353328125226, positionY: 443.240976080536, offsetX: 532.6353328125226, offsetY: 443.240976080536, confidence: 12.93120119, neighbour: undefined, } */
Vous pouvez également ajouter des fonctions de rappel d'événement à la méthode de détection :
var coords = jQuery("#myImage").faceDetection({ complete: function(image, coords) { // Do something }, error: function() { console.warn("无法分析图片"); } });
Vous pouvez effectuer n'importe quel traitement pour les informations faciales reconnues. Vous pouvez dessiner un cadre autour du visage sur la photo :
jQuery("img").each(function() { var img = this; // 获取脸部坐标 var coordinates = jQuery(img).faceDetection(); // 在脸上画出框线 if(coordinates.length) { coordinates.forEach(function(coord) { jQuery("<div>", { css: { position: "absolute", left: coord.positionX + 5 + "px", top: coord.positionY + 5 + "px", width: coord.width + "px", height: coord.height + "px", border: "3px solid white" } }).appendTo(img.parentNode); }); } });
C'est très simple, bien sûr vous pouvez effectuer des traitements complexes, comme l'extraction.
J'ai utilisé diverses images pour essayer la reconnaissance faciale et, comme je m'y attendais, les résultats n'étaient pas parfaits. Mais peu importe, ça reste plutôt bien. Il s’agit d’une technique de script très simple et aucune technique n’est parfaite. Ce plug-in de reconnaissance faciale n'a pas de fonction de comparaison de visages. Vous devez utiliser d'autres méthodes et fournir des informations sur les caractéristiques du visage pour obtenir cette fonction. Dans l'ensemble, c'est plutôt bien et je vous recommande vivement de l'essayer.
Bibliothèque JavaScript de reconnaissance faciale Tracking.js
Pour les développeurs Web, la bibliothèque JavaScript open source Tracking.js facilite la technologie de vision par ordinateur et de réalité augmentée. Elle peut être utilisée pour afficher des applications de détection de mouvement avec des effets similaires à ceux de Kinect ou de la Wii, et la bibliothèque JavaScript est de petite taille. (~ 7k), très léger et avec une interface simple.
Tracking.js peut fonctionner dans des applications Web mobiles, des applications de bureau et peut même être associé à des serveurs basés sur Node.js. Il apportera des algorithmes et des technologies d'infographie au navigateur, et il dispose de fonctions : reconnaissance faciale (lorsqu'une couleur spécifique ou lorsqu'une personne/un visage/un corps bouge), suivi des couleurs en temps réel. Pour le développement Web, il était autrefois possible d’obtenir des effets similaires grâce à la technologie C ou C. Traking.js fournit désormais un composant Web, afin que les développeurs Web front-end puissent accéder aux composants de balises HTML pour implémenter des fonctions similaires sans connaître JavaScript, ce qui simplifie grandement le développement Web.
Tracking.js comprend un algorithme de suivi des couleurs et des composants de suivi des objets qui permettent aux navigateurs Web de reconnaître les changements dans les visages et les yeux. Par exemple, l'interface Web peut également utiliser cette fonction pour définir les avatars des utilisateurs, ce qui constitue également une fonctionnalité intéressante pour certains sites Web. En même temps, elle peut faire correspondre les données faciales suivies avec la base de données d'arrière-plan pour fournir des commentaires plus utiles ; données des utilisateurs.
Actuellement, le projet de code source Tracking.js sur GitHub a été forké plus de 200 fois. Début août, la bibliothèque JS a été mise à niveau vers la version 1.0.
Le contenu ci-dessus est la technologie de reconnaissance faciale JavaScript et la bibliothèque JavaScript de reconnaissance faciale Tracking.js partagées avec vous. J'espère qu'il vous plaira.