text: webpackJsonp([0x9a07ae61e1e],{434:function(n,a){n.exports={data:{markdownRemark:{html:'<p><strong>I’ve received many emails asking for help setting up the Xbox Kinect sensor to work with JavaScript so I decided to publish a complete guide. This will let anyone with a Microsoft Kinect develop JavaScript applications tracking full body movements and gestures in real-time.</strong></p>\n<h3 id="kinect-for-windows"><a href="#kinect-for-windows" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Kinect for Windows</h3>\n<p>It’s important to note that there are multiple versions of the Kinect sensor and not all of them are recognised by personal computers therefore couldn’t be used for JavaScript development.</p>\n<p>XBOX Kinect, first generation:\n<img src="http://www.webondevices.com/posts/kinect_v1.jpg" alt="Kinect v1"></p>\n<p>The first generation of the Kinect sensor introduced in 2010 was called <strong>Xbox 360 Kinect</strong> and was intended to be used with the Xbox 360 gaming console. Later, Microsoft released another version called Kinect for Windows. This sensor looked exactly the same but had improved features for kiosk and application development like Near Mode. The biggest difference is that the Kinect for Windows was licensed for commercial app distribution, and the 360 one is for development work only.</p>\n<p>Both of these sensors have a USB connector and are compatible with PCs so can be used for JavaScript development.</p>\n<p>Kinect for Windows, second generation:\n<img src="http://www.webondevices.com/posts/kinect_v2.jpg" alt="Kinect v2"></p>\n<p>In 2013 a new Kinect sensor was released with the <strong>XBOX One</strong> console as well as a new Kinect for Windows so both first generation sensors are now outdated. Unfortunately the XBOX One Kinect that comes with the console can no longer be used for development work like you can with the XBOX 360 Kinect.</p>\n<p>In case you have a first generation Kinect and you wish to develop JavaScript applications on a Macintosh, try using the <a href="http://zigfu.com/en/downloads/browserplugin/">Zigfu browser plugin</a>. I tried it with my Xbox 360 Kinect and it worked perfectly! Alternatively, on a Windows machine you can use the <a href="https://msdn.microsoft.com/en-us/library/dn435664.aspx">official JavaScript SDK</a>.</p>\n<p>In this introduction we will be dealing with the <strong>new generation of the Kinect for Windows sensor</strong>.</p>\n<h3 id="kinect-for-windows-v2"><a href="#kinect-for-windows-v2" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Kinect for Windows V2</h3>\n<p>XBOX and the Kinect are Microsoft products so it’s understandable that they want to restrict development to Windows PCs only. There are a few libraries like Libfreenect2 that, in theory, could enable Macs to work with the Kinect but they are not very reliable. I couldn’t get it working possibly due to <a href="https://github.com/OpenKinect/libfreenect2/issues/31">this issue</a>.</p>\n<p>From my experience after weeks and weeks of researching, testing and talking to at least a dozen developers, it seems that the most reliable way of working with the Kinect cross-platform, and with JavaScript most importantly, is this: Connect the Kinect to a Windows machine running Node.js and the Kinect2 library. This Node.js application on the Windows machine can receive the sensor data with no issues from the official SDK. From there we can <strong>publish and stream the data through web sockets to any other machine</strong>: Windows, Mac or Linux. So essentially we are only using the Windows machine as a low level server that reads pure data from the Kinect and publishes it for other computers to use and interpret.</p>\n<p><img src="http://www.webondevices.com/posts/kinect1.png" alt="Kinect v2 pointcloud"></p>\n<p>For the simple task of streaming data you probably don’t want to maintain a full desktop machine so I was looking at options to go as cheap and small as possible. It would be interesting to see if the new Raspberry PI 2 running Windows 10 IoT could handle this task? Or maybe one of these <a href="http://www.digitaltrends.com/computing/best-stick-pcs/">Stick PCs</a>?</p>\n<p>On the other hand you might just want to consider writing the whole application on that Windows machine as you already have the Node.js JavaScript environment set up. I personally don’t want to so we will definitely look into streaming the data over to my Macbook Pro.</p>\n<h3 id="installation"><a href="#installation" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installation</h3>\n<p>Let’s setup the Windows machine first, the one that is going to receive and handle the sensor data in the Node.js application. The reason why the Kinect 2 Node.js library we are going to use only works on Windows machines is that it relies on the official <strong>Kinect 2 SDK</strong> that can only be installed to Windows machines. Go ahead, and install it first from <a href="https://www.microsoft.com/en-us/download/details.aspx?id=44561">this page</a>. You might want to restart your machine after this step. Please also note that in order to install the SDK you will need a <strong>64bit Windows 8 or higher</strong>.</p>\n<p>Next, you need <strong>Node.js</strong> installed in the Windows command line. The official Windows Installer can be downloaded from <a href="https://nodejs.org/en/download/">nodejs.org</a>. If the installation was successful entering <code class="language-text">node -v</code> into the command line will give you the version number of Node installed. You need at least version 0.11.3 for the Kinect 2 module to work. The installation will depend on <strong>node-gyp</strong> so install that too: <code class="language-text">npm install -g node-gyp</code>.</p>\n<p>If that wasn’t enough, you will need to install <strong>Microsoft Visual Studio C++ 2013</strong> for Windows Desktops (<a href="http://www.microsoft.com/en-gb/download/details.aspx?id=44914">Express version</a> works too) and if you have a 64-bit build then the <a href="http://www.microsoft.com/en-us/download/details.aspx?id=8279">Windows 7 64-bit SDK</a>. Yes, even if you are not on Windows 7.</p>\n<p>After that you can type <code class="language-text">npm install kinect2</code> and the library will be installed to your machine...</p>\n<h3 id="reading-skeleton-data"><a href="#reading-skeleton-data" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reading skeleton data</h3>\n<p>Now that everything is installed, let’s test and extract the skeleton tracking data!</p>\n<p>Create a new folder and a new JavaScript file for your Kinect application. Name it output.js for instance. We need to start off this file by loading the Kinect 2 library and initialising it:</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> Kinect2 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'kinect2\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">var</span> kinect <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Kinect2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n      </div>\n<p>After that we power up the Kinect with the <code class="language-text">open()</code> method and test if it returned true in the same line which means that the start up was successful:</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span>kinect<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Kinect opened!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>Inside this if condition we can now add an asynchronous event listener that waits for the skeleton data to arrive:</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code class="language-javascript">kinect<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">\'bodyFrame\'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bodyFrame</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>  i <span class="token operator">&lt;</span> bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token keyword">if</span><span class="token punctuation">(</span>bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>tracked<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">//request body frames</span>\nkinect<span class="token punctuation">.</span><span class="token function">openBodyReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">//close the kinect after 1 minute</span>\n<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n    kinect<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Kinect Closed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n      </div>\n<p>Running this js file from the project folder with <code class="language-text">node output.js</code> will result in outputting the pure sensor data in a JSON format.</p>\n<p><img src="http://www.webondevices.com/posts/data.png" alt="Kinect v2 pointcloud"></p>\n<p>Here\'s the whole script in one, again:</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> Kinect2 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'kinect2\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">var</span> kinect <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Kinect2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">if</span><span class="token punctuation">(</span>kinect<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Kinect Opened"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token comment">//listen for body frames</span>\n    kinect<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">\'bodyFrame\'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">bodyFrame</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>  i <span class="token operator">&lt;</span> bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n            <span class="token keyword">if</span><span class="token punctuation">(</span>bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>tracked<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bodyFrame<span class="token punctuation">.</span>bodies<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span>\n        <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token comment">//request body frames</span>\n    kinect<span class="token punctuation">.</span><span class="token function">openBodyReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token comment">//close the kinect after 5 seconds</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n        kinect<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Kinect Closed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n      </div>\n<p>Now you have the Kinect 2 skeleton data available in Node.js and JavaScript!</p>\n<p>Next week I’m going to publish a new post in which we will carry on and:</p>\n<ul>\n<li>\n<p>Analyse the skeleton data and see what properties of the body can we extract from it</p>\n</li>\n<li>\n<p>Create a JavaScript web socket server on the Windows machine and stream the skeleton data for browsers running any operating system on any machine</p>\n</li>\n<li>\n<p>Connect to the web socket server from Chrome on a Macintosh and visualise the skeleton data with HTML and CSS</p>\n</li>\n<li>\n<p>Define and interpret gestures from the pure data and create a full screen photo gallery that can be swiped back and forth with arm movements</p>\n</li>\n</ul>\n<p>You can read the second part of this post here:</p>\n<p><a href="/xbox-kinect-2-javascript-gesture-tracking">XBOX Kinect 2 JavaScript gesture tracking</a></p>',timeToRead:6,excerpt:"I’ve received many emails asking for help setting up the Xbox Kinect sensor to work with JavaScript so I decided to publish a complete guide…",frontmatter:{title:"Get started with XBOX Kinect 2 JavaScript development",cover:"http://www.webondevices.com/posts/kinect1.png",date:"25/09/2015",category:"moar",tags:["javascript"]},fields:{slug:"/get-started-with-xbox-kinect-2-java-script-development"}}},pathContext:{slug:"/get-started-with-xbox-kinect-2-java-script-development"}}}});
  //# sourceMappingURL=path---get-started-with-xbox-kinect-2-javascript-development-5c22857e167e683965fc.js.map