NOTE: This is preliminary software and/or hardware and APIs are preliminary and subject to change.
In my previous blog post, I show you how to display the color, depth and infrared streams of Kinect version 2 by transforming the raw binary data into Windows bitmaps.
This time, we’ll dive into the most essential part of Kinect: Body tracking.
The initial version of Kinect allowed us to track up to 21 body joints. The second version allows up to 25 joints. The new joints include the fists and thumbs! Moreover, due to the enhanced depth sensor, the tracking accuracy has been significantly improved. Experienced users will notice less jittering and much better stability. Once again, I would like to remind you of my video, which demonstrates the new body tracking capabilities:
Watch the video on YouTube
Next, we are going to implement body tracking and display all of the new joints on-screen. We’ll extend the project we created previously. You can download the source code here.
Extending the Project
In the previous blog post, we created a project with an
<Image> element for displaying the streams. We now need to add a
<Canvas> control for drawing the body. Here is the updated XAML code:
<Image Name="camera" />
<Canvas Name="canvas" />
We also added a reference to
Microsoft.Kinect namespace and initialized the sensor:
_sensor = KinectSensor.Default;
if (_sensor != null)
We also added a list of bodies, where all of the body/skeleton related data will be saved. If you have developed for Kinect version 1, you notice that the
Skeleton class has been replaced by the
MultiSourceFrameReader? This class gives us access on every stream, including the body stream! We simply need to let the sensor know that we need body tracking functionality by adding an additional parameter when initializing the reader:
_reader = _sensor.OpenMultiSourceFrameReader(FrameSourceTypes.Color |
_reader.MultiSourceFrameArrived += Reader_MultiSourceFrameArrived;
Reader_MultiSourceFrameArrived method will be called whenever a new frame is available. Let’s specify what will happen in terms of the body data:
- Get a reference to the body frame
- Check whether the body frame is
null – this is crucial
- Initialize the
- Call the
GetAndRefreshBodyData method, so as to copy the body data into the list
- Loop through the list of bodies and do awesome stuff!
Always remember to check for
null values. Kinect provides you with approximately 30 frames per second – anything could be
null or missing! Here is the code so far:
void Reader_MultiSourceFrameArrived(object sender, MultiSourceFrameArrivedEventArgs e)
var reference = e.FrameReference.AcquireFrame();
using (var frame = reference.BodyFrameReference.AcquireFrame())
if (frame != null)
_bodies = new Body[frame.BodyFrameSource.BodyCount];
foreach (var body in _bodies)
if (body != null)
This is it! We now have access to the bodies Kinect identifies. The next step is to display the skeleton information on-screen. Each body consists of 25 joints. The sensor provides us with the position (X, Y, Z) and the rotation information for each one of them. Moreover, Kinect lets us know whether the joints are tracked, hypothesized or not tracked. It’s a good practice to check whether a body is tracked before performing any critical functions. The following code illustrates how we can access the different body joints:
if (body != null)
Joint head = body.Joints[JointType.Head];
float x = head.Position.X;
float y = head.Position.Y;
float z = head.Position.Z;
The supported joints by Kinect 2 are the following:
Neck and thumbs are new joints added in the second version of Kinect.
Knowing the coordinates of every joint, we can now draw some objects using XAML and C#. However, Kinect provides a distance in millimeters, so we need to map the millimeters to screen pixels. In the attached project, I have made this mapping for you. So, the only method you need to call is the
DrawPoint or the
DrawLine. Here is the
public static void DrawPoint(this Canvas canvas, Joint joint)
if (joint.TrackingState == TrackingState.NotTracked) return;
joint = joint.ScaleTo(canvas.ActualWidth, canvas.ActualHeight);
Ellipse ellipse = new Ellipse
Width = 20,
Height = 20,
Fill = new SolidColorBrush(Colors.LightBlue)
Canvas.SetLeft(ellipse, joint.Position.X - ellipse.Width / 2);
Canvas.SetTop(ellipse, joint.Position.Y - ellipse.Height / 2);
Similarly, you can draw lines using the
Line object. Download the sample project and check by yourself.
Here is the end result you saw in the video:
Notice that the body joints are not perfectly aligned to the background image. Why? Because the color, infrared and depth sensors are not one above the other, so they have a slightly different point of view. You can use the coordinate mapper of the SDK and align them if necessary.
Body tracking was similarly done in the previous sensor. In the next blog post, we are going to see something totally new: facial expressions and hand states.