本文使用JavaScript版本在浏览器中实现一个超时按钮，为方便测试，我使用鼠标指针来模拟Kinect关节，接入Kinect数据后，只需将手部关节坐标替换进来即可。

首先看超时按钮的UML状态图：

主状态机中有STATE_Normal、STATE_PointIn、STATE_PointOut三个状态，其中后面两个作为子状态机存在，他们内部分别含有3个状态：激活/非激活开始状态、正在激活/非激活状态、已激活/非激活状态。

设计 正在激活/非激活状态 是为了配合相应动画机制，如经典的按钮注水、按钮转满一周等计时方式。

事件方面支持UserLeave、PointIn、PointOut，以及MultiActive（多次连续激活）。

MultiActive机制可以很方便的实现 保持按住按钮，系统会周期触发某个事件。

源码中分为以下几个部分：

1、首先定义了各种常量：状态名称、事件名称、属性名称：

var timeoutButton_const_def = { … };

2、定义数据模型Model实现类：

var TimeoutButton_Model = { … };

在Model中定义各种属性，如激活时间、指针是否在对象可视范围内、计时器开始和结束。

3、定义各个子状态机、状态的实现类，他们分别继承自qfStateMachine/qfState基类，并实现doAction()事件：

var State_Normal = { … };

var STATE_PointIn = { … };

var STATE_PointOut = { … };

var STATE_Active_start = { … };

var STATE_Activing = { … };

var STATE_Actived = { … };

var STATE_DeActive_start = {… };

var STATE_DeActiving = { … };

var STATE_DeActived = { … };

4、定义了主逻辑状态机，继承自qfFsmLogic基类：

var timeoutButton_Logic = { … };

其中核心方法为状态机初始化函数（initTimeoutButtonMachine()成员函数），包含三个方面：

1）设置状态机环境变量，此处只设置数据模型Model，以便各个状态获取数据属性。

2）实例化各个子状态机、状态，并绑定到各自父状态机中。

3）配置状态转移规则，这里完成对UML状态图的描述翻译。

5、实例化主逻辑状态机，并调用他的start()方法：

var timeoutButton = timeoutButton_Logic.createNewInstance();

timeoutButton.start();

6、绑定mouseover、mouseout事件，完成OnTimer()函数，将来的Kinect数据获取也是一个周期性事件，直接放在此处即可。

7、最后是界面的Html代码，其中包含一个多次激活标志checkbox、还有一个支持超时激活的按钮（DIV实现），如下图：

其中Current State为状态机当前状态，可以实时看到状态转移过程。

实现DEMO展示Url：qfFSM_for_javascript_kinect_timeoutButton

源代码右键查看即可。

qfFSM各版本源码下载：http://www.YuYuYouEr.cn/blog/?p=290

直接切入正题吧，首先您得下载体感浏览器，这是一个zip包，解压即可，您需要掌握的基本技能：JavaScript、HTML、HTML5 Canvas。

体感浏览器目前发布在国内最大的体感开发社区cnKinect.com首页，体感浏览器目前有两个版本，分别支持微软MS Kinect SDK和开源OpenNI SDK，确保您的机器已经安装好相应的SDK驱动。

对于运行在体感浏览器中的Web应用来说，并不需要关心底层SDK驱动类型，Web应用主要使用我们提供的JavaScript API来获取Kinect识别结果，目前浏览器在启动时默认会打开体感硬件（请先将硬件接入PC，这里将来会完善，做到即插即用）。

体感浏览器启动后，默认会打开cnKinect.com中app页面，目前我们编写的Web体感应用都发布在这里，如果您有博客空间，那么可以将编写的Web体感应用发布在自己的站点，给提供朋友一个url即可，他们便可体验您完成的酷炫效果。

OK，接下来发一张图片，是目前我最满意的Web体感应用：体感浏览器版-捕鱼达人截图(由原HTML5版捕鱼达人移植而来,感谢捕鱼达人团队，他们编写了这个很难酷的游戏)。

www.YuYuYouEr.cn

