1

Kinect pour les développeurs Web.

22

Qui suis je ?

Développeur Front End

#JavaScript #Angular #React #Cordova #Gulp/Grunt #Sass #Ionic

@MeKimak @NewsDuFront

Mickael Dumand

33

Génial, un nouveau projet !

Un site web.

Une application Kinect.

4

Microsoft Kinect

55

V2

• Sortie en juillet 2014• Enfin un SDK Windows !

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

V1 Kinect n’est pas nouveau !

66

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 apparencescette 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…

1616

Ç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

2323

Toutes les 33 millisecondes !

24

Implémentation de mon API

25

1er parti-pris.

Isoler un seul utilisateur.

2626

2727

var body = trackBodyOn( x, xDepth, z ,

zDepth);

2828

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

0. 1);

0.5 = 50%

1 mètre

2929

2e parti-pris.

(Droite ou Gauche)

Interaction avec une seule main

30

Exemple d’utilisation

3131

3e parti-pris. Drag & Drop.

32

Exemple d’utilisation

33

Disponible sur GitHub

3434

Démo.

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

36

Des

ques

tion

s ?