KinectJS

Kinect plus Javascript

_VERSION++

23 / 02 / 2012 - Initial Release

alert("The frustum is set");

KinectJS, (aspiring to) bring motion controls to HTML5.
:: Download Here
:: Try the Demos
:: Documentation ( work in progress)
:: Youtube Videos

Videos

while(all[FEATURES--])

Provide motion tracking for up to 2 people at the same time
20 joints tracked for each skeleton, and two extra parameters of data (height, joints length etc)
Stream RGB (640x380) and Depth data (320x240), even simultaneously
Control the motor through JS
Take snapshots and save them locally
Predefined gestures (swipe, jump, escape etc)
Listening for specific URL calls, one can for example use his cellphone that way as an extra controller
Cursor object
The ability to track joints, relative to the player's body, or absolute to Kinect's Field of View.
Modal and notifications plugins
Framework agnostic ( does not have any external dependencies )
Chrome and Firefox support

Demos.play(function() {

List of Demos explained (Work in progress)

Nokia WebGl maps - Original :: Video tracking( left hand, right hand ). Gestures( hands_dist, body_angle, escape )
FastKat - Original :: Video tracking( head, right hand ). Gestures( escape )
Air Hockey - Original :: Video traking( left hand, right hand, head ). Gestures( escape ), 2 player enabled
WebGL Cars - Original :: Video tracking( head ). Gestures( hands_dist, foot_lean, escape )
Theremin - tracking( left hand, right hand ). Gestures( escape )
Pong - Original :: Video tracking( left hand, right hand ). Gestures( hands_dist, body_angle, escape ), 2 player enabled
Tunnel Game - Original :: tracking( left hand, right hand ). Gestures( hands_dist, body_angle, escape )
Stream Demo - none
Image Gallery / Menu - tracking( left hand, right hand ). Gestures( hands_dist, swipe, escape )
DuckHunt - Original :: Video tracking( right hand, "cellphone controls" ). Gestures( escape )
Impress - Original :: Video tracking( none ). Gestures( swipe )

Many thanks to the awesome people who created most of the above examples, and for being kind, supportive and letting this project use their work. Thank you!

Bubbles.HOW_TO[USE];

Requirements

i. Kinect SDK 1.0 OR Kinect SDK BETA 2
ii. A compatible browser (Chrome 15+ / Firefox 10+)

Installation

After having installed the drivers drivers succesfully (and you can confirm that the kinect works by running the included Microsoft's demos) run and install KinectSocketServer.exe.

Once that is done, load the KinectSockerServer, the kinect should do a full-vertical scan movement and you should see your network addresses in the main textarea. If that does not happen then something has gone astray and please make sure that you followed the steps correctly or reach me at pkalogiros [AT] live.com

Next, run one of the demos (use this link, or the demos from your localhost) and input your IP address and port as specified in the KinectSocketServer's main window. If the kinect is installed in the same system as your browser, then only the port is required (not the full address) since it will default to localhost.
(This is still a work in progress so things are bound to change a bit)

Technology / Open Source

The client/browser side code is written exclusively in Javascript, and the KinectSocketServer app, in Adobe AIR. Currently, the Javascript Framework is (open source, mit licensed) available with fully commented code and a couple of examples to get you started. The Actionscript/Adobe AIR code is not currently available - but it will be soon, as I am currently in the process of refactoring and cleaning up the (too messy) code so that something good can perhaps come actually from it.

Also, the adobe AIR side, utilizes AIRKinect as the Adobe AIR - MS SDK link. Check it out, the development team has done an amazing job.

Bits & Links

Development will be continued, and as you may have noticed, this page and the documentation are still in progress. Please do not hesitate to contact me at pkalogiros[ AT ]live.com with questions, suggestions, bug reports, anything really.