Android平臺上基于HTML5＋WebRTC的視頻會議系統

尹文剛，楊斌

（西南交通大學 信息科學與技術學院，成都610031）

尹文剛（研究生），主要研究方向是嵌入式系統軟件開發；楊斌（教授），主要研究方向是單片機及嵌入式系統應用。

引 言

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

1 系統設計方案和系統結構

1.1 系統設計方案

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

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

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

③ 客戶端憑借系統內置的攝像頭和麥克風，采集視頻圖像和語音信號，通過Chrome瀏覽器接入Internet建立連接，在網絡傳輸層利用RTP／RTCP協議以IP數據包的形式，實時傳輸語音和視頻數據給其他客戶端；

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

1.2 系統結構

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

圖1 基于HTML5＋WebRTC技術的視頻會議系統結構

系統主要由Android智能移動終端客戶端和運營商服務器、視頻會議服務器、Web服務器構成的服務器端兩大模塊組成，客戶終端主要采用Android操作系統的智能手機和PDA等嵌入式設備。客戶終端包括了Android操作系統和搭建在操作系統之上的Chrome瀏覽器以及網絡模塊，該客戶端硬件設備具備前置和后置攝像頭的功能。

2 系統開發中的關鍵技術

2.1 HTML 5

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

2.2 WebRTC

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

3 系統客戶端的設計

3.1 系統客戶端的體系架構

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

圖2 客戶端系統架構

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

① 視頻會議系統本地接口：主要負責Android系統中音視頻接口及網絡接口與Web API接口的連接。

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

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

3.2 客戶端主要功能模塊

3.2.1視頻通信模塊

視頻通信模塊是整個系統的核心模塊，該模塊負責視頻會議系統中建立呼叫、接聽電話以及音視頻處理和網絡傳輸的整個流程。

（1）建立呼叫流程

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

圖3 通話模塊流程圖

（2）接聽電話流程

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

圖4 接聽電話流程圖

（3）音視頻處理和網絡傳輸

圖5 音視頻處理和網絡傳輸流程圖

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

本系統采用了VP8編解碼技術，VP8是視頻壓縮解決方案廠商On2Technologies公司推出的第8代On2視頻標準。它能以更少的數據提供更高質量的視頻，并且只需較低的處理能力即可播放視頻，專為低遲延而設計開發，特別適合應用于基于網頁的視頻會議系統。

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

3.2.2瀏覽器內部界面顯示模塊

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

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

4 編譯與測試

系統的各個功能模塊實現之后，我們要對整個項目進行編譯和測試。編譯的過程是在Linux環境下來完成的，需要的工具有git、subver sion和depot＿tools。這個部署工具是由谷歌公司專為Chrome提供的，它包含了下載代碼、同步代碼和上傳代碼等功能，編譯的過程中比較關鍵的一步是執行gclient runhooks－force，它對Chrome進行了一次解析。

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

結 語

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

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

［2］韓超，梁泉.Android系統原理及開發要點詳解［M］.北京：電子工業出版社，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應用開發［M］.秦緒文，李松峰，譯.北京：人民郵電出版社，2011.