Android平臺(tái)上基于HTML5＋WebRTC的視頻會(huì)議系統(tǒng)

尹文剛，楊斌

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

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

引 言

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

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

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

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

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

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

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

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

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

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

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

系統(tǒng)主要由Android智能移動(dòng)終端客戶端和運(yùn)營(yíng)商服務(wù)器、視頻會(huì)議服務(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)開(kāi)發(fā)中的關(guān)鍵技術(shù)

2.1 HTML 5

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

2.2 WebRTC

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

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

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

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

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

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

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

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

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

3.2 客戶端主要功能模塊

3.2.1視頻通信模塊

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

（1）建立呼叫流程

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

圖3 通話模塊流程圖

（2）接聽(tīng)電話流程

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

圖4 接聽(tīng)電話流程圖

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

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

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

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

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

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

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

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

4 編譯與測(cè)試

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

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

結(jié) 語(yǔ)

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

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

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

［3］Cymlife.google開(kāi)源了 WebRTC項(xiàng)目（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)用開(kāi)發(fā)［M］.秦緒文，李松峰，譯.北京：人民郵電出版社，2011.