古超+龍政+李澤

摘要：HTML5標準規(guī)范和WebRTC技術的不斷演進，使得跨平臺音視頻實時通訊應用的構建成為可能。分析視頻運動目標檢測的常用方法，并提出幀差法在HTML5與WebRTC環(huán)境下的實現(xiàn)。

關鍵詞：HTML5；WebRTC；運動目標檢測；幀差

DOIDOI：10.11907/rjdk.171467

中圖分類號：TP317.4

文獻標識碼：A 文章編號：1672-7800（2017）006-0194-04

0 引言

歷經(jīng)5次修改后，HTML（超文本標記語言）標準規(guī)范的最新版本HTML5已由W3C（萬維網(wǎng)聯(lián)盟）組織在2014年10月宣布制定完成并公開發(fā)布[1]。HTML5將取代1999年制定的HTML 4.01、XHTML 1.0標準，以期能在互聯(lián)網(wǎng)應用迅速發(fā)展時，使網(wǎng)絡標準符合當代網(wǎng)絡需求，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容[2]。為了更好地處理當今的互聯(lián)網(wǎng)應用，HTML5添加了很多新元素及功能，比如：用于圖形繪制的Canvas元素、用于多媒體內(nèi)容回放的Video和Audio元素等。目前，HTML5已經(jīng)受到各平臺下大部分瀏覽器的支持。

Web實時通信技術（Web Real-Time Communication，WebRTC）為Web瀏覽器增加了新的功能。自2011年Google發(fā)起WebRTC開源項目和標準化工作以來，WebRTC已經(jīng)成為未來最有希望統(tǒng)一互聯(lián)網(wǎng)音視頻通信服務的技術標準。WebRTC的目標是為瀏覽器、移動終端平臺以及物聯(lián)網(wǎng)設備的高質量實時通訊應用開發(fā)提供技術標準，并允許這些跨平臺應用之間通過一套統(tǒng)一的協(xié)議進行相互通訊[3]。盡管初衷是建立瀏覽器之間的音視頻通信能力，但作為一個高質量的開源音視頻引擎，WebRTC也幫助了成千上萬的開發(fā)者和項目團隊，為移動應用和其它常見跨平臺應用的搭建提供了強大的音視頻通訊功能。這一點進一步擴大了WebRTC在全行業(yè)的影響力以及未來發(fā)展空間。目前由W3C和IETF聯(lián)合負責WebRTC的標準化工作。

1 視頻運動目標檢測方法

目標檢測是計算機圖像、視頻處理工作的基礎，廣泛應用于工業(yè)、醫(yī)學、軍事、教育、商業(yè)、體育等領域[4]。基于視頻的目標檢測與跟蹤是計算機視覺領域的主要研究方向之一，它在智能監(jiān)控、人機交互、視覺導航等眾多領域有著廣泛應用，并發(fā)揮著舉足輕重的作用。目前，對視頻中運動目標檢測的常見方法有：幀差法、背景減除法和光流法。

本文選用的檢測方法為幀差法。幀差法考慮到運動物體在相鄰的視頻幀之間有位移，而背景圖像在相鄰視頻幀之間的位置又相對固定的情況下，如果用相鄰的幀進行點對點的相減，則運動物體區(qū)域的差值會很大，背景部分的差值則接近于0（理想狀態(tài)下為0），二幀差分數(shù)學模型如下，原理如圖1所示。

2 基于HTML5+WebRTC的視頻運動目標檢測實現(xiàn)

WebRTC的目的在于實現(xiàn)實時通信大眾化。相較于傳統(tǒng)的視頻通信應用搭建方式，使用WebRTC技術創(chuàng)建一個視頻通信應用變得非常便捷。本文提出使用HTML5技術在WebRTC環(huán)境下實現(xiàn)視頻運動目標檢測，該方法具有以下主要特點：①整套檢測方法都基于Web瀏覽器實現(xiàn)，使得該檢測方法的部署應用達到平臺無關性和輕量化的目標；②利用WebRTC技術可以快速在Web瀏覽器中獲得無論是本地還是遠程的任何視頻來源并顯示；③使用HTML5 Canvas技術，以解決瀏覽器的兼容性問題并提高Web瀏覽器中圖像處理效率；④采用Javascript腳本語言實現(xiàn)檢測方法的所有算法，保證了檢測方法的通用效果。

