Kinect pour les développeurs Web

1

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

3 3

Génial, un nouveau projet !

Un site web.

Une application Kinect.

4

Microsoft Kinect

5 5

V2

•  Sortie en juillet 2014 •  Enfin un SDK Windows !

•  Sortie en novembre 2010 •  « Hacké » pour Windows

V1 Kinect n’est pas nouveau !

6 6

Les possibilités du SDK

7

Le choix multiplateforme.

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

Je commence mes recherches

10

Enormément de ressources sur la v1

11

1 article Hello World

12

Comment on code une interaction ?

Hold gesture.

13

Documentation Microsoft

14

Ok… c’est pas clair…

Comment on l’utilise ?

15

Je continue mes recherches…

16 16

Ça fait une journée que je cherche…

17

Finalement, le forum Microsoft

18

Eureka !

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

19

FAIL!

20

DO IT YOURSELF !

21

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

Quelles données on reçoit ?

22

x6 utilisateurs

23 23

Toutes les 33 millisecondes !

24

Implémentation de mon API

25

1er parti-pris.

Isoler un seul utilisateur.

26 26

27 27

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

28 28

var body = trackBodyOn(0 . 5 , 0 . 2 , 1 . 0 , 0. 1);

0.5 = 50%

1 mètre

29 29

2e parti-pris.

(Droite ou Gauche)

Interaction avec une seule main

30

Exemple d’utilisation

31 31

3e parti-pris. Drag & Drop.

32

Exemple d’utilisation

33

Disponible sur GitHub

34

Démo.

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

36

Des q

uest

ions

?