尹文剛，楊斌

（西南交通大學(xué) 信息科學(xué)與技術(shù)學(xué)院，成都610031）

尹文剛（研究生），主要研究方向是嵌入式系統(tǒng)軟件開發(fā)；楊斌（教授），主要研究方向是單片機(jī)及嵌入式系統(tǒng)應(yīng)用。

引 言

目前，基于網(wǎng)頁的視頻會議系統(tǒng)大多數(shù)情況下，都是通過第三方插件或集成在Web瀏覽器上的應(yīng)用程序?qū)⒍嗝襟w內(nèi)容加載到網(wǎng)頁上來實現(xiàn)的。目前最流行的方式是通過Adobe的Flash Player插件將音頻和視頻嵌入到網(wǎng)頁中，而伴隨著HTML5技術(shù)的發(fā)展，在HTML5中引入video和audio元素后［1］，將視頻嵌入到網(wǎng)頁中便形成了一個統(tǒng)一的標(biāo)準(zhǔn)，并使多媒體成為網(wǎng)頁的無縫組成部分?；ヂ?lián)網(wǎng)成功的一個關(guān)鍵因素是一些核心技術(shù)，如HTML、HTTP和TCP／IP是開放和免費的。如今，在瀏覽器通信領(lǐng)域還中沒有免費、高質(zhì)量、完整的解決方案，而WebRTC就是這樣的技術(shù)。隨著智能移動終端硬件設(shè)備的日益完善化，在其上面進(jìn)行多媒體技術(shù)的開發(fā)已經(jīng)成為一個新的熱點，尤其表現(xiàn)在現(xiàn)如今最熱門的Android操作系統(tǒng)上面。本文設(shè)計了一種在Android移動終端上基于Chrome瀏覽器的視頻會議系統(tǒng)，本系統(tǒng)采用HTML5＋WebRTC技術(shù)，在Chrome瀏覽器內(nèi)部無需安裝任何插件即可進(jìn)行實時視頻和音頻通信，該瀏覽器運行在Android智能終端上。

1 系統(tǒng)設(shè)計方案和系統(tǒng)結(jié)構(gòu)

1.1 系統(tǒng)設(shè)計方案

本方案所設(shè)計的Android平臺上［2］基于 HTML5＋WebRTC技術(shù)的視頻會議系統(tǒng)主要包含了以下功能：

① 客戶端（如手機(jī)、PDA）通過Chrome瀏覽器登錄服務(wù)器后對自身功能進(jìn)行配置。這里，客戶端可以根據(jù)自己的需求選擇視頻會議系統(tǒng)中需要的功能；

② 客戶端通過無線網(wǎng)絡(luò)GSM／Wi－Fi接入Internet，利用Chrome瀏覽器登錄服務(wù)器，完成用戶注冊的功能；

③ 客戶端憑借系統(tǒng)內(nèi)置的攝像頭和麥克風(fēng)，采集視頻圖像和語音信號，通過Chrome瀏覽器接入Internet建立連接，在網(wǎng)絡(luò)傳輸層利用RTP／RTCP協(xié)議以IP數(shù)據(jù)包的形式，實時傳輸語音和視頻數(shù)據(jù)給其他客戶端；

④Chrome瀏覽器上視頻會議系統(tǒng)界面的開發(fā)。作為一個系統(tǒng)級應(yīng)用，友好、美觀、大方的用戶界面顯得尤為重要，本系統(tǒng)中我們是通過HTML5和JavaScript API來實現(xiàn)的。

1.2 系統(tǒng)結(jié)構(gòu)

系統(tǒng)的總體架構(gòu)采用了客戶端／服務(wù)器（C／S）和瀏覽器／服務(wù)器（B／S）混合架構(gòu)模型，客戶端利用運營商提供的無線網(wǎng)絡(luò)或者自身的 Wi－Fi模塊接入Internet，搭建在Android移動終端上的Chrome瀏覽器之間通過HTTP協(xié)議建立連接，在網(wǎng)絡(luò)傳輸層通過RTP／RTCP協(xié)議以IP數(shù)據(jù)包的形式實時傳輸語音和視頻數(shù)據(jù)。系統(tǒng)結(jié)構(gòu)如圖1所示。

