人臉檢測與跟蹤算法優化及Web端實現

陳麗楓 王佳斌 鄭力新

(華僑大學工學院 福建 泉州 362021) (華僑大學工業智能化技術與系統福建省高校工程研究中心 福建 泉州 362021)

人臉檢測與跟蹤算法優化及Web端實現

陳麗楓 王佳斌 鄭力新

(華僑大學工學院 福建 泉州 362021) (華僑大學工業智能化技術與系統福建省高校工程研究中心 福建 泉州 362021)

針對實現人臉檢測與跟蹤功能的系統軟件在使用過程中產生的不易發布、擴展和維護等問題，提出一種基于HTML5實現人臉檢測與跟蹤的方法。通過將HTML5 Canvas技術和一種計算機視覺算法庫相結合，利用基于Viola-Jones算法原理的人臉特征分類器和 JavaScript等多種程序語言，在網頁上實現基于HTML5的人臉檢測與跟蹤的功能。實驗結果表明，該方法不僅能有效地減少資源的開銷，支持人臉檢測與跟蹤算法在Web端的實現，而且還滿足了人臉檢測和跟蹤過程中的實時性要求，保證了人臉檢測的檢測率，具有更優的檢測效果。

HTML5 人臉檢測 人臉跟蹤 Web

0 引 言

人臉檢測是指在輸入圖像中判定所存在人臉的位置、大小及位姿的過程，作為人臉信息處理中的一項關鍵技術，近年來人臉檢測成為計算機視覺與模式識別領域內一項受到普遍重視的研究課題[1-2]。在文獻[3]中，將人臉檢測的方法分為基于膚色模型的方法、基于啟發式模型的方法以及基于統計模型的方法。其中基于統計模型的方法是目前較為流行的方法，它包括神經網絡方法、支持向量機方法、隱馬爾可夫模型方法、Boosting方法等多種方法。隨著信息技術的發展，人臉檢測技術在人機交互、視頻監控、安全控制等多個領域得到廣泛應用。目前，國內外知名大學或研究機構都有人員從事人臉檢測的相關研究。長期以來，人臉檢測技術大多是以應用系統的形式實現，而應用系統對于系統硬件的依賴性不僅不利于系統的擴展和移植，且有可能成為限制其被廣泛運用的一個因素。近年來，隨著Web技術的快速發展,將圖像處理算法移植到服務器端，以網頁的形式提供應用服務成為可能。特別是經過長時間的修改和完善[4-7]，HTML5的標準規范于2014年正式制定完成后，由于HTML5具有開源、跨平臺的特性，因此相對于傳統的應用系統而言不僅更有利于Web應用程序的擴展，而且還能減小應用程序在安裝和移植過程中對硬件的依賴性，使其真正做到“一次開發，多次使用”。目前大多數主流瀏覽器均支持HTML5技術[8-9]。

本文提出在Web端使用HTML5技術實現人臉檢測與跟蹤。文中將通過采用B/S架構來減輕客戶端的數據處理壓力，提高應用程序的便捷性和執行效率。通過利用HTML5 Canvas技術以及基于Viola-Jones算法原理的人臉特征分類器和計算機視覺算法庫實現Web端的人臉檢測與跟蹤功能并將視頻圖像序列的人臉檢測追蹤效果顯示于瀏覽器頁面。

1 人臉檢測概述

人臉檢測最初源于人臉識別，經過幾十年的曲折發展，人臉檢測領域取得了很大的進展。自從Viola-Jones算法提出后，人臉檢測真正意義上走向了實際應用。Viola-Jones算法包括Haar-like特征、Adaboost分類器和級聯分類器3個核心步驟。利用Haar-like特征對圖片上的特征進行計算，采用積分圖方法快速提高計算效率；利用Adaboost分類器進行特征篩選[10]，保留最有用的特征，產生高效的分類器；通過級聯Adaboost分類器，加快檢測速度，提高人臉檢測的準確率。由于該方法有較高的檢測率和較好的實時性，因此在實際的系統具有廣泛的應用前景。在人機交互領域，人臉檢測是讓機器識別和理解人類行為的基礎，是人機交流最為關鍵的一步；在視頻監控領域，民宅、停車場、銀行等場所可以通過監控攝像頭進行人臉檢測與跟蹤，防止盜竊、破壞行為的發生。目前，在信息安全領域，人臉檢測技術已經獲得廣泛應用。在安全驗證系統中，該技術能夠用于避免一些犯罪行為的發生。

