Kinect

Kinect 4 Windows V2 – in the browser

For the older Kinect v1.0 there was a sample included with the Kinect SDK which provided browser compatibility. The general idea is that the Kinect SDK can be used to retrieve the various Kinect data streams i.e., the RGB stream, body tracking data, etc. and from within a console or desktop app a webserver serves up that data for consumption over localhost by a web app running in the browser. This opens up compatibility with various javascript frameworks such as Babylon.js (another option might be to run inside a Windows Store javascript app). The official sample is pretty comprehensive so I thought it might be useful to have something simpler to hand. Anyway, after a bit of searching around I found a few examples for v1.0 but nothing with v2.0 support so I decided to hack one together. This might come in handy at the London Kinect Hackathon on 21st and 22nd March REGISTER here.

I used SuperWebSocket from within a .NET console app to retrieve the Kinect data and broadcast it to any connected web sockets. The socket server code is simple:

color

I used a canvas to render the results in the browser – this shows the response to the web app receiving a web socket message:

body

Code is here https://github.com/peted70/kinectv2-webserver

Tagged , , , , ,

8 thoughts on “Kinect 4 Windows V2 – in the browser

  1. Hi there,

    Great job you did! and thanks for sharing.
    Working with your code help me a lot to start.
    But i found a bug, that i manage to make a dirty fix when working with multiplayer.
    Somehow if are more users on the field.
    The server send the same positions for all of them. I think you have a better way to do this but. What i did was to clean and populate new points for each one. While saving it and increment on a string text file.

    here is my changes
    On the server (SerialiseBodyData)


    private static string SerialiseBodyData() {
    trackedBodies = bodies.Where(b => b.IsTracked == true).ToList();
    if (trackedBodies.Count() < 1)
    return null;

    bodyTransferData.Clear();

    var txt = "";
    for (var t = 0; t j.Value).Select(p => p.Position).ToArray();
    ks.CoordinateMapper.MapCameraPointsToColorSpace(list, colorTempPoints);
    bodyTransferData.Add(colorTempPoints);
    var str = JsonConvert.SerializeObject(bodyTransferData).ToString();
    //remove first and last string else we will have problems on the client json file
    str = str.Remove(0, 1);
    str = str.Remove(str.Length - 1);
    if (t==0)
    txt += str;
    else
    txt += ","+ str;

    }
    //fix json file and send
    txt = "[" + txt + "]";
    return txt.ToString();

    }

    Hope it helps other people ho are trying to do the same.
    If you have a better solution let me know

  2. Sorry on my last post i have deleted few lines more 😉
    Here is again the code

    private static string SerialiseBodyData()
    {

    trackedBodies = bodies.Where(b => b.IsTracked == true).ToList();
    if (trackedBodies.Count() < 1)
    return null;

    var txt = "";
    for (var t = 0; t j.Value).Select(p => p.Position).ToArray();
    ks.CoordinateMapper.MapCameraPointsToColorSpace(list, colorTempPoints);
    bodyTransferData.Add(colorTempPoints);

    var str = JsonConvert.SerializeObject(bodyTransferData).ToString();
    str = str.Remove(0, 1);
    str = str.Remove(str.Length – 1);

    if (t==0)
    txt += str;
    else
    txt += “,”+ str;
    }

    txt = “[” + txt + “]”;
    return txt.ToString();
    }

  3. Just to be clarified, your project is collecting kinect data from the server side or the client side?

    I am searching about how I could read kinect sensor client-side only. At first sight I thought you did it, but looking at the code I think you created a webservice to send the data for the browser rendering only is that right?

    1. It is using a websocket connection with the websocket server running on the client computer. Can you give more details about ‘read kinect sensor client-side only’ – what are you trying to do?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.