Come usare una posenet con tensorflow.js per valutare il movimento del corpo

In questo articolo voglio lasciarvi un esempio su come sia possibile intercettare la posizione del corpo attraverso l’uso di una rete neurale preaddestrata chiamata posenet rilasciata da google. PoseNet è, infatti, un modello di visione che può essere utilizzato per stimare la posizione/postura di una persona. Ho riscritto un esempio in javascript nella sua forma più elementare/essenziale per una maggiore comprensione del contesto. Riporto l’esempio e lo commenterò di seguito. Potete, nel frattempo, osservare il risultato direttamente attraverso l’esempio live. Non vi preoccupate, non verrà conservata alcuna informazione provenientte  dalla webcam, potete,quindi, tranquillamente attivarla. Per comodità lascio qui il codice di esempio.

[su_box title=”Live Demo” style=”noise” box_color=”#d2c935″ radius=”4″]

Il codice html  è veramente minimale, dovrete inserire le istruzioni per caricare il modello e tensorflow e preparare il canvas per la gestione delle immagini/frames catturate dalla webcam.

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>che 
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
 </head>
  <body>
    <div id="Container">
            <video autoplay="true" width="640" height="480" id="videoElement"></video>
            <canvas id="myCanvas" width="640" height="480"></canvas>
            <p><span id ="poseElementId">Array delle posizione del corpo ... Attendi un attimo</span></p>
    </div>
  </body>
</html>

 var imageElement;
    var c;
    var ctx;
        setTimeout(function(){
         startVideo();
         c = document.getElementById("myCanvas");
         ctx = c.getContext("2d");
    }, 3000);

   function startVideo() {
        var video = document.querySelector('video'),canvas;
        imageElement=video;
        console.log("navigator  " + navigator.mediaDevices)
        if (navigator.mediaDevices) {
            // access the web cam
            navigator.mediaDevices.getUserMedia({ video: true })
                // permission granted:
                .then(function(stream) {
                 //video.src = window.URL.createObjectURL(stream);
                     video.srcObject = stream;
                     getSinglePose(imageElement);
                })
                // permission denied:
                .catch(function(error) {
                    document.body.textContent = 'Could not access the camera.Error:' + error.name;
                });
        return imageElement;
    }

function getSinglePose(imageElement) {
      posenet.load().then(function(net) {
            const pose = net.estimateSinglePose(imageElement);
            return pose;
          }).then(function(pose){
           var keypoints = new Array();
           keypoints=pose.keypoints;
           var poseElement = document.getElementById('poseElementId');
           poseElement.innerHTML="";
           for (index=0;index<17;index++)
           {
               poseElement.innerHTML += keypoints[index].part + " " + keypoints[index].position.x + " " 
                     + keypoints[index].position.y + "<br>";
           }
           getSinglePose(imageElement);
        })
}