2 HTML5 Canvas技術

在HTML5標準規范正式完成后，最令人期待的便是其中的Canvas元素[11-13]。Canvas又稱為畫布，主要用于圖形圖像的表示、繪制以及動畫、游戲的制作等等。Canvas元素跟所有的DOM對象一樣具有一套自己的繪圖API，這些API包括了許多屬性、方法和事件。由于Canvas元素可以直接對讀入的圖像進行像素級的操作。因此，在頁面上實現更加復雜的圖像處理功能將不再是難事。但Canvas元素本身不具有繪圖能力，只是作為圖形的容器，需要結合JavaScript才能在頁面上繪制圖形，并且所有的繪制工作必須在JavaScript內部完成。針對圖像處理功能而言，HTML5中的Canvas元素提供了豐富的圖像支持。通過使用Canvas元素，Web端可以更加快速有效地對圖像進行處理。除此之外，Canvas元素的API還支持將HTML5 Video元素中不可見的視頻文件即時繪制到可見的Canvas元素中，進而實現實時的視頻處理功能。本文將通過HTML5 Canvas技術實現對視頻幀的實時處理，并將人臉的跟蹤效果通過Canvas元素的相關方法顯示在頁面上。

3 算法優化及其在Web端的實現

3.1 算法在Web端的優化

3.1.1 人臉特征分類器的優化

由于本文方法中的人臉檢測與跟蹤是基于Web端的實現，因此需要對人臉特征分類器進行優化，方便Web端的使用。為了更好地適應Web端的應用開發,人臉特征分類器face.js文件采用JavaScript語言編寫而成，其中包含了大量的人臉特征數據以方便在不同情況下對人臉進行檢測。此外，face.js的大小為184 KB，能夠減少瀏覽器客戶端在調用該文件時的資源開銷，提高檢測速度。通過使用該人臉特征分類器，能夠有效地在Web端準確識別人臉特征，提升識別精度。

3.1.2 算法的優化

不同于傳統的應用系統在實現人臉檢測與跟蹤時需要撰寫大量冗余繁瑣的實現代碼，Web端功能的實現需要更加快速有效的實現方式。文中使用的計算機視覺算法庫tracking.js由JavaScript語言編寫而成，代碼精簡高效，包含了大量的功能函數用于實現人臉檢測與跟蹤。tracking.js相較于傳統方式能夠更加快速準確地定位到人臉區域。tracking.js文件大小為78 KB，體積小，使用方式簡潔，與HTML5規范結合使用不僅能實現Web端的人臉檢測與跟蹤功能還能實現色彩實時跟蹤等多種功能。通過使用該文件，Web端的開發得到了極大的簡化。

3.2 基本結構設計

本文采用B/S模式將部分功能的實現集中到服務器端，不僅簡化了應用程序的開發、維護和使用，還降低了開發成本，減輕了客戶端的壓力,具體如圖1所示。

圖1 B/S架構圖

在瀏覽器客戶端，頁面主要通過CSS樣式進行排版，HTML5部分則重點采用Canvas技術和Video元素，而JavaScript部分則包含所引用的計算機視覺算法庫tracking.js以及臉部分類器face.js。對于face.js而言，它的主要功能是幫助tracking.js的核心代碼識別人臉特征，而tracking.js則通過使用Video元素實現控制攝像頭的功能，并利用HTML5 Canvas技術實現頁面上人臉區域的實時定位跟蹤。由此，人臉檢測與跟蹤的性能將得到較大的提高。其基本結構如圖2所示。

圖2 基本結構圖

3.3 具體流程設計

在瀏覽器客戶端，當tracking.js通過HTML5中的Video元素準備打開計算機的攝像頭時，瀏覽器頁面將會彈出一個窗口詢問用戶是否同意打開攝像頭。若用戶同意開啟攝像頭，則頁面上會顯示視頻圖像以及調用相關代碼實現人臉檢測與跟蹤的實時效果，否則關閉攝像頭，結束功能運行。圖3為具體流程圖。

