Dans cet article, nous verrons comment utiliser TrackingJs pour le suivi d'images et de vidéos afin de configurer la vision par ordinateur et les capacités de suivi de détection d'objets et de couleurs.

Ce blog est une traduction de la version anglaise. Vous pouvez vérifier l'original sur ici. Certaines traductions automatiques sont utilisées. Nous vous serions reconnaissants de bien vouloir signaler toute erreur de traduction. *

Que sont les TrackingJs?

Tracking.js est un framework JavaScript conçu pour permettre aux développeurs d'intégrer facilement des capacités de vision par ordinateur et de détection d'objets dans des applications Web sans avoir besoin de codage ou d'algorithmes complexes. Tracking.js est relativement simple et facile à utiliser, et est similaire à JQuery à bien des égards. Il fournit des trackers, des fonctionnalités utilitaires pour diverses opérations de calcul et d'autres composants Web pour vous faciliter la vie.

Type de traqueur

Tracker dans tracking.js est un objet JS qui détecte et suit les éléments d'images et de vidéos, y compris les visages, les couleurs et les objets. Tracking.js offre également la possibilité de créer des trackers personnalisés pour détecter ce que vous aimez. Jetons un coup d'œil à un tracker spécifique.

Color Tracker Le Color Tracker peut être utilisé pour suivre un ensemble spécifique de couleurs dans une image ou une vidéo. Par défaut, ce Tracker prend en charge les couleurs magenta, cyan et jaune, mais vous pouvez ajouter d'autres couleurs personnalisées. Jetons un coup d'œil à Tracker.

Ceci est un extrait du code disponible sur GitHub.

Voici la description du code.

--Ligne 6: contient tracking-min.js. --Ligne 14: définit un composant vidéo. --Line 21: créer une instance de ColorTracker.

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

--Ligne 23: définit ce qui se passe lorsqu'un événement de piste se produit. Autrement dit, lorsque la vidéo est en cours d'exécution, Tracking.js commence à analyser ce que contient l'objet événement. L'objet événement contient un attribut de données, qui est testé pour voir si sa longueur diffère de 0. Cela signifie qu'il y a des données, et en fait que les données représentent des informations sur la couleur trouvée quelque part dans la vidéo / image, donc les données sont là où la couleur a été trouvée (axe x, axe y). Inclut la hauteur et la largeur de la zone qui le contient, ainsi qu'une étiquette de couleur. Ceci est imprimé à la ligne 29. --Line 34 Démarre le suivi des composants vidéo situés dans le DOM. Voyons maintenant comment ajouter une couleur personnalisée. J'utilise la fonction registerColor avec des étiquettes de couleur et des fonctions de rappel comme paramètres.

J'ai essayé d'extraire le code publié dans GitHub.

Aux lignes 27 et 34, vous pouvez voir que nous avons utilisé cette fonction pour créer deux nouvelles couleurs. En fait, Tracking.js utilise la représentation RVB pour gérer les couleurs, donc par défaut, seules les couleurs magenta, cyan et jaune sont enregistrées dans la bibliothèque, mais si vous souhaitez ajouter plus de couleurs, cette fonction Vous pouvez dire à lib comment détecter les couleurs en utilisant.

Dans notre cas, nous avons ajouté du vert et du noir car ils ont leurs propres représentations RVB. (0,255,0) et (0,0,0,0). Le deuxième paramètre est un rappel qui contient la logique pour détecter la couleur.

C'est très simple, Tracking.js envoie la couleur de suivi (au format RVB) à ce callback. Par exemple, dans le cas du vert (vert absolu), le code RVB est (0,255,0), vérifiez donc si les données reçues y correspondent, et à ce stade Tracking.js sait si cette zone doit être considérée. Donc, il renvoie simplement vrai / faux.

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  if (r == 0 && g == 250 && b == 0) {
     return true;      
  }
  return false;   
});

La dernière chose à faire est d'ajouter une étiquette de couleur à la liste des couleurs lors de l'initialisation du tracker.

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','green']);