圖1 基于HTML5＋WebRTC技術(shù)的視頻會議系統(tǒng)結(jié)構(gòu)

系統(tǒng)主要由Android智能移動終端客戶端和運營商服務(wù)器、視頻會議服務(wù)器、Web服務(wù)器構(gòu)成的服務(wù)器端兩大模塊組成，客戶終端主要采用Android操作系統(tǒng)的智能手機(jī)和PDA等嵌入式設(shè)備?？蛻艚K端包括了Android操作系統(tǒng)和搭建在操作系統(tǒng)之上的Chrome瀏覽器以及網(wǎng)絡(luò)模塊，該客戶端硬件設(shè)備具備前置和后置攝像頭的功能。

2 系統(tǒng)開發(fā)中的關(guān)鍵技術(shù)

2.1 HTML 5

HTML5是2004年被WHATWG提出、于2007年被W3C接納而制定的HTML標(biāo)準(zhǔn)版本，目前仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)開始支持某些HTML5技術(shù)。HTML5強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能，追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。它是近十年來Web標(biāo)準(zhǔn)巨大的飛躍，它將 Web帶入一個成熟的應(yīng)用平臺，在這個平臺上，視頻、音頻、動畫以及同電腦的交互都被標(biāo)準(zhǔn)化。隨著HTML5的發(fā)展，各個瀏覽器都已經(jīng)，或即將支持HTML5，HTML5提供了音頻視頻的標(biāo)準(zhǔn)接口，實現(xiàn)了無需任何插件支持，只需瀏覽器支持相應(yīng)的HTML5標(biāo)簽。在本設(shè)計中，主要應(yīng)用了“audio”和“video”標(biāo)記嵌入本地音頻和視頻信息。

2.2 WebRTC

WebRTC是一項在瀏覽器內(nèi)部進(jìn)行實時語音和視頻通信的技術(shù)，是谷歌公司2010年收購Global IP Solutions公司而獲得的成果。它實現(xiàn)了基于網(wǎng)頁的視頻會議，所采用的標(biāo)準(zhǔn)是WHATWG協(xié)議，目的是通過瀏覽器提供簡單的JavaScript就可以達(dá)到實時通信（Real－Time Communications，RTC）的能力。WebRTC提供了視頻會議的核心技術(shù)，包括音視頻的采集、編解碼、網(wǎng)絡(luò)傳輸、顯示等功能。在本系統(tǒng)中，采用這一核心技術(shù)實現(xiàn)了Android平臺上基于Chrome瀏覽器的視頻會議系統(tǒng)。

3 系統(tǒng)客戶端的設(shè)計

3.1 系統(tǒng)客戶端的體系架構(gòu)

本方案所設(shè)計的基于HTML5＋WebRTC技術(shù)的視頻會議系統(tǒng)是在Android平臺上來實現(xiàn)的。Android系統(tǒng)是完全免費和開放的移動設(shè)備平臺，這給后續(xù)的開發(fā)提供了有利的條件，搭建在Android平臺上的Chrome瀏覽器是基于HTML5開放源代碼來實現(xiàn)的，包括WebKit和Mozilla，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且高效的使用者界面，整個客戶端系統(tǒng)架構(gòu)如圖2所示。

圖2 客戶端系統(tǒng)架構(gòu)

由圖2可以看出，系統(tǒng)客戶端主要由視頻會議系統(tǒng)本地接口、Web API、WebRTC三大模塊組成。各個模塊主要實現(xiàn)的功能如下：

① 視頻會議系統(tǒng)本地接口：主要負(fù)責(zé)Android系統(tǒng)中音視頻接口及網(wǎng)絡(luò)接口與Web API接口的連接。

② Web API：開發(fā)人員用來開發(fā)基于Web的應(yīng)用，本系統(tǒng)中，該模塊的主要功能是實現(xiàn)視頻會議系統(tǒng)向下接口的兼容和向上采用HTML5完成界面的布局和開發(fā)。