圖3 流程圖

3.4 功能實現

在頁面上定義HTML5的Video元素、Button元素及Canvas元素，引用計算機視覺算法庫tracking.js以及臉部訓練分類器face.js的JavaScript腳本代碼。其中，ObjectTracker是tracking.js中的一個抽象類，需要將face.js作為參數實例化ObjectTracker并將其賦值給變量tracker。調用tracker中的track()方法，將Video元素以及tracker作為它的參數，從而實現控制攝像頭的功能。調用tracker中的on()方法對追蹤事件進行監聽。在該監聽事件中主要是通過Canvas元素獲取context對象，然后利用該對象的相關屬性及方法對視頻中檢測到的人臉進行標記跟蹤。最后通過setInterval()函數將繪制到頁面上的視頻圖像進行實時更新。圖4為具體的實現細節。

圖4 實現細節

4 實 驗

4.1 檢測速度分析

由于一幅待檢測圖像的大小與其檢測時間之間存在一定的線性關系，因而檢測速度也會隨著圖像尺寸大小的變化而變化。圖5為圖像大小與檢測時間的關系圖。

圖5 圖像大小與檢測時間的關系

由圖5可以看出，隨著圖像尺寸的增大或減小，人臉檢測所花費的時間也隨之增加或減少，檢測速度也會隨之而變化。因此本文在實驗過程中將對測試樣本的大小進行適當的歸一化處理。

為了更好地體現基于HTML5的人臉檢測與跟蹤的適用性與可移植性，本文選取幾種支持HTML5的主流瀏覽器進行實驗，其實驗結果如表1所示。

表1 不同瀏覽器上的幀率對比結果

從表1可以看出，基于HTML5的人臉檢測與跟蹤在以上支持HTML5的Web瀏覽器上運行時都具有良好的幀率，可見該方法具有較好的適用性和可移植性。盡管在不同的瀏覽器上運行時所獲得的幀率大小不一樣，但其數值都滿足人臉檢測與跟蹤的實時性要求，因此，基于HTML5的人臉檢測與跟蹤在一定程度上具有較好的執行效率。

由表2可以看出本文方法的檢測速度大于文獻[14]的檢測速度，所以本文方法能夠有效地縮短檢測時間，滿足實時處理的要求。

表2 2種方法的檢測速度對比

4.2 實驗結果分析

本文的實驗平臺為CPU為1.8 GHz，內存為2 GB的計算機。文中通過使用FEI和Georgia Tech人臉圖像數據庫以及INRIA數據庫對本文方法進行驗證，根據上述分析，圖像大小統一規范為240×180 px，檢測結果如表3所示。

表3 不同數據庫的人臉檢測結果

表3中FEI人臉圖像數據庫包含了200個人的多張人臉圖像，其中人臉圖像大小均為640×480。在實驗過程中，將人臉圖像分為兩組，第一組為同一表情的正面人臉圖像共200張，其中有些人臉圖像中帶有眼鏡、耳環等配飾。第二組為不同偏轉角度的人臉圖像共1 000張，其中也包含了帶有裝飾物的人臉圖像。經過對這些人臉圖像進行檢測，檢測結果分別為99.5%和94.6%，部分檢測結果如圖6所示。

圖6 FEI人臉圖像數據庫檢測結果

Georgia Tech人臉圖像數據包含了50個人的多張人臉圖像，這些圖像拍攝于不同光照條件下，且拍攝角度、面部表情及外觀均不一樣。在實驗過程中將這些人臉圖像分為兩組，第一組為不同表情和配飾的正面人臉圖像共239張，第二組為不同角度、不同表情和配飾的人臉圖像共541張。經過對這些圖像進行人臉檢測，其結果分別為99.6%和95.7%，部分檢測結果如圖7所示。

圖7 Georgia Tech人臉圖像數據庫檢測結果

為測試本文方法對多人臉的復雜圖像的檢測效果，本文對INRIA數據庫中的多人臉圖像進行檢測實驗，圖8為部分檢測結果。

圖8 多人臉檢測結果

實驗結果表明，本文方法對于多表情、多角度、不同配飾的人臉圖像具有很好的檢測效果以及較高的檢測率。

5 結 語