Object Tracker Cette partie est liée au suivi de ce que vous souhaitez suivre dans une série d'images et de vidéos. Pour ce faire, il est préférable de fournir des données entraînées comme entrée sur ce que le tracker doit suivre. Heureusement, TrackingJs est livré avec trois ensembles de données: les yeux, la bouche et le visage. Voyons comment fonctionnent ces ensembles de données.

Implémentons un exemple de détection d'objets. Le code est ici.

Nous incluons ici en haut de l'arborescence des fichiers un ensemble de données formé pour détecter les visages, les yeux et la bouche. Par défaut, ce sont les seuls arbres disponibles dans cette bibliothèque. Ce [lien](https://medium.com/r?spm=a2c65.11461447.0.0.2cc43091iShshP&url=https%3A%2F%2Fcoding-robin.de%2F2013%2F07%2F22%2Ftrain-your-own-opencv- Cliquez sur haar-classifier.html) pour voir comment créer un ensemble de données personnalisé pour découvrir de nouveaux objets.

--Il existe une fonction plot (), dont le rôle est de dessiner un rectangle autour de l'objet détecté.

Le résultat est le suivant.

utilitaire

Créer un programme qui visualise quelque chose à l'aide d'un ordinateur est très difficile à bien des égards. Par exemple, vous devrez réfléchir à la façon d'ouvrir la caméra de l'utilisateur pour gérer les pixels disponibles, détecter les courbes dans l'image et d'autres calculs lourds. Les utilitaires sont des API légères et faciles à utiliser pour les développeurs Web. En fait, certains des utilitaires disponibles sont: Détection de fonction, convolution, échelle de gris, flou d'image, image intégrale, Sobel, Viola-Jones.

Détection des fonctionnalités

Cette fonctionnalité fonctionne en trouvant les coins des objets disponibles dans l'image. Son API ressemble à ceci:

var corners = tracking.Fast.findCorners(pixels, width, height);

Convolution (calcul de convolution)

Vient ensuite le filtre de convolution, qui est utile pour la détection des contours, le flou, la netteté, le gaufrage, etc. dans l'image. Il existe trois façons de plier une image: les plis horizontaux, verticaux et séparés.

tracking.Image.horizontalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.verticalConvolve(pixels, width, height, weightsVector, opaque);
tracking.Image.separableConvolve(pixels, width, height, horizWeights, vertWeights, opaque);

Gray Scale L'échelle de gris est utilisée pour détecter la valeur de luminosité du côté des tons de l'échelle de gris de l'image.

tracking.Image.grayscale(pixels, width, height, fillRGBA);

Flou d'image

Tracking.js implémente un algorithme de flou appelé Flou gaussien, qui est un type d'effet de flou. Cet effet de flou particulier est principalement utilisé dans les logiciels multimédias et aide à réduire le bruit de l'image et les détails indésirables. La syntaxe pour flouter une image avec une seule ligne de code est:

tracking.Image.blur(pixels, width, height, diameter);

Image intégrale

Cette fonctionnalité permet aux développeurs d'avoir des sommes de valeurs dans un sous-ensemble rectangulaire de la grille, qui est également appelé la table des aires additionnées. Dans le domaine du traitement d'image, on parle également d'image intégrée. Pour calculer cela avec Tracking.js:

tracking.Image.computeIntegralImage(
  pixels, width, height,
  opt_integralImage,opt_integralImageSquare,opt_tiltedIntegralImage,
  opt_integralImageSobel
 );

Sobel Cette fonction calcule les dégradés verticaux et horizontaux de l'image et combine les images calculées pour trouver les bords de l'image. Le filtre Sobel est mis en œuvre en mettant d'abord l'image en niveaux de gris, puis en calculant les dégradés horizontaux et verticaux, et enfin en combinant les images en dégradé pour créer l'image finale.

L'API est la suivante.

tracking.Image.sobel(pixels, width, height);

Viola-Jones Viola-Jones Le cadre de détection d'objets fournit des taux de détection d'objets en temps réel et compétitifs. Est le premier framework de détection d'objets à fournir en temps réel. Cette technique est utilisée dans l'implémentation de tracking.ObjectTracker.

