基于HTML5與WebRTC的視頻運(yùn)動目標(biāo)檢測方法

古超+龍政+李澤

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

關(guān)鍵詞：HTML5；WebRTC；運(yùn)動目標(biāo)檢測；幀差

DOIDOI：10.11907/rjdk.171467

中圖分類號：TP317.4

文獻(xiàn)標(biāo)識碼：A 文章編號：1672-7800（2017）006-0194-04

0 引言

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

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

1 視頻運(yùn)動目標(biāo)檢測方法

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

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

2 基于HTML5+WebRTC的視頻運(yùn)動目標(biāo)檢測實(shí)現(xiàn)

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

2.1 基于WebRTC技術(shù)的視頻來源獲取

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

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

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

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

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

3 運(yùn)行效果驗證

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

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

4 結(jié)語

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

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

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

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

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

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

參考文獻(xiàn)：

[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]萬纓，韓毅，盧漢清.運(yùn)動目標(biāo)檢測算法的探討[J].計算機(jī)仿真，2006（10）：221-226.

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

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

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

（責(zé)任編輯：孫 娟）