一种面向移动终端的WEB微手势识别∗

罗先录 张永棠

1 引言

随着移动应用的发展，消费者已经不再满足于点按的交互方式。而当手势识别技术被应用到移动端时，成本大小和便捷与否就应该被优先考虑［1～2］。从数据的采集方式考虑，传统的采用数据手套等的方式由于成本较高以及使用时的不便，所以并不适用于移动平台。而Kinect等三维信息采集设备虽然具有极大的发展前景［3～4］，但就目前来说，并不适合用在移动平台上。由此，本文所介绍的系统只使用移动设备自带的网络摄像头获取视频信息。

当前市场上的移动平台主要有苹果和安卓这两大系统，在开发过程中必须考虑不同系统的应用［5］。所以，为了使系统具备跨平台工作的能力，本系统以移动WEB应用的方式进行实现。它将与运行的移动平台无关，切实解决平台局限性问题。

此外，现有手势识别往往会忽略了对于较小动作手势的识别，这也是本系统所重视的问题之一。

2 识别流程及关键技术

2.1 识别流程

基于移动WEB的微手势识别的流程如图1所示。首先通过网络摄像头获取手势图像；再使用已经训练完成的分类器，通过objectdetect.js对获取的图像进行对手掌区域的位置确定；然后根据手掌域位置的确定，获得手指域位置；接着根据YCrCb颜色空间的肤色模型［6］，对图像进行二值化处理，而后再经过一定的形态学处理，去除一定噪声；最后对已分割出的图像，采取微手势识别算法，提取出其中的手掌与手指重心，解析手势信息。

图1 微手势设别的流程

本文的目标图像为手掌图像，通过对手掌域的定位，获取手势的大致位置。在大致位置的确定之后，后续的图像处理工作将被定在这块区域内。这样不仅排除了非手势区域的干扰信息，并且大大加快了处理速度，提高了系统的工作效率。

2.2 关键技术

2.2.1 肤色分割

相对RGB，YCrCb颜色空间可以将色度和亮度分离，从而在肤色分割的过程中降低亮度的干扰。用Y表示亮度，Cr表示红色分量，Cb表示蓝色分量。肤色分割必须满足两个条件：

（1）将彩色图像的像素点P由RGB空间转换为YCrCb空间［7］。RGB 向 YCrCb的转换公式如式（1）：

（2）根据像素点P的Cr和Cb的值满足133≤Cr≤173且77≤Cb≤127，那么该点可以被判断为肤色点，否则不是。

根据这个标准，肤色区域像素点的灰度值被设为255，非肤色区域像素点的灰度值被设为0，生成肤色二值图像。

2.2.2 手指识别

手指识别的作用在于对所得的手势图像进行解析，获得其所表达的手势信息。它是整个流程中最重要的部分。本系统的检测部分属于机器学习类算法。整个过程包括悬停判断，肤色区域编号，轮廓统计，重心相对位置计算，手势信息确定。其中，重心相对法利用手掌域重心，手指域重心的相对位置，判断手指相对于手掌的运动情况，再结合手指域重心的前后两者变化，从而解析出手势信息。

3 手势识别算法的研究

本系统的重点在于对手指的识别与追踪，需要具有一定的高效、实时性。

3.1 算法流程

算法流程图2所示。

图2 算法流程

3.2 算法实现

3.2.1 获取手掌域重心

在处理过的肤色二值图像中，肤色像素的灰度被设置为255。这意味着手掌域内的肤色像素的坐标点已经被确定，然后手掌域的重心可以根据下方的公式算出。

其中，C(x ,y)为重心坐标，Pi(x)为肤色像素点的横坐标，Pi(y)为肤色像素点的纵坐标，N为肤色像素点的总数目。

3.2.2 悬停判断

WEB端的手势识别，在追求高效、实时性的同时，会失去相应的准确性，为了达到效率与精度的相平衡，采用了一种悬停判断的方法［8］。此方法的前提是手掌域的图像已经被识别，且手掌域重心已经被获取到。将此时手掌重心的坐标记为(x0,y0)。随着时间推移，视频的每一帧的重心坐标可以组成一个序列，即(xi,yi) ，i=0，1，…，50。若其中有30个坐标处于(x0,y0)的邻域内，则该手势在这个位置保持了一定时间。它所代表的含义即为“选中，执行下一步操作”。

3.2.3 肤色区域编号

在经过肤色二值化操作后，肤色像素在图中呈区域的形态。为了有效地处理其中的肤色信息，系统对肤色像素区域进行编码，从中提取出所需要的区域，并排除不需要的区域［9］。编码过程的大体准则为：首先初始化整个手势图像的值；接着按照从左到右、从上到下的方式对肤色像素区域进行编码。