2.1 基于WebRTC技術的視頻來源獲取

得益于HTML、HTTP及TCP/IP等高度開放且高可用技術的應用，WebRTC將會話管理、數(shù)據(jù)傳輸、音視頻編解碼等復雜技術都內(nèi)建于瀏覽器API內(nèi)，這使得WebRTC無須借助第三方軟件或插件便可在開放網(wǎng)絡中傳輸高質量音視頻流，為建立免費優(yōu)質的實時通信解決方案提供了保障。

通過以下HTML5代碼和Javascript腳本就可以建立一個支持WebRTC的頁面，并在頁面上顯示來自用戶端攝像頭的視頻畫面：

出于演示目的，以上代碼中省略了部分兼容性檢測及異常處理代碼，但代碼功能是完整可用的。HTML5代碼主要是在頁面放置一個

2.2 使用HTML5的Canvas元素處理圖像

Canvas元素是HTML5中新增的一個重要元素，專門用于繪制圖形。通過Canvas元素使得Web開發(fā)人員在無須借助任何第三方插件（如Flash，Silverlight）的情況下，可以直接使用JavaScript腳本在Web頁面進行繪圖[6]。在頁面上放置一個Canvas元素就相當于在頁面上放置了一塊“畫布”，通過Canvas的 getContext（） 方法可以獲得一個“繪圖環(huán)境”的對象，然后利用Canvas提供的一套基于JavaScript的API進行圖形圖像的繪制及處理。

3 運行效果驗證

本文采用一個常見的辦公環(huán)境（見圖4）測試以上算法在現(xiàn)實中的運行效果，當場景中出現(xiàn)運動目標時，在右下角的運動目標檢查窗口中即出現(xiàn)檢測到的運動目標，如圖5所示。

從檢測結果中可以看出，當目標在場景中持續(xù)運動時，檢測窗口中也同時出現(xiàn)與實際場景中運動目標對應的檢測結果（白色輪廓），算法運行效果良好。

4 結語

本文使用JavaScript在HTML5+WebRTC環(huán)境下實現(xiàn)了視頻運動目標檢測（幀差法）。對最終檢測效果的影響因素包括如下幾個方面：

（1）視頻攝像頭像素清晰度。本文算法使用了圖像中像素的RGB值進行差分計算，理論上來講，視頻源畫質越好，檢測結果也越精確。

（2）算法循環(huán)執(zhí)行性能。本文算法使用了setTimeout方法來設置循環(huán)檢測代碼的執(zhí)行，可以使用window.requestAnimFrame方法來提高循環(huán)檢測代碼的執(zhí)行性能。

（3）閾值選取。本文算法中通過閾值來控制運動目標檢測的靈敏度和噪聲影響。調節(jié)閾值大小的結果會直觀反映在檢索結果的運動目標輪廓光滑度和清晰度上。

在實際應用中，當運動目標被檢測到時，除了檢測結果的呈現(xiàn)，還可進行更多的靈活處理以滿足實際需要。例如，可觸發(fā)聲音警告、畫面保存，甚至是手機短信提醒等操作。

綜上所述，得益于Web技術的發(fā)展進步，可以將許多以往無法在Web上實現(xiàn)的應用進行移植。尤其是伴隨著HTML5標準和WebRTC技術的不斷演進，更為構建靈活、開放的Web應用提供了廣闊的舞臺和想象空間。

參考文獻：

[1]HTML5[EB/OL].[2016-11-28].https：//www.w3.org/TR/html5.

[2]HTML5_百度百科[EB/OL].[2016-11-28].http：//baike.baidu.com/item/html5.

[3]WebRTC Home|WebRTC[EB/OL].[2016-12-3].https：//webrtc.org.

[4]萬纓，韓毅，盧漢清.運動目標檢測算法的探討[J].計算機仿真，2006（10）：221-226.

[5]ALAN B，DANIEL C.WebRTC權威指南[M].第3版.聲網(wǎng)Agora.io，譯.北京：機械工業(yè)出版社，2016.

[6]谷偉.基于HTML5 Canvas的客戶端圖表技術研究[J].信息技術，2013（9）：107-110.

[7]龔麗. HTML5中的Canvas繪圖研究[J].軟件導刊，2014（4）：151-153.

（責任編輯：孫 娟）