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
Kinectpourles
développeurs
Web.

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

3. 33
Génial,
unnouveauprojet!
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’estpas
nouveau!

6. 66
LespossibilitésduSDK

7. 7
Lechoix
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
Jecommencemesrecherches

10. 10
Enormémentderessourcessurlav1

11. 11
1articleHelloWorld

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

13. 13
DocumentationMicrosoft

14. 14
Ok…c’estpasclair…
Commentonl’utilise?

15. 15
Jecontinuemesrecherches…

16. 1616
Çafaitunejournée
quejecherche…

17. 17
Finalement,leforumMicrosoft

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
DisponiblesurGitHub

34. 34
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?