Kinect.png
< < Articles

Kinect V2 : Implémentation JavaScript

-/-/-

La technologie Kinect n’est pas nouvelle, elle avait beaucoup fait parler d’elle en 2010/2011.

À l’époque, j'avais expérimenté son utilisation dans le cadre d’un projet ekino. La sortie de Kinect étant seulement prévue sur Xbox à ses débuts, Microsoft n’avait pas anticipé une adoption massive des développeurs Web. Les premières implémentations n’étaient donc pas vraiment « plug and play » mais après quelques efforts et grâce à un énorme travail de la communauté nous étions arrivés à utiliser le Kinect pour interagir avec notre application 3D.

Le résultat est visible dans la vidéo ci-dessous :

http://vimeo.com/52336857

Microsoft ayant sorti sa nouvelle version dédiée à Windows en juillet, où en sommes-nous aujourd’hui avec cette technologie ?

Nous allons voir ce qu’il faut connaître avant de se lancer dans un développement avec la Kinect V2.

Prérequis:

  • Port USB 3.0 dédié
  • Processeur 64-bit (x64)
  • Carte graphique avec support de DirectX 11
  • Windows 8+

Si vous ne possédez ni de Windows 8 ni de port USB3 votre Kinect ne fonctionnera pas.

1) Quelles sont les différences majeures entre la V1 et la V2 

a) Description matériel




<td>
  **Intitulé**
</td>

<br /> 

<td>
  **V2**
</td>

<br /> 

<td>
  **V1**
</td>

<br />


<td>
  **Caméra couleur**
</td>

<br /> 

<td>
  1920x1080px @30 fps
</td>

<br /> 

<td>
  640x480px @30 fps
</td>

<br />


<td>
  **Capteur de profondeur**
</td>

<br /> 

<td>
  512x424px
</td>

<br /> 

<td>
  320x240px
</td>

<br />


<td>
  **Projecteur infrarouge**
</td>

<br /> 

<td>
  Oui
</td>

<br /> 

<td>
  Oui
</td>

<br />


<td>
  **Caméra infrarouge**
</td>

<br /> 

<td>
  512x424px
</td>

<br /> 

<td>
  320x240px
</td>

<br />


<td>
  **Microphones**
</td>

<br /> 

<td>
  4
</td>

<br /> 

<td>
  1
</td>

<br />


<td>
  **Horizontale FOV (Field Of View)**
</td>

<br /> 

<td>
  70 degrés
</td>

<br /> 

<td>
  57 degrés
</td>

<br />


<td>
  **Verticale FOV**
</td>

<br /> 

<td>
  60 degrés
</td>

<br /> 

<td>
  43 degrés
</td>

<br />


<td>
  **Détection de personnes**
</td>

<br /> 

<td>
  6
</td>

<br /> 

<td>
  2
</td>

<br />


<td>
  **Nombres de points par personne**
</td>

<br /> 

<td>
  26
</td>

<br /> 

<td>
  20
</td>

<br />



La nouvelle Kinect n’est donc pas révolutionnaire en terme de fonctionnalité, mais offre beaucoup plus de précision. Microsoft à aussi beaucoup mis l’accent sur la mise en place  d’outils et documentation pour les développeurs.

b) Nouveauté du SDK

  • Support de Unity : Développement cross-plateforme diffusable sur  Windows Store
  • Kinect Studio : Avec Kinect Studio, plus besoin d’avoir un cobaye humain pour développer.

    Vous pouvez rejouer un enregistrement et donc tester vos applications sans utiliser le Kinect directement.

  • Multi-applications : Plusieurs applications peuvent  maintenant utiliser un seul Kinect simultanément.

2) Programmer son application en JavaScript !

Microsoft nous offre la possibilité de coder notre application en  JavaScript. Pour ceux qui ne seraient pas familiers avec le C# ou C++, ceci vous permettra d’utiliser les mêmes API dans votre langage favori !

Pour gagner du temps d’initialisation de projet, une des contraintes sera d’utiliser l’éditeur Microsoft Visual Studio. Il y a surement une solution pour utiliser votre IDE favoris mais je n’ai pas tenté l’aventure pour le moment.

En utilisant Visual Studio, vous pourrez très rapidement arriver à récupérer les positions d’un squelette pour les afficher au sein d’un Canvas comme l’exemple ci-dessous :

http://vimeo.com/103632229

Vous pouvez consulter L’API de référence  Kinect en ligne.

Voici un exemple simpliste d’implémentation en JavaScript permettant de récupérer les positions d’un utilisateur :

//get sensor
this._sensor = WindowsPreview.Kinect.KinectSensor.getDefault();
this._sensor.open();

this._bodies = new Array(6);

//open reader and listen for update
this._reader = this._sensor.bodyFrameSource.openReader();
this._reader.addEventListener('framearrived', this._onFrameArrived);

//called on each frame updated
_onFrameArrived : function(e)
{
var frame = e.frameReference.acquireFrame();

frame.getAndRefreshBodyData(this._bodies);

if (frame)
{

frame.getAndRefreshBodyData(this._bodies);

for (i = 0; i &lt; 6; i++)
{
if (this._bodies[i].isTracked)
{
//get an Array of joint Object with joint.position datas
console.log(this._bodies[i].joints);
}
}

}
}

Pour aller plus loin, vous pouvez suivre le tutoriel "Hello (Skeletal) World for the JavaScript" et en télécharger les sources.

On peux donc constater que même si la version 2 du Kinect n'est pas révolutionnaire, Microsoft a vraiment fait en sorte de faciliter la vie des développeurs sur cette nouvelle mouture.

Maintenant que vous avez la puissance de la technologie Kinect au bout des doigts,  il ne vous reste plus qu’à trouver de nouveaux usages pour vos applications et clients !