Over a million developers have joined DZone.

Kinect, Meet HTML5 and Canvas

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

It's hard not to be impressed with innovative developments in applying Kinect technology for a range of new uses.  HTML5 developers should be excited to read Vangos Pterneas's recent blog post detailing his attempt to connect the Kinect to HTML5 using Websockets and Canvas.  Pterneas used web sockets  in the server to detect users' joints, pack data, and then send to the client.  He used Canvas on an HTML5 client with socket support (currently used by IE 10, Chrome, and Firefox) in order to promote duplex communication with the Kinect.

The source code and binaries can be downloaded here, and and Pterneas has provided potential users with an informative FAQ:

    •    Do I really need a server application? Yes. You can't run the Kinect SDK directly from your browser. JavaScript cannot access your hardware. The server app is nothing but a Visual Studio Console project!
    •    Do I need to pack my data to JSON? No. You can use any format you'd like. JSON is a common format for transmitting data, especially when file size matters. You could use XML or any other custom format, but JSON is lightweight and needs no custom parser. After all, JSON is a subset of JavaScript, so JavaScript can handle it directly.
    •    Why not using WCF instead of web sockets? Because it's tougher. Using web sockets, messages can be sent after a server event occurs. And it's a lot easier!

You can also get some help on using HTML5 and Canvas from this 5-minute tutorial

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}