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.