Intelligence artificielle

Estimation de la pose dans un navigateur avec votre webcam

Estimation de la pose dans un navigateur avec votre webcam


Nous utiliserons une webcam comme entrée vidéo dans notre modèle d'estimation de pose et montrerons la sortie sur notre page principale index.html.

Nous utilisons deux bibliothèques ici:

  • ml5.js pour créer et exécuter notre modèle ML.
  • p5.js pour obtenir le flux vidéo de la webcam et l’affichage de la sortie dans notre navigateur.

J'ai ajouté une documentation complète dans le code, expliquant chaque ligne. Ici, nous allons discuter du noeud principal qui est la majorité du code de toute façon.

Notre code est composé de deux fichiers:

  • poseNet_webcam.js, notre code JavaScript.
  • index.html, la page principale pour afficher la sortie.

PoseNet_webcam.js

p5.js exécute deux fonctions:

  • configuration de la fonction (). La première fonction qui est exécutée et ne s'exécute qu'une fois. Nous allons faire notre configuration initiale en elle.
  • fonction draw (). Cette fonction est appelée à répétition indéfinie (sauf si vous envisagez de fermer le navigateur ou d'appuyer sur le bouton d'alimentation).

createCanvas (largeur, hauteur) est fourni par p5 pour créer une boîte dans le navigateur pour montrer notre sortie. Ici, la toile a largeur: 640px et hauteur: 480px.

createCapture (VIDEO) est utilisé pour capturer un flux webcam et retourner un objet élément p5, que nous nommerons webcam_output. Nous définissons la vidéo de la webcam à la même hauteur et à la même largeur que notre toile.

ml5.poseNet () crée un nouveau modèle PoseNet en prenant comme entrée:

  • Notre sortie webcam actuelle.
  • Une fonction de rappel, appelée lorsque le modèle est chargé avec succès. À l'intérieur de notre index.html fichier, nous avons créé un paragraphe HTML avec un ID statut montrant le texte d'état actuel à l'utilisateur. Nous changeons ce texte en Modèle chargé pour que l'utilisateur sache, car le modèle prend un peu à charger.

poseNet.on () est un déclencheur ou un écouteur d'événement. Chaque fois que la webcam donne une nouvelle image, elle est transmise au modèle PoseNet.

La pose du moment est détectée et la sortie est prête. Il appelle fonction (résultats), où résultats est la sortie finale de points clés et les scores donnés par le modèle.

Nous stockons cela dans notre pose array, qui est défini globalement et peut être utilisé n’importe où dans notre code. webcam_output.hide () masque la sortie de la webcam pour le moment, car nous modifierons les images et montrerons plus tard l'image avec les points et les lignes détectés.

Il ne reste plus qu’à afficher l’image avec tous les résultats de la détection stockés dans pose dans le navigateur.

Comme nous le savons, le dessiner() la fonction tourne dans une boucle pour toujours. À l'intérieur de cela, nous appelons le image() fonction pour afficher notre image (comme nous avons notre vidéo image par image) dans la toile.

Il faut cinq arguments:

  • image d'entrée. L'image que nous voulons afficher.
  • x position. La coordonnée x du coin supérieur gauche de l'image par rapport au canevas.
  • la position y. La coordonnée y du coin supérieur gauche de l'image par rapport au canevas.
  • largeur. La largeur pour dessiner l'image.
  • la taille. La hauteur pour dessiner l'image.

Nous appelons ensuite drawKeyPoints () et drawSkeleton () dessiner le points et lignes sur l'image en cours. dessiner() fait cela dans une boucle infinie, montrant ainsi une sortie continue à l'utilisateur, ce qui la fait ressembler à une vidéo.

Une sortie d'objet JS typique de PoseNet

Comme vous pouvez le voir ci-dessus, PoseNet renvoie un objet JavaScript en sortie, composé de nombreuses paires clé-valeur. C'est le pose valeur-clé de la pose et squelette valeurs, fournies pour chaque personne dans une image.

Nous avons une fonction pour dessiner des points détectés sur l'image. Rappelez-vous, nous avons enregistré tous les résultats de la sortie PoseNet dans la pose tableau. Ici, nous parcourons chaque pose ou une personne dans une image et obtenir son points clés.

À l'intérieur d'un point du tableau de points-clés

Nous parcourons chaque point c'est une partie du corps dans la points clés tableau, qui a en outre:

  • partie. Le nom de la pièce détectée.
  • position. Valeurs x et y d'un point de l'image.
  • But. Précision de détection.

Nous dessinons seulement point si la précision de la détection est supérieure à 0,2. Nous appelons remplissage (rouge, vert, bleu), en prenant une valeur d’intensité RVB allant de 0 à 255 décider de la couleur d'un point, et noStroke () désactiver le tracé que p5 dessine par défaut.

Ensuite, nous appelons ellipse (x_value, y_value, width, height) dessiner une ellipse à la position désirée mais en gardant une largeur et une hauteur très petites, ce qui les fait ressembler à un point (exactement ce que nous voulions).

De même, comme notre variable pose a plusieurs pose‘S dedans, il a aussi plusieurs squelette valeurs avec leur propre type de paires clé-valeur, qui est gérée par drawSkeleton () tracer des lignes au lieu de points.

index.html

Ceci est la page principale où nous affichons notre sortie. Nous ajoutons toutes nos bibliothèques en utilisant des balises de script.

Les bibliothèques ml5.js et p5.js

Nous montrons une introduction de bienvenue mignonne à l'utilisateur. Comme le chargement du modèle prend du temps, nous montrons leChargement du modèle… » message. Si vous vous en souvenez, nous le changeons comme suit:Modèle chargé ' une fois que notre modèle est chargé en utilisant la référence sur un ID, appelé statut.

Enfin, nous mettons notre propre code JS à l'intérieur du corps. Exécuter le index.html fichier pour voir la sortie. Assurez-vous d'autoriser l'accès à la webcam lorsque vous y êtes invité.

PoseNet en action. Image tirée du blog officiel Tensorflow.

C'est tout! Vous pouvez toujours aller à la page de référence ml5.js, qui contient beaucoup plus d'extraits de mode et de code prêts à l'emploi pour divers projets ML intéressants, traitant d'une grande variété d'éléments comme le texte, les images et le son.

Merci d'avoir lu!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close