1）初始化编号值

图像区域如图3所示：其中Total为整个图像区域；Pre为事先获得的手势图像区域；Ext为将手势图像区域边界延伸2个像素大小所得的图像区域。

图3 区域示意图

图像初始化是将Ext区域内的所有像素点的编号值初始化为0，如图4所示：其中黑色边框为Pre区域，灰色框代表肤色像素点，白色框代表非肤色像素点。

图4 编码初始化

2）编号方法

如图所示，整个编码过程依照从左到右、从上到下的原则进行。假设肤色点的坐标为（x，y），码值为num。系统需要判定（x-1，y），（x-1，y-1），（x，y-1）和（x+1，y-1）这四个点是否已被更改编码：若四个点的码值都是0，则认定该像素点所处区域未被重新编码，然后将当前点的码值重新赋值为num=num+1；若其中至少有一个点被重新编号，则当前点的值应被赋值为那个被重新编号的码值。根据以上原则，如图4中所示，首先遇到的肤色像素点为P点，当前num=0。因为P点四个方向上的点编号值均为0，故P点的编号值应为num=num+1，即为1。同理，对于图中Q点，系统需判定Q点的左前方、左上方、上方、友上方四个点是否被重新编号，由于P点为Q点的左前方点，又因为P点已被重新编号为1，那么Q点的编号值应与P点的编号值相同，即仍为1；最终，图4中肤色区域编码后的结果如图5。

图5 编码结果

3.2.4 轮廓统计

由于肤色分割存在一定缺陷，肤色相近的颜色也误认为是肤色。因此，在对不同区域的肤色采用不同的数字进行编码之后，还要将其经过肤色二值化处理，并通过轮廓统计筛选出系统所需要的肤色轮廓，去除图像中存在的噪声干扰区域。具体步骤如下：

首先获得手掌区域的外围轮廓（如图6（a）），然后对手掌轮廓按轮廓点的按照顺时针的方向进行定长扫描［10］。如图6（b）所示，扫描轮廓起点a与终点b两者连线ab的长度为Dab，扫描轮廓点P到ab垂线的长度为Dp。为了排除过大或过小的干扰区域，我们设置了相应的最小门阈值ε，将满足式（3）的点设为手指指尖的候选点。

图6（b）手指P、G、Q三个候选点扫描后，计算出轮廓点的ratio值如图6（c）的曲线3个波峰所示。X轴为轮廓点索引值，Y轴为各轮廓点处的ratio值。同时，参考ab两个端点连线的矩形范围，判断其是否为肤色区域。若为肤色区域，则判定P为指尖点，否则P为非指尖点。

图6 基于轮廓统计的手指检测

3.2.5 重心相对位置识别法

经过轮廓统计，已经可以得出手指区域。与手掌域重心的获取一样，系统采用肤色二值图像方法获取手指域重心坐标，并将手指重心点抽象出来，如图7所示。其中“状态一”指“手部运动开始前且通过悬浮判定成功获取重心坐标的状态”，“状态二”指“手部运动结束后且通过悬浮判定成功获取重心坐标的状态”。

图7 手部运动状态

3.2.6 算法具体实现方法

1）构建重心坐标三角形

过掌心A点做一条垂线L，过手指重心B点做L的垂线L′且两条线交于点C，得∠ABC，记A角度数为 θ 。同理可得 ∠A′B′C′，记 A′角度数为 θ′。如图8所示。

图8 手部运动状态形式化

（2）计算手指长度

在手指域部分，假设手指区域纵坐标最小点为E，纵坐标最大点为F，分别过E、F点做水平线，记水平线间距为d，如图9所示。手指分为伸长和弯曲情况，弯曲情况下的手指长度大体为伸长情况下的二分之一。故根据这一点，假设状态一的手指长度为d1，状态二的手指长度为d2，max为d1、d2中的较大者，设m= ||d1-d2。

图9 手指弯曲

若m≥0.4max，则认为手指前后发生了弯曲动作；若m＜0.4max，则认为手指未进行弯曲动作，此时，系统需要从角度变化方面入手来解析手指的运动信息。

3）计算角θ、θ′

通过事先构建的坐标三角形，系统可以利用三角信息计算出相应的夹角。假设A点坐标为(x1,y1)，B点坐标为(x2,y2)，C点坐标为(x1,y2)，由此可得：

同理可得θ′。

若 ||θ-θ′≤10，则认为手指前后未进行左右摆动，并且事先已知手指前后长度未改变，此时可认为手部微小动作前后未发生改变。

当 ||θ-θ′＞10，若θ＞θ′，则认为手指部分进行了向右的摆动运动；若θ＜θ′，则认为手指部分进行了向左的摆动运动。

