36
1 Kinect pour les développeurs Web.

Kinect pour les développeurs Web

Embed Size (px)

Citation preview

Page 1: Kinect pour les développeurs Web

1

Kinect pour les développeurs Web.

Page 2: Kinect pour les développeurs Web

2 2

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

3 3

Génial, un nouveau projet !

Un site web.

Une application Kinect.

Page 4: Kinect pour les développeurs Web

4

Microsoft Kinect

Page 5: Kinect pour les développeurs Web

5 5

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

6 6

Les possibilités du SDK

Page 7: Kinect pour les développeurs Web

7

Le choix multiplateforme.

Page 8: Kinect pour les développeurs Web

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 ;)

Page 9: Kinect pour les développeurs Web

9

Je commence mes recherches

Page 10: Kinect pour les développeurs Web

10

Enormément de ressources sur la v1

Page 11: Kinect pour les développeurs Web

11

1 article Hello World

Page 12: Kinect pour les développeurs Web

12

Comment on code une interaction ?

Hold gesture.

Page 13: Kinect pour les développeurs Web

13

Documentation Microsoft

Page 14: Kinect pour les développeurs Web

14

Ok… c’est pas clair…

Comment on l’utilise ?

Page 15: Kinect pour les développeurs Web

15

Je continue mes recherches…

Page 16: Kinect pour les développeurs Web

16 16

Ça fait une journée que je cherche…

Page 17: Kinect pour les développeurs Web

17

Finalement, le forum Microsoft

Page 18: Kinect pour les développeurs Web

18

Eureka !

[…] will only provide you the raw frame data from the camera […]

Page 19: Kinect pour les développeurs Web

19

FAIL!

Page 20: Kinect pour les développeurs Web

20

DO IT YOURSELF !

Page 21: Kinect pour les développeurs Web

21

26 points dans l’espace (x,y,z)

Quelles données on reçoit ?

Page 22: Kinect pour les développeurs Web

22

x6 utilisateurs

Page 23: Kinect pour les développeurs Web

23 23

Toutes les 33 millisecondes !

Page 24: Kinect pour les développeurs Web

24

Implémentation de mon API

Page 25: Kinect pour les développeurs Web

25

1er parti-pris.

Isoler un seul utilisateur.

Page 26: Kinect pour les développeurs Web

26 26

Page 27: Kinect pour les développeurs Web

27 27

var body = trackBodyOn( x, xDepth, z , zDepth);

Page 28: Kinect pour les développeurs Web

28 28

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

29 29

2e parti-pris.

(Droite ou Gauche)

Interaction avec une seule main

Page 30: Kinect pour les développeurs Web

30

Exemple d’utilisation

Page 31: Kinect pour les développeurs Web

31 31

3e parti-pris. Drag & Drop.

Page 32: Kinect pour les développeurs Web

32

Exemple d’utilisation

Page 33: Kinect pour les développeurs Web

33

Disponible sur GitHub

Page 34: Kinect pour les développeurs Web

34

Démo.

Page 35: Kinect pour les développeurs Web

35 35

#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

Page 36: Kinect pour les développeurs Web

36

Des q

uest

ions

?