使用 WebSocket 和 Canvas 的 Kinect 和 HTML5

更新（2013年12月10日）：想了解更多关于 WebSocket 的信息吗？请考虑我的新书，HTML5 WebSocket 编程入门。

Kinect 定义了自然用户交互。HTML5 重新定义了 Web。目前，有各种教程描述了如何使用 Windows Forms 或 WPF 作为用户界面与 Kinect 传感器进行交互。但是，如果使用 Web 界面来处理 Kinect 数据呢？为了结合这两种热门的前沿技术，我想出了一个漂亮且开源的解决方案，我将在本文中描述它。

我将使用官方的 Kinect SDK 进行演示，但同样的原理也适用于 OpenNI SDK。

• 下载源代码和示例

必备组件

• Windows 版 Kinect 或 XBOX 版 Kinect 传感器
• Microsoft Kinect SDK（或 OpenNI 替代方案）

结果

该项目包含两个子项目：一个使用 Kinect SDK 的服务器端应用程序，以及一个在 HTML5 canvas 上显示骨骼关节的客户端网页。

客户端应用程序

服务器应用程序

教程

以下是实现上述功能的步骤：

步骤 1：服务器应用程序

服务器应用程序的工作很简单：检测用户的关节，打包数据，并使用 web sockets 将数据发送给客户端。

为了检测关节的坐标，我们需要添加对首选 Kinect SDK 的引用，并处理骨骼事件。我建议使用 Microsoft SDK 而不是 OpenNI，因为它更简单。

static void Nui_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
{
    List users = new List();

    foreach (var user in e.SkeletonFrame.Skeletons)
    {
        if (user.TrackingState == SkeletonTrackingState.Tracked)
        {
            users.Add(user);
        }
    }

    if (users.Count > 0)
    {
        string json = users.Serialize();

        foreach (var socket in _sockets)
        {
            socket.Send(json);
        }
    }
}

为了将数据发送给订阅的客户端，我们需要以客户端能够理解和处理的方式“打包”关节的坐标。我决定以 JSON 格式编码坐标，因为 JSON 是一种轻量级且易于理解的通过 Web 传输数据的方式。您可以在源代码文件中找到 JSON 编码器类。

考虑到数据传输，我强烈建议使用 Fleck。Fleck 基于 Nugget，是一个 C# web socket 库，它以最少的配置工作实现其功能：它使用轻量级 web sockets 将所需数据广播给订阅的客户端。以下是如何初始化 web socket 服务器：

_sockets = new List();

var server = new WebSocketServer("ws://:8181");

server.Start(socket =>
{
    socket.OnOpen = () =>
    {
        Console.WriteLine("Connected to " + socket.ConnectionInfo.ClientIpAddress);
        _sockets.Add(socket);
    };
    socket.OnClose = () =>
    {
        Console.WriteLine("Disconnected from " + socket.ConnectionInfo.ClientIpAddress);
        _sockets.Remove(socket);
    };
    socket.OnMessage = message =>
    {
        Console.WriteLine(message);
    };
});

在收集、打包和传输数据后，客户端现在可以相应地使用和处理它们。

步骤 2：客户端应用程序

现在开始处理 HTML5 部分！我们已经设置好了服务器，所以让我们添加网页客户端。HTML5 规范建议支持 web socket，目前由 Internet Explorer 10、Google Chrome 和 Mozilla Firefox 实现。Web sockets 非常适合服务器和客户端之间的直接消息通信。

我们所需要的只是一些 JavaScript 来接收服务器数据，以及一个 canvas 来绘制点。以下是 JavaScript 事件处理程序，用于获取数据并将关节绘制到 <canvas> 元素

socket.onmessage = function (evt) {
    status.innerHTML = "Kinect data received.";

    // Get the data in JSON format.
    var jsonObject = eval('(' + evt.data + ')');

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#FF0000";
    context.beginPath();

    // Display the skeleton joints.
    for (var i = 0; i < jsonObject.skeletons.length; i++) {
        for (var j = 0; j < jsonObject.skeletons[ i ].joints.length; j++) {
            var joint = jsonObject.skeletons[ i ].joints[ j ];

            // Draw!!!
            context.arc(parseFloat(joint.x), parseFloat(joint.y), 
			10, 0, Math.PI * 2, true);
        }
    }

    context.closePath();
    context.fill();
};

步骤 3：混合起来！

现在运行服务器应用程序，然后在 Internet Explorer 10 或 Google Chrome 中打开 HTML 文件。站在 Kinect 传感器前，愿原力与你同在。

常见问题解答

• 我真的需要服务器应用程序吗？ 是的。您无法直接从浏览器运行 Kinect SDK。JavaScript 无法访问您的硬件。服务器应用程序只是一个 Visual Studio 控制台项目！
• 我需要将我的数据打包成 JSON 吗？ 不。您可以使用任何您喜欢的格式。JSON 是一种用于传输数据的常用格式，尤其是在文件大小很重要时。您可以使用 XML 或任何其他自定义格式，但 JSON 是轻量级的，不需要自定义解析器。毕竟，JSON 是 JavaScript 的子集，因此 JavaScript 可以直接处理它。
• 为什么不使用 WCF 代替 web sockets？ 因为它更难。使用 web sockets，可以在服务器事件发生后发送消息。而且它更容易！

下载次数

您肯定需要下载源代码和二进制文件才能开发自己的 HTML5 Kinect 应用程序。尽情享受吧！