综上，系统得到了手指的4个运动情况：弯曲、保持、向左和向右。然后系统将手指的4个动作与手掌部重心坐标相结合起来，就可以解析出多种事先定义的手势信息。

4 实验分析

图像采集基于Google提出的Web RTC框架，它基于HTML5标准，使用JavaScript API来实现对摄像头的调用和浏览器的无插件视频播放［11］。对于网络摄像头所获取的视频信息，系统利用＜canvas＞获取视频的每一帧图像，用来检测视频中的手势。而在对视频中的手势进行检测和定位时，系统采用开源项目objectdetect.js来实现。

为了验证该手势识别研究的有效性，我们选取了200组肤色不同、大小不同、手形不同的手势图像。分别对10种不同的静态手势（如图10中的a至j所示），每个手势进行了1000次微手势识别实验，验证其对不同的手势图像的识别成功率。实验结果如表1所示。

图10 十种不同的静态手势

表1 识别结果统计

测得各个手势的正确率都在90%以上，由于图像扫描及程序运行等因素的影响，各分组的平均耗时略有差异，但是都控制在小于180ms的极小时间范围之内。说明了本文研究微手势识别方法在移动移动平台设备上有一定的实时性和准确性。

5 结语

本系统通过网络摄像头获取手势视频，使用基于Haar特征的级联分类器定位手掌位置，再通过肤色分割、形态学处理等方法获取手部图像，然后根据手掌和手指的信息分析获得当前手势所代表的命令。系统从数据采集到获取命令的整个过程，都体现了低成本、高便捷性等特点，对于移动设备具有较好的适用性。

［1］蒲兴成，王涛，张毅.基于改进Hu矩算法的Kinect手势识别［J］.计算机工程，2016，42（7）：165-172.

PU Xingcheng，WANG Tao，ZHANG Yi.Kinect Gesture Recognition Based on Improved Hu Moment Algorithm［J］.Computer Engineering，2016，42（7）：165-172.

［2］黄振翔，彭波，吴娟.基于DTW与混合判别特征检测器的手势识别［J］.计算机工程，2014，40（5）：216-219.

HUANG Zhenxian，PENG Bo，WU Juan.Gesture Recognition Based on DTW and Combined Discriminative Feature Detector［J］.Computer Engineering，2014，40（5）：216-219.

［3］吴江梅，张瑜慧，孙莹，等.一种基于单目视觉的人手检测与识别方法［J］.计算机与数字工程，2014，42（7）：1251-1253.

WU Jiangmei，GHANG Yuhui，SUN Ying，et al.A Hand Gesture Detection and Recognition Method Based on Monocular Vision［J］.Computer&Digital Engineering，2014，42（7）：1251-1253.

［4］张永棠.一种高精度TR-UWB系统同步算法［J］.四川理工学院学报（自然科学版），2016，29（3）：19-22.

ZHANG Yongtang.A High-precision Synchronization Algorithm TR-UWBSystem［J］.Journal of Sichuan University of Science&Engineering（Natural Science Edition），2016，29（3）：19-22.

［5］邱丽萍.指纹图像识别技术新思路与实验研究［J］.计算机与数字工程，2017，45（3）：540-543.

QIU Liping.New Idea and Experimental Study of Fingerprint Identification Technology［J］.Computer&Digital Engineering，2017，45（3）：540-543.

［6］张军，张孔，杨正领.基于计算机视觉的多特征手势识别［J］.计算机应用与软件，2016，33（6）：151-155.

ZHANG Jun，ZHANG Kong，YANG Zhengling.Computer Vision-Based Recognition of Hand Gesture with Multiple Features［J］.Computer Applications and Software，2016，33（6）：51-155.

［7］Gupta S，Jaafar J，Ahmad W F W.Static Hand Gesture Recognition Using Local Gabor Filter［J］.Procedia Engineering，2012，33（5）：827-832.

［8］Hasan H，Abdul-Kareem S.Static Hand Gesture Recognition Using Neural Networks［J］.Artificial Intelligence Review，2014，41（11）：147-181.

［9］Shaik K B，Ganesan P，Kalist V，et al.Comparative Study of Skin Color Detection and Segmentation in HSV and YCbCr Color Space［J］.Procedia Computer Science，2015，57（10）：41-48.

［10］Jaeger S，Warble A.Online handwriting recognition：the Pen recognizer［J］.IJDAR，2011（3）：169-180.

［11］Sargur N.On-Line and Off-Line Handwriting Recognition：A Comprehensive Survey［J］.IEEE Transactions On Pattern Analysis And Machine Intelligence，2010，22（1）：63-84.