La technologie Kinect n’est pas nouvelle, elle avait beaucoup fait parler d’elle en 2010/2011. Microsoft ayant sorti sa nouvelle version dédiée à Windows en juillet 2014, où en sommes-nous aujourd’hui avec cette technologie ? Que peut-on faire et ne pas faire, notamment en choisissant la technologie HTML5 ? Fort d'une expérience réussie et après avoir développé une application disponible lors du salon de la lingerie via la Kinect, mais aussi sur le Web via la souris nous verrons lors de cette présentation tout les tenant et aboutissant pour réussir un projet Kinect HTML5.

1. 1
Kinect pour les
développeurs
Web.

2. 22
Qui suis je ?
Développeur Front End
#JavaScript #Angular #React
#Cordova #Gulp/Grunt #Sass #Ionic
@MeKimak @NewsDuFront
Mickael Dumand

3. 33
Génial,
un nouveau projet !
Un site web.
Une application Kinect.

4. 4
Microsoft Kinect

5. 55
V2
• Sortie en juillet 2014
• Enfin un SDK Windows !
• Sortie en novembre 2010
• « Hacké » pour Windows
V1Kinectn’estpasnouveau!

6. 66
Les possibilités du SDK

7. 7
Le choix
multiplateforme.

8. 8
Pré-requis Kinect
• Windows 8+
• Visual Studio
• Port USB 3.0 dédié
• Processeur 64-bit (x64)
• Carte graphique avec support DirectX 11
• Ne fonctionne pas dans une VM
Contrairement aux apparences
cette présentation
se déroule actuellement
sous Windows ;)

9. 9
Je commence mes recherches

10. 10
Enormément de ressources sur la v1

11. 11
1 article HelloWorld

12. 12
Comment on code une interaction ?
Hold gesture.

13. 13
Documentation Microsoft

14. 14
Ok… c’est pas clair…
Comment on l’utilise ?

15. 15
Je continue mes recherches…

16. 1616
Ça fait une journée
que je cherche…

17. 17
Finalement, le forum Microsoft

18. 18
Eureka !
[…] will only provide you
the raw frame data from
the camera […]

19. 19
FAIL!

20. 20
DO IT
YOURSELF !

21. 21
26 points
dans
l’espace
(x,y,z)
Quelles données on reçoit ?

22. 22
x6 utilisateurs

23. 2323
Toutesles
33millisecondes!

24. 24
Implémentation de mon API

25. 25
1er parti-pris.
Isoler un seul utilisateur.

26. 2626

27. 2727
varbody=trackBodyOn(x,xDepth,z,zDepth);

28. 2828
varbody=trackBodyOn(0.5,0.2,1.0,0. 1);
0.5 = 50%
1 mètre

29. 2929
2e parti-pris.
(Droite ou Gauche)
Interaction avec une seule main

30. 30
Exemple d’utilisation

31. 3131
3e parti-pris. Drag & Drop.

32. 32
Exemple d’utilisation

33. 33
Disponible sur GitHub

34. 3434
Démo.

35. 3535
#github #ekino
ek-winjs-kinect
FEATURES
• Windows 8 store ready to package with cordova
• Target one player on specific area
• Fallback the API with Mouse Event on a browser
• Draw the body joints to canvas for debugging
• Manage hold gesture with events
• Manage drag and drop easily:
IDEAS
• Optimize right vs left hand interaction
• Manage event bubbling on target listeners
• Add simple gestures like press, swipe, zoom, smile,
wink
• Manage touch events fallbacks
• Target multiple players on different area

36. 36
Desquestions?