Over a million developers have joined DZone.

Kinect, Meet HTML5 and Canvas

DZone's Guide to

Kinect, Meet HTML5 and Canvas

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}