一種面向移動(dòng)終端的WEB微手勢(shì)識(shí)別?

羅先錄 張永棠

1 引言

隨著移動(dòng)應(yīng)用的發(fā)展，消費(fèi)者已經(jīng)不再滿足于點(diǎn)按的交互方式。而當(dāng)手勢(shì)識(shí)別技術(shù)被應(yīng)用到移動(dòng)端時(shí)，成本大小和便捷與否就應(yīng)該被優(yōu)先考慮［1～2］。從數(shù)據(jù)的采集方式考慮，傳統(tǒng)的采用數(shù)據(jù)手套等的方式由于成本較高以及使用時(shí)的不便，所以并不適用于移動(dòng)平臺(tái)。而Kinect等三維信息采集設(shè)備雖然具有極大的發(fā)展前景［3～4］，但就目前來說，并不適合用在移動(dòng)平臺(tái)上。由此，本文所介紹的系統(tǒng)只使用移動(dòng)設(shè)備自帶的網(wǎng)絡(luò)攝像頭獲取視頻信息。

當(dāng)前市場(chǎng)上的移動(dòng)平臺(tái)主要有蘋果和安卓這兩大系統(tǒng)，在開發(fā)過程中必須考慮不同系統(tǒng)的應(yīng)用［5］。所以，為了使系統(tǒng)具備跨平臺(tái)工作的能力，本系統(tǒng)以移動(dòng)WEB應(yīng)用的方式進(jìn)行實(shí)現(xiàn)。它將與運(yùn)行的移動(dòng)平臺(tái)無關(guān)，切實(shí)解決平臺(tái)局限性問題。

此外，現(xiàn)有手勢(shì)識(shí)別往往會(huì)忽略了對(duì)于較小動(dòng)作手勢(shì)的識(shí)別，這也是本系統(tǒng)所重視的問題之一。

2 識(shí)別流程及關(guān)鍵技術(shù)

2.1 識(shí)別流程

基于移動(dòng)WEB的微手勢(shì)識(shí)別的流程如圖1所示。首先通過網(wǎng)絡(luò)攝像頭獲取手勢(shì)圖像；再使用已經(jīng)訓(xùn)練完成的分類器，通過objectdetect.js對(duì)獲取的圖像進(jìn)行對(duì)手掌區(qū)域的位置確定；然后根據(jù)手掌域位置的確定，獲得手指域位置；接著根據(jù)YCrCb顏色空間的膚色模型［6］，對(duì)圖像進(jìn)行二值化處理，而后再經(jīng)過一定的形態(tài)學(xué)處理，去除一定噪聲；最后對(duì)已分割出的圖像，采取微手勢(shì)識(shí)別算法，提取出其中的手掌與手指重心，解析手勢(shì)信息。

圖1 微手勢(shì)設(shè)別的流程

本文的目標(biāo)圖像為手掌圖像，通過對(duì)手掌域的定位，獲取手勢(shì)的大致位置。在大致位置的確定之后，后續(xù)的圖像處理工作將被定在這塊區(qū)域內(nèi)。這樣不僅排除了非手勢(shì)區(qū)域的干擾信息，并且大大加快了處理速度，提高了系統(tǒng)的工作效率。

2.2 關(guān)鍵技術(shù)

2.2.1 膚色分割

相對(duì)RGB，YCrCb顏色空間可以將色度和亮度分離，從而在膚色分割的過程中降低亮度的干擾。用Y表示亮度，Cr表示紅色分量，Cb表示藍(lán)色分量。膚色分割必須滿足兩個(gè)條件：

（1）將彩色圖像的像素點(diǎn)P由RGB空間轉(zhuǎn)換為YCrCb空間［7］。RGB 向 YCrCb的轉(zhuǎn)換公式如式（1）：

（2）根據(jù)像素點(diǎn)P的Cr和Cb的值滿足133≤Cr≤173且77≤Cb≤127，那么該點(diǎn)可以被判斷為膚色點(diǎn)，否則不是。

根據(jù)這個(gè)標(biāo)準(zhǔn)，膚色區(qū)域像素點(diǎn)的灰度值被設(shè)為255，非膚色區(qū)域像素點(diǎn)的灰度值被設(shè)為0，生成膚色二值圖像。

2.2.2 手指識(shí)別

手指識(shí)別的作用在于對(duì)所得的手勢(shì)圖像進(jìn)行解析，獲得其所表達(dá)的手勢(shì)信息。它是整個(gè)流程中最重要的部分。本系統(tǒng)的檢測(cè)部分屬于機(jī)器學(xué)習(xí)類算法。整個(gè)過程包括懸停判斷，膚色區(qū)域編號(hào)，輪廓統(tǒng)計(jì)，重心相對(duì)位置計(jì)算，手勢(shì)信息確定。其中，重心相對(duì)法利用手掌域重心，手指域重心的相對(duì)位置，判斷手指相對(duì)于手掌的運(yùn)動(dòng)情況，再結(jié)合手指域重心的前后兩者變化，從而解析出手勢(shì)信息。