③ WebRTC：該模塊包括了 WebRTC Native C＋＋API、Session Management、Video Engine、Voice Engine和Transport等小模塊。WebRTC Native C＋＋API主要是瀏覽器廠商用于實現(xiàn) Web API的函數(shù)集；Session Management是一個抽象的會話層，它支持調(diào)用構(gòu)建和提供會話建立及管理功能；Video Engine是視頻媒體鏈的框架，它實現(xiàn)了從攝像頭采集視頻圖像到網(wǎng)絡(luò)傳輸，然后從視頻網(wǎng)絡(luò)傳輸?shù)狡聊伙@示整個完整過程的解決方案；Voice Engine是音頻媒體鏈的框架，它實現(xiàn)了從音頻采集卡到網(wǎng)絡(luò)傳輸端等整個功能的解決方案；Transport是網(wǎng)絡(luò)傳輸模塊，實現(xiàn)了STUN、RTP－over－TCP、NAT和防火墻穿越的關(guān)鍵技術(shù)。

3.2 客戶端主要功能模塊

3.2.1視頻通信模塊

視頻通信模塊是整個系統(tǒng)的核心模塊，該模塊負(fù)責(zé)視頻會議系統(tǒng)中建立呼叫、接聽電話以及音視頻處理和網(wǎng)絡(luò)傳輸?shù)恼麄€流程。

（1）建立呼叫流程

客戶端成功注冊服務(wù)器后，便可以開始向其他客戶端發(fā)起呼叫，這個階段會有一個建立連接和呼叫的過程。建立呼叫的流程如圖3所示，本地客戶端發(fā)起信令請求后，運營商服務(wù)器首先會建立一個連接池，然后與視頻會議服務(wù)器和Web服務(wù)器建立連接，運營商服務(wù)器向本地客戶端添加和監(jiān)控媒體流的變化，接著本地客戶端發(fā)起請求給運營商服務(wù)器，運營商服務(wù)器向遠(yuǎn)程客戶端發(fā)起請求，然后建立連接。

圖3 通話模塊流程圖

（2）接聽電話流程

接聽電話的過程與建立呼叫的過程有所不同。遠(yuǎn)程客戶端接收到應(yīng)答后，運營商服務(wù)器建立一個連接池，然后與視頻會議服務(wù)器和Web服務(wù)器建立連接，隨后，運營商服務(wù)器向本地客戶端發(fā)起信令消息，本地客戶端添加視頻流給服務(wù)器，同時運營商服務(wù)器監(jiān)控本地媒體流的變化情況，最后，本地客戶端與遠(yuǎn)程客戶端之間開始視頻通話。接聽電話的流程如圖4所示。

圖4 接聽電話流程圖

（3）音視頻處理和網(wǎng)絡(luò)傳輸

圖5 音視頻處理和網(wǎng)絡(luò)傳輸流程圖

音視頻處理和網(wǎng)絡(luò)傳輸?shù)牧鞒倘鐖D5所示。系統(tǒng)中，視頻引擎采用了WebRTC技術(shù)。WebRTC為基于網(wǎng)頁的視頻開發(fā)提供了一個框架，對于視頻而言，它實現(xiàn)了從視頻采集、編碼、傳輸、顯示的全部功能。在圖5中，箭頭的方向表示了視頻流的數(shù)據(jù)流向，首先，帶有攝像頭的Android移動終端通過攝像頭采集本地視頻圖像并編碼，然后經(jīng)過網(wǎng)絡(luò)傳輸層，由視頻會議服務(wù)器發(fā)送到各個視頻會議客戶端，客戶端通過Chrome瀏覽器交給WebRTC進(jìn)行數(shù)據(jù)的接收和處理，最后，處理好的數(shù)據(jù)流在客戶終端上及時顯示和播放。