Viola-Pour utiliser Jones pour détecter des objets dans les pixels de l'image à l'aide de Tracking.js:

tracking.ViolaJones.detect(pixels, width, height, initialScale, scaleFactor, stepSize, edgesDensity, classifier);

Composant Web

L'écriture de programmes de vision par ordinateur était souvent difficile, même des tâches simples exigeaient beaucoup de calcul, et le codage était très itératif. Le but principal de cette excellente bibliothèque est de fournir un traitement complexe sur le Web avec une API intuitive, Web Components (https://developer.mozilla.org/en-US/docs/). Web / Web_Components? Spm = a2c65.11461447.0.0.2cc43091iShshP) est inclus.

Les composants Web constituent à bien des égards un nouveau concept dans le développement Web moderne. Leur objectif est d'apporter un modèle d'encapsulation logique plus simple. En fait, cela permet aux développeurs d'encapsuler toute la logique de leurs fonctionnalités dans des éléments HTML et de les utiliser aussi naturellement que des éléments DOM. Il utilise les mêmes concepts que les bibliothèques telles que react et angular. Cependant, contrairement à ceux-ci, les composants Web sont entièrement intégrés dans le navigateur Web.

Par conséquent, Tracking.js fournit un moyen simple de réaliser la vision par ordinateur sur le Web en intégrant une partie de l'API comme expliqué ci-dessus dans l'élément de composant Web décrit ci-dessus. Pour les utiliser, vous devez d'abord les installer via le package bower. Vous pouvez installer le composant Web TrakingJs en tapant simplement la commande suivante:

bower install tracking-elements --save

Cela peut être utilisé pour fournir certains éléments de base tels que l'élément Color (utilisé pour détecter les couleurs) et l'élément Object (utilisé pour détecter des éléments). Le principe principal des composants Web TrackingJs est d'étendre les éléments Web natifs (<video />, <img />, etc. "et d'ajouter de nouvelles fonctionnalités au framework, qui est un nouvel attribut. Cela se fait avec id = “” , et l'élément à détecter (couleur, objet, etc.) est défini par l'attribut` target =“ ”ʻ

Élément de couleur

Détectons quelques couleurs: magenta, cyan, jaune:

<!-- detect colors into an image -->
<img is="image-color-tracking" target="magenta cyan yellow" />
<canvas is="canvas-color-tracking" target="magenta cyan yellow"></canvas>
<video is="video-color-tracking" target="magenta cyan yellow"></video>

Le code ci-dessus utilise ʻis = "image-color-tracking" pour spécifier qu'il étend l'élément natif ʻ pour indiquer au traqueur la couleur cible J'utilise target =" magenta cyan yellow ".

Élément objet

Faisons-le en pratique.

Voici l'extrait de code (https://gist.github.com/dassiorleando/fb5c5f71ad76e3ec360530c2d0ac339e?spm=a2c65.11461447.0.0.2cc43091iShshP).

--Line 5: Importez le polyfill pour activer la fonctionnalité du composant Web. --Ligne 7: importez le composant Web. --Line 11: Le composant Web lui-même est utilisé en étendant le composant natif avec l'attribut ʻiset en définissant l'objet suivi avec l'attributtarget. --Ligne 18: ajoute un écouteur d'événement à l'élément pour écouter les événements de piste qui se produisent lorsqu'un visage est détecté. --Line 20: Appelez la fonction plotRectagle ()` pour dessiner un rectangle autour de la zone détectée.

Conclusion

Dans cet article, nous avons vu comment installer et appliquer Computer Vision sur le Web et utiliser TrackingJs pour exécuter certaines fonctions de détection d'objets et de couleurs.

Alibaba Cloud est l'opérateur d'infrastructure cloud n ° 1 (Gartner 2019) dans la région Asie-Pacifique avec deux centres de données au Japon et plus de 60 zones de disponibilité dans le monde. Cliquez ici pour plus d'informations sur Alibaba Cloud. Page officielle d'Alibaba Cloud Japan *

[JAVA] Comment configurer la vision par ordinateur pour le suivi des images et des vidéos avec TrackingJs