Download - Kinect pour les développeurs Web
![Page 1: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/1.jpg)
1
Kinect pour les développeurs Web.
![Page 2: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/2.jpg)
22
Qui suis je ?
Développeur Front End
#JavaScript #Angular #React #Cordova #Gulp/Grunt #Sass #Ionic
@MeKimak @NewsDuFront
Mickael Dumand
![Page 3: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/3.jpg)
33
Génial, un nouveau projet !
Un site web.
Une application Kinect.
![Page 4: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/4.jpg)
4
Microsoft Kinect
![Page 5: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/5.jpg)
55
V2
• Sortie en juillet 2014• Enfin un SDK Windows !
• Sortie en novembre 2010• « Hacké » pour Windows
V1 Kinect n’est pas nouveau !
![Page 6: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/6.jpg)
66
Les possibilités du SDK
![Page 7: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/7.jpg)
7
Le choix multiplateforme.
![Page 8: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/8.jpg)
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 apparencescette présentation
se déroule actuellement sous Windows ;)
![Page 9: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/9.jpg)
9
Je commence mes recherches
![Page 10: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/10.jpg)
10
Enormément de ressources sur la v1
![Page 11: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/11.jpg)
11
1 article Hello World
![Page 12: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/12.jpg)
12
Comment on code une interaction ?
Hold gesture.
![Page 13: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/13.jpg)
13
Documentation Microsoft
![Page 14: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/14.jpg)
14
Ok… c’est pas clair…
Comment on l’utilise ?
![Page 15: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/15.jpg)
15
Je continue mes recherches…
![Page 16: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/16.jpg)
1616
Ça fait une journée que je cherche…
![Page 17: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/17.jpg)
17
Finalement, le forum Microsoft
![Page 18: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/18.jpg)
18
Eureka !
[…] will only provide you the raw frame data from the camera […]
![Page 19: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/19.jpg)
19
FAIL!
![Page 20: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/20.jpg)
20
DO IT YOURSELF !
![Page 21: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/21.jpg)
21
26 points dans l’espace (x,y,z)
Quelles données on reçoit ?
![Page 22: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/22.jpg)
22
x6 utilisateurs
![Page 23: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/23.jpg)
2323
Toutes les 33 millisecondes !
![Page 24: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/24.jpg)
24
Implémentation de mon API
![Page 25: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/25.jpg)
25
1er parti-pris.
Isoler un seul utilisateur.
![Page 26: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/26.jpg)
2626
![Page 27: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/27.jpg)
2727
var body = trackBodyOn( x, xDepth, z ,
zDepth);
![Page 28: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/28.jpg)
2828
var body = trackBodyOn(0 . 5 , 0 . 2 , 1 . 0 ,
0. 1);
0.5 = 50%
1 mètre
![Page 29: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/29.jpg)
2929
2e parti-pris.
(Droite ou Gauche)
Interaction avec une seule main
![Page 30: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/30.jpg)
30
Exemple d’utilisation
![Page 31: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/31.jpg)
3131
3e parti-pris. Drag & Drop.
![Page 32: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/32.jpg)
32
Exemple d’utilisation
![Page 33: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/33.jpg)
33
Disponible sur GitHub
![Page 34: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/34.jpg)
3434
Démo.
![Page 35: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/35.jpg)
3535
#github #ekinoek-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
![Page 36: Kinect pour les développeurs Web](https://reader035.vdocuments.site/reader035/viewer/2022062514/55b3d7c4bb61ebee708b46fc/html5/thumbnails/36.jpg)
36
Des
ques
tion
s ?