3 手勢(shì)識(shí)別算法的研究

本系統(tǒng)的重點(diǎn)在于對(duì)手指的識(shí)別與追蹤，需要具有一定的高效、實(shí)時(shí)性。

3.1 算法流程

算法流程圖2所示。

圖2 算法流程

3.2 算法實(shí)現(xiàn)

3.2.1 獲取手掌域重心

在處理過的膚色二值圖像中，膚色像素的灰度被設(shè)置為255。這意味著手掌域內(nèi)的膚色像素的坐標(biāo)點(diǎn)已經(jīng)被確定，然后手掌域的重心可以根據(jù)下方的公式算出。

其中，C(x ,y)為重心坐標(biāo)，Pi(x)為膚色像素點(diǎn)的橫坐標(biāo)，Pi(y)為膚色像素點(diǎn)的縱坐標(biāo)，N為膚色像素點(diǎn)的總數(shù)目。

3.2.2 懸停判斷

WEB端的手勢(shì)識(shí)別，在追求高效、實(shí)時(shí)性的同時(shí)，會(huì)失去相應(yīng)的準(zhǔn)確性，為了達(dá)到效率與精度的相平衡，采用了一種懸停判斷的方法［8］。此方法的前提是手掌域的圖像已經(jīng)被識(shí)別，且手掌域重心已經(jīng)被獲取到。將此時(shí)手掌重心的坐標(biāo)記為(x0,y0)。隨著時(shí)間推移，視頻的每一幀的重心坐標(biāo)可以組成一個(gè)序列，即(xi,yi) ，i=0，1，…，50。若其中有30個(gè)坐標(biāo)處于(x0,y0)的鄰域內(nèi)，則該手勢(shì)在這個(gè)位置保持了一定時(shí)間。它所代表的含義即為“選中，執(zhí)行下一步操作”。

3.2.3 膚色區(qū)域編號(hào)

在經(jīng)過膚色二值化操作后，膚色像素在圖中呈區(qū)域的形態(tài)。為了有效地處理其中的膚色信息，系統(tǒng)對(duì)膚色像素區(qū)域進(jìn)行編碼，從中提取出所需要的區(qū)域，并排除不需要的區(qū)域［9］。編碼過程的大體準(zhǔn)則為：首先初始化整個(gè)手勢(shì)圖像的值；接著按照從左到右、從上到下的方式對(duì)膚色像素區(qū)域進(jìn)行編碼。

1）初始化編號(hào)值

圖像區(qū)域如圖3所示：其中Total為整個(gè)圖像區(qū)域；Pre為事先獲得的手勢(shì)圖像區(qū)域；Ext為將手勢(shì)圖像區(qū)域邊界延伸2個(gè)像素大小所得的圖像區(qū)域。

圖3 區(qū)域示意圖

圖像初始化是將Ext區(qū)域內(nèi)的所有像素點(diǎn)的編號(hào)值初始化為0，如圖4所示：其中黑色邊框?yàn)镻re區(qū)域，灰色框代表膚色像素點(diǎn)，白色框代表非膚色像素點(diǎn)。

圖4 編碼初始化

2）編號(hào)方法

如圖所示，整個(gè)編碼過程依照從左到右、從上到下的原則進(jìn)行。假設(shè)膚色點(diǎn)的坐標(biāo)為（x，y），碼值為num。系統(tǒng)需要判定（x-1，y），（x-1，y-1），（x，y-1）和（x+1，y-1）這四個(gè)點(diǎn)是否已被更改編碼：若四個(gè)點(diǎn)的碼值都是0，則認(rèn)定該像素點(diǎn)所處區(qū)域未被重新編碼，然后將當(dāng)前點(diǎn)的碼值重新賦值為num=num+1；若其中至少有一個(gè)點(diǎn)被重新編號(hào)，則當(dāng)前點(diǎn)的值應(yīng)被賦值為那個(gè)被重新編號(hào)的碼值。根據(jù)以上原則，如圖4中所示，首先遇到的膚色像素點(diǎn)為P點(diǎn)，當(dāng)前num=0。因?yàn)镻點(diǎn)四個(gè)方向上的點(diǎn)編號(hào)值均為0，故P點(diǎn)的編號(hào)值應(yīng)為num=num+1，即為1。同理，對(duì)于圖中Q點(diǎn)，系統(tǒng)需判定Q點(diǎn)的左前方、左上方、上方、友上方四個(gè)點(diǎn)是否被重新編號(hào)，由于P點(diǎn)為Q點(diǎn)的左前方點(diǎn)，又因?yàn)镻點(diǎn)已被重新編號(hào)為1，那么Q點(diǎn)的編號(hào)值應(yīng)與P點(diǎn)的編號(hào)值相同，即仍為1；最終，圖4中膚色區(qū)域編碼后的結(jié)果如圖5。

圖5 編碼結(jié)果

3.2.4 輪廓統(tǒng)計(jì)

由于膚色分割存在一定缺陷，膚色相近的顏色也誤認(rèn)為是膚色。因此，在對(duì)不同區(qū)域的膚色采用不同的數(shù)字進(jìn)行編碼之后，還要將其經(jīng)過膚色二值化處理，并通過輪廓統(tǒng)計(jì)篩選出系統(tǒng)所需要的膚色輪廓，去除圖像中存在的噪聲干擾區(qū)域。具體步驟如下：

首先獲得手掌區(qū)域的外圍輪廓（如圖6（a）），然后對(duì)手掌輪廓按輪廓點(diǎn)的按照順時(shí)針的方向進(jìn)行定長掃描［10］。如圖6（b）所示，掃描輪廓起點(diǎn)a與終點(diǎn)b兩者連線ab的長度為Dab，掃描輪廓點(diǎn)P到ab垂線的長度為Dp。為了排除過大或過小的干擾區(qū)域，我們?cè)O(shè)置了相應(yīng)的最小門閾值ε，將滿足式（3）的點(diǎn)設(shè)為手指指尖的候選點(diǎn)。

圖6（b）手指P、G、Q三個(gè)候選點(diǎn)掃描后，計(jì)算出輪廓點(diǎn)的ratio值如圖6（c）的曲線3個(gè)波峰所示。X軸為輪廓點(diǎn)索引值，Y軸為各輪廓點(diǎn)處的ratio值。同時(shí)，參考ab兩個(gè)端點(diǎn)連線的矩形范圍，判斷其是否為膚色區(qū)域。若為膚色區(qū)域，則判定P為指尖點(diǎn)，否則P為非指尖點(diǎn)。

圖6 基于輪廓統(tǒng)計(jì)的手指檢測(cè)

3.2.5 重心相對(duì)位置識(shí)別法

經(jīng)過輪廓統(tǒng)計(jì)，已經(jīng)可以得出手指區(qū)域。與手掌域重心的獲取一樣，系統(tǒng)采用膚色二值圖像方法獲取手指域重心坐標(biāo)，并將手指重心點(diǎn)抽象出來，如圖7所示。其中“狀態(tài)一”指“手部運(yùn)動(dòng)開始前且通過懸浮判定成功獲取重心坐標(biāo)的狀態(tài)”，“狀態(tài)二”指“手部運(yùn)動(dòng)結(jié)束后且通過懸浮判定成功獲取重心坐標(biāo)的狀態(tài)”。

圖7 手部運(yùn)動(dòng)狀態(tài)

3.2.6 算法具體實(shí)現(xiàn)方法

1）構(gòu)建重心坐標(biāo)三角形

過掌心A點(diǎn)做一條垂線L，過手指重心B點(diǎn)做L的垂線L′且兩條線交于點(diǎn)C，得∠ABC，記A角度數(shù)為 θ 。同理可得 ∠A′B′C′，記 A′角度數(shù)為 θ′。如圖8所示。

圖8 手部運(yùn)動(dòng)狀態(tài)形式化

（2）計(jì)算手指長度

在手指域部分，假設(shè)手指區(qū)域縱坐標(biāo)最小點(diǎn)為E，縱坐標(biāo)最大點(diǎn)為F，分別過E、F點(diǎn)做水平線，記水平線間距為d，如圖9所示。手指分為伸長和彎曲情況，彎曲情況下的手指長度大體為伸長情況下的二分之一。故根據(jù)這一點(diǎn)，假設(shè)狀態(tài)一的手指長度為d1，狀態(tài)二的手指長度為d2，max為d1、d2中的較大者，設(shè)m= ||d1-d2。

圖9 手指彎曲

若m≥0.4max，則認(rèn)為手指前后發(fā)生了彎曲動(dòng)作；若m＜0.4max，則認(rèn)為手指未進(jìn)行彎曲動(dòng)作，此時(shí)，系統(tǒng)需要從角度變化方面入手來解析手指的運(yùn)動(dòng)信息。

3）計(jì)算角θ、θ′

通過事先構(gòu)建的坐標(biāo)三角形，系統(tǒng)可以利用三角信息計(jì)算出相應(yīng)的夾角。假設(shè)A點(diǎn)坐標(biāo)為(x1,y1)，B點(diǎn)坐標(biāo)為(x2,y2)，C點(diǎn)坐標(biāo)為(x1,y2)，由此可得：

同理可得θ′。

若 ||θ-θ′≤10，則認(rèn)為手指前后未進(jìn)行左右擺動(dòng)，并且事先已知手指前后長度未改變，此時(shí)可認(rèn)為手部微小動(dòng)作前后未發(fā)生改變。

當(dāng) ||θ-θ′＞10，若θ＞θ′，則認(rèn)為手指部分進(jìn)行了向右的擺動(dòng)運(yùn)動(dòng)；若θ＜θ′，則認(rèn)為手指部分進(jìn)行了向左的擺動(dòng)運(yùn)動(dòng)。

綜上，系統(tǒng)得到了手指的4個(gè)運(yùn)動(dòng)情況：彎曲、保持、向左和向右。然后系統(tǒng)將手指的4個(gè)動(dòng)作與手掌部重心坐標(biāo)相結(jié)合起來，就可以解析出多種事先定義的手勢(shì)信息。

4 實(shí)驗(yàn)分析

圖像采集基于Google提出的Web RTC框架，它基于HTML5標(biāo)準(zhǔn)，使用JavaScript API來實(shí)現(xiàn)對(duì)攝像頭的調(diào)用和瀏覽器的無插件視頻播放［11］。對(duì)于網(wǎng)絡(luò)攝像頭所獲取的視頻信息，系統(tǒng)利用＜canvas＞獲取視頻的每一幀圖像，用來檢測(cè)視頻中的手勢(shì)。而在對(duì)視頻中的手勢(shì)進(jìn)行檢測(cè)和定位時(shí)，系統(tǒng)采用開源項(xiàng)目objectdetect.js來實(shí)現(xiàn)。

為了驗(yàn)證該手勢(shì)識(shí)別研究的有效性，我們選取了200組膚色不同、大小不同、手形不同的手勢(shì)圖像。分別對(duì)10種不同的靜態(tài)手勢(shì)（如圖10中的a至j所示），每個(gè)手勢(shì)進(jìn)行了1000次微手勢(shì)識(shí)別實(shí)驗(yàn)，驗(yàn)證其對(duì)不同的手勢(shì)圖像的識(shí)別成功率。實(shí)驗(yàn)結(jié)果如表1所示。

圖10 十種不同的靜態(tài)手勢(shì)

表1 識(shí)別結(jié)果統(tǒng)計(jì)

測(cè)得各個(gè)手勢(shì)的正確率都在90%以上，由于圖像掃描及程序運(yùn)行等因素的影響，各分組的平均耗時(shí)略有差異，但是都控制在小于180ms的極小時(shí)間范圍之內(nèi)。說明了本文研究微手勢(shì)識(shí)別方法在移動(dòng)移動(dòng)平臺(tái)設(shè)備上有一定的實(shí)時(shí)性和準(zhǔn)確性。

5 結(jié)語

本系統(tǒng)通過網(wǎng)絡(luò)攝像頭獲取手勢(shì)視頻，使用基于Haar特征的級(jí)聯(lián)分類器定位手掌位置，再通過膚色分割、形態(tài)學(xué)處理等方法獲取手部圖像，然后根據(jù)手掌和手指的信息分析獲得當(dāng)前手勢(shì)所代表的命令。系統(tǒng)從數(shù)據(jù)采集到獲取命令的整個(gè)過程，都體現(xiàn)了低成本、高便捷性等特點(diǎn)，對(duì)于移動(dòng)設(shè)備具有較好的適用性。

［1］蒲興成，王濤，張毅.基于改進(jìn)Hu矩算法的Kinect手勢(shì)識(shí)別［J］.計(jì)算機(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與混合判別特征檢測(cè)器的手勢(shì)識(shí)別［J］.計(jì)算機(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］吳江梅，張瑜慧，孫瑩，等.一種基于單目視覺的人手檢測(cè)與識(shí)別方法［J］.計(jì)算機(jī)與數(shù)字工程，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系統(tǒng)同步算法［J］.四川理工學(xué)院學(xué)報(bào)（自然科學(xué)版），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］邱麗萍.指紋圖像識(shí)別技術(shù)新思路與實(shí)驗(yàn)研究［J］.計(jì)算機(jī)與數(shù)字工程，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］張軍，張孔，楊正領(lǐng).基于計(jì)算機(jī)視覺的多特征手勢(shì)識(shí)別［J］.計(jì)算機(jī)應(yīng)用與軟件，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.