本系統(tǒng)采用了VP8編解碼技術(shù)，VP8是視頻壓縮解決方案廠商On2Technologies公司推出的第8代On2視頻標(biāo)準(zhǔn)。它能以更少的數(shù)據(jù)提供更高質(zhì)量的視頻，并且只需較低的處理能力即可播放視頻，專為低遲延而設(shè)計開發(fā)，特別適合應(yīng)用于基于網(wǎng)頁的視頻會議系統(tǒng)。

在WebRTC中，Device Manager最多可以管理10個輸入設(shè)備；Channel Manager最多可以管理4個Channel［3］。當(dāng)然，這些最值設(shè)置可以根據(jù)自己的系統(tǒng)進(jìn)行修改，在本系統(tǒng)中，Device Manager的值為8；Channel Manager的值為2。系統(tǒng)中編解碼器可支持的最大分辨率為1920×1200，這個與客戶終端硬件設(shè)備的配置緊密相關(guān)。

3.2.2瀏覽器內(nèi)部界面顯示模塊

整個系統(tǒng)中，客戶端瀏覽器界面的開發(fā)采用HTML5和Javasvript來實現(xiàn)，客戶端之間視頻的交互由Chrome瀏覽器完成。在界面顯示中，我們利用HTML5提供的audio和video元素將客戶端接收到的視頻嵌入到網(wǎng)頁里面，然后進(jìn)行播放。下面是系統(tǒng)中視頻獲取和顯示的核心代碼。它的精華之處在于全部的體驗僅由18行代碼完成，我們用 HTML5提供的 webkitGetUser Media API［4］從本地攝像頭獲取到一組媒體流并將其顯示在HTML5＜video＞元素中。

對于視頻播放的控制和畫面的調(diào)節(jié)主要由網(wǎng)頁中的控件來完成，這些控件是由HTML5本身提供的，其中包括了本地視頻控件video元素的controls屬性。

4 編譯與測試

系統(tǒng)的各個功能模塊實現(xiàn)之后，我們要對整個項目進(jìn)行編譯和測試。編譯的過程是在Linux環(huán)境下來完成的，需要的工具有g(shù)it、subver sion和depot＿tools。這個部署工具是由谷歌公司專為Chrome提供的，它包含了下載代碼、同步代碼和上傳代碼等功能，編譯的過程中比較關(guān)鍵的一步是執(zhí)行g(shù)client runhooks－force，它對Chrome進(jìn)行了一次解析。

系統(tǒng)測試環(huán)境由運營商服務(wù)器、視頻會議服務(wù)器、Web服務(wù)器和搭建有Chrome瀏覽器的Android智能終端組成。測試結(jié)果表明，系統(tǒng)運行穩(wěn)定，人機(jī)交互過程中圖像清晰流暢，語音和視頻能夠保持同步，基本達(dá)到了視頻會議系統(tǒng)設(shè)計的要求。

結(jié) 語

本文所設(shè)計的基于HTML5＋WebRTC技術(shù)的視頻會議系統(tǒng)屬于無線通信領(lǐng)域，系統(tǒng)融合了目前先進(jìn)的HTML5和WebRTC技術(shù)，在瀏覽器領(lǐng)域開創(chuàng)了一種新的通信模式，在實際應(yīng)用中具有潛在的市場價值。雖然，本系統(tǒng)仍然有許多的不足之處，比如功能單一，系統(tǒng)的運作完全依靠網(wǎng)絡(luò)的通信質(zhì)量等，將在下一步研究中盡量克服。

［1］Alexis Goldstein，Louis Lazaris，Estelle Weyl.HTML5與CSS3實戰(zhàn)指南［M］.宋松譯.北京：人民郵電出版社，2011.

［2］韓超，梁泉.Android系統(tǒng)原理及開發(fā)要點詳解［M］.北京：電子工業(yè)出版社，2010.

［3］Cymlife.google開源了 WebRTC項目（5）［EB／OL］.［2012－10－15］.http：／／blog.csdn.net／cymlife ／article／details／6579861.

［4］Antbony T Holdener III，Mario Andres Pagella.深入 HTML5應(yīng)用開發(fā)［M］.秦緒文，李松峰，譯.北京：人民郵電出版社，2011.