本文對人臉檢測與跟蹤的一些應用背景進行分析后，將HTML5與計算機視覺算法庫相結合用于研究和實現基于Web端的人臉檢測與跟蹤，并通過調用人臉特征分類器和多種腳本語言使其更加完善。本文方法的實現在一定程度上節約了系統軟件在使用或移植維護過程中所需要的各項資源。通過在不同瀏覽器上進行實驗后可以看出本文方法具有較好的適用性和可移植性，滿足基本的實時性要求。實驗結果表明，文中所采用的人臉檢測與跟蹤方法在Web端應用中具有較好的檢測率和檢測效果。

[1] 嚴嚴,章毓晉.基于視頻的人臉識別研究進展[J].計算機學報,2009,32(5):878-886.

[2] 梁路宏,艾海舟.基于人臉檢測的人臉跟蹤算法[J].計算機工程與應用,2001,37(17):42-45.

[3] 梁路宏,艾海舟,徐光祐,等.人臉檢測研究綜述[J].計算機學報,2002,25(5):449-458.

[4] 馬新強,孫兆,袁哲,等.Web標準與HTML5的核心技術研究[J].重慶文理學院學報(自然科學版),2010,29(6):61-64,74.

[5] Hoy M B.HTML5:a new standard for the Web[J].Medical Reference Services Quarterly,2011,30(1):50-55.

[6] 劉華星,楊庚.HTML5——下一代Web開發標準研究[J].計算機技術與發展,2011,21(8):54-58,62.

[7] Burger M C.ChemDoodle Web Components:HTML5 toolkit for chemical graphics,interfaces,and informatics[J].Journal of Cheminformatics,2015,7(1):35.

[8] 余飛.HTML5圖形圖像處理技術研究[J].計算機光盤軟件與應用,2013(12):261-261,263.

[9] Deursen D,Lancker W,Mannens E,et al.Experiencing standardized media fragment annotations within HTML5[J].Multimedia Tools and Applications,2014,70(2):827-846.

[10] 阮錦新,尹俊勛.基于人臉特征和AdaBoost算法的多姿態人臉檢測[J].計算機應用,2010,30(4):967-970.

[11] 龔麗.HTML5中的Canvas繪圖研究[J].軟件導刊,2014(4):151-153.

[12] 成舟,邵志清,張歡歡,等.HTML5 Canvas技術在工程流程圖中的研究與應用[J].華東理工大學學報(自然科學版),2015,41(2):260-265.

[13] Boulos M N K,Warren J,Gong J,et al.Web GIS in practice VIII:HTML5 and the canvas element for interactive online mapping[J].International Journal of Health Geographics,2010,9(1):1-13.

[14] 郭磊,王秋光.Adaboost人臉檢測算法研究及OpenCV實現[J].哈爾濱理工大學學報,2009,14(5):123-126.

OPTIMIZATIONOFFACEDETECTIONANDTRACKINGALGORITHMANDIMPLEMENTATIONOFWEB

Chen Lifeng Wang Jiabin Zheng Lixin

(CollegeofEngineering,HuaqiaoUniversity,Quanzhou362021,Fujian,China) (UniversitiesEngineeringResearchCenterofFujianProvinceIndustrialIntelligentTechnologyandSystems,HuaqiaoUniversity,Quanzhou362021,Fujian,China)

In order to solve the problems about release, expansion and maintenance in the using process of system software which realization face detection and tracking, HTML5-based face detection and tracking is proposed. By combining HTML5 Canvas technology with computer vision algorithms library, using a face feature classifier based on Viola-Jones algorithm and a variety of programming languages such as JavaScript, it implements HTML5-based face detection and tracking function on the page. Experimental results show that the method not only can effectively reduce the cost of resources, support the implementation of face detection and tracking algorithm on Web, but also meet the real-time requirements of face detection and tracking, and ensure the detection rate of face detection, with better detection effect.

HTML5 Face detection Face tracking Web

TP391

A

10.3969/j.issn.1000-386x.2017.09.054

2016-10-19。國家自然科學基金青年科學基金項目(61505059)；泉州市科技局重點項目(2013Z12)。陳麗楓，碩士生，主研領域：Web應用，光電信息檢測，智能計算。王佳斌，副教授。鄭力新，教授。