以捕鱼达人为例(URL：http://app.cnkinect.com/fishjoy/)，在体感浏览器加载完成之后，玩家站在kinect视野内，将看到一个绿色人影，此时，玩家将左手或右手从胸前推出，游戏中将发射一枚渔网，您技术够好的话，也能像我一样逮到两条大家伙。

接下来介绍如何开发一款可以运行在体感浏览器中的Web体感应用。

首先要明确体感浏览器也是一款标准的Web浏览器，可以用他打开baidu，google这些网站，体感浏览器内核为Webkit，对HTML5支持相当好，上图中小绿人便是用HTML5中Canvas绘制得到。

体感浏览器发布的zip包中包含有ReadMe.txt，其中介绍了主要的目录结构：

目录结构说明：————————
cnkinect_broswer/cnkinect_broswer.exe：浏览器主程序。
sample/api/api.js：提供一个基本的javascript函数来获取骨骼数据。
sample/example_kinect_javascript：基本示例，打开体感浏览器后，拖进去就ok，最新版本新增加视频、深度数据流，内部非常简单。

体感浏览器提供3条API，分别对应Kinect3中基本数据流，如下：

qfKinectGetSkeletonData()函数获取kinect骨骼节点数据，目前仅提供一名用户节点数据；
qfKinectGetVideoData()函数获取kinect视频数据；
qfKinectGetDepthData()函数获取kinect深度数据；

API函数说明：

1、qfKinectGetSkeletonData()函数返回一个JSON格式字符串，可以使用JQuery、eval，或者第三方JSON解析库转为JavaScript对象，如下：

function deal_Skeleton()  {

var strJsonSkl = qfKinectGetSkeletonData();
if (strJsonSkl == null || strJsonSkl == “”) { return ; }

var skl = eval( “(” + strJsonSkl + “)” );

//下面以获取右手坐标x,y,z分量为例，单位为米
skl["hand_right"].x;      //ok，各位coding大仙可以用这个数据天马行空一番了
skl["hand_right"].y;      //ok，您现在知道玩家右手的高度了，请继续天马，继续行空
skl["hand_right"].z;       //ok，z即是用户右手相对kinect的距离， 捕鱼达人前推动作判定，小z功不可没

}

2、视频数据、深度图数据结构非常简单，首先你看视频数据：

//获取得到VideoData，再获取HTML5中Canvas对象的context，直接putImageData()即可
var kinectVideo = qfKinectGetVideoData();
var context = canvas.getContext(’2d’);
context.putImageData(kinectVideo, 0, 0, 0, 0, 640, 480);

不会使用Canvas的同学可以搜索“Canvas”，查看相关资料，非常简单。
w3school中也有相关科普教材：http://www.w3school.com.cn/html5/html5_canvas.asp

3、深度数据与上述Video数据类似，演示一下显示绿色小人代码，说明如何处理深度数据：

首先你需要知道深度原始数据是到kinect的距离，单位毫米，体感浏览器得到的为32位整形，长度4个字节，低3位存放UserID，
SDK驱动中通过C语言得到的深度为2字节。

var kinectDepth = qfKinectGetDepthData();
var size = kinectDepth.width * kinectDepth.height * 4;
for (var i=0; i<size; i+=4) {

//遍历每个深度数据项，判断UserID，如果为0则令此像素透明，否则不透明并显示为绿色调
//这样小绿人就抠出来了
if (0 != (kinectDepth.data[i+0] & 0×07)) {  //判断UserID

kinectDepth.data[i+3] = 255;    //绿色分量最大
kinectDepth.data[i+1] = 255;    //完全不透明

}
else {

kinectDepth.data[i+3] = 0;   //完全透明

}

}

OK，科普完毕，如果大家折腾的过程中有需要讨论的地方，欢迎在群中找我，我是YuYuYouEr；

我的EMail：YuYuYouEr@qq.com
我的博客：http://www.YuYuYouEr.cn

最后附上 捕鱼达人视频、骨骼视频深度数据测试视频：

本文也发布在 KTU – Kinect体感开发者协作博客，标题为《chrome体感浏览器详细使用过程》，

KTU博客文章质量相当高，值得kinect研发者细看一番。