Android平台上基于HTML5+WebRTC的视频会议系统

http://www.mesnet.com.cn/fileup/HTML/20121121.shtml

Android平台上基于HTML5+WebRTC的视频会议系统

尹文刚，杨斌
西南交通大学 信息科学与技术学院，成都610031

摘要: 设计了一种基于Chrome浏览器的视频会议系统。该系统采用C/S和B/S混合架构模型，融合HTML5、WebRTC技术于一体，运行在Android系统的智能移动终端上。其特点是，系统中客户端浏览器内部无需安装任何插件即可实现实时视频和语音的通信，系统操作简单，用户界面美观大方，具有很强的实用性，为未来基于网页视频会议系统的开发奠定了一定的基础。
关键词: Android；HTML5；WebRTC； 视频会议系统
中图分类号: TP316文献标识码: A

Video Conference System Based on HTML5+WebRTC on Android Platform
Yin Wengang, Yang Bin
(School of Information Science & Technology, Southwest Jiaotong University, Chengdu 610031, China)
Abstract： A video conference system based on Chrome browser is designed. Using C/S and B/S hybrid architecture model, the system combines HTML5 and WebRTC technologies and runs on Android smart mobile terminal. The characteristic is that the client browser of the system without installing any plugin can realize realtime video and audio communication. The system is simple, has elegant user interface and strong practicability, lay a foundation for the future development based on Web video conference system.
Key words: Android; HTML5; WebRTC; video conference system

引言
　　目前，基于网页的视频会议系统大多数情况下，都是通过第三方插件或集成在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/WiFi接入Internet，利用Chrome浏览器登录服务器，完成用户注册的功能；
③ 客户端凭借系统内置的摄像头和麦克风，采集视频图像和语音信号，通过Chrome浏览器接入Internet建立连接，在网络传输层利用RTP/RTCP协议以IP数据包的形式，实时传输语音和视频数据给其他客户端；
④ Chrome浏览器上视频会议系统界面的开发。作为一个系统级应用，友好、美观、大方的用户界面显得尤为重要，本系统中我们是通过HTML5和JavaScript API来实现的。
1.2 系统结构
　　系统的总体架构采用了客户端/服务器（C/S）和浏览器/服务器（B/S）混合架构模型，客户端利用运营商提供的无线网络或者自身的WiFi模块接入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就可以达到实时通信（RealTime 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、RTPoverTCP、NAT和防火墙穿越的关键技术。
3.2 客户端主要功能模块
3.2.1 视频通信模块
　　视频通信模块是整个系统的核心模块，该模块负责视频会议系统中建立呼叫、接听电话以及音视频处理和网络传输的整个流程。
(1) 建立呼叫流程
　　客户端成功注册服务器后，便可以开始向其他客户端发起呼叫，这个阶段会有一个建立连接和呼叫的过程。建立呼叫的流程如图3所示，本地客户端发起信令请求后，运营商服务器首先会建立一个连接池，然后与视频会议服务器和Web服务器建立连接，运营商服务器向本地客户端添加和监控媒体流的变化，接着本地客户端发起请求给运营商服务器，运营商服务器向远程客户端发起请求，然后建立连接。

图3 通话模块流程图
(2) 接听电话流程
　　接听电话的过程与建立呼叫的过程有所不同。远程客户端接收到应答后，运营商服务器建立一个连接池，然后与视频会议服务器和Web服务器建立连接，随后，运营商服务器向本地客户端发起信令消息，本地客户端添加视频流给服务器，同时运营商服务器监控本地媒体流的变化情况，最后，本地客户端与远程客户端之间开始视频通话。接听电话的流程如图4所示。

图4 接听电话流程图
(3) 音视频处理和网络传输
　　音视频处理和网络传输的流程如图5所示。系统中，视频引擎采用了WebRTC技术。WebRTC为基于网页的视频开发提供了一个框架，对于视频而言，它实现了从视频采集、编码、传输、显示的全部功能。在图5中，箭头的方向表示了视频流的数据流向，首先，带有摄像头的Android移动终端通过摄像头采集本地视频图像并编码，然后经过网络传输层，由视频会议服务器发送到各个视频会议客户端，客户端通过Chrome浏览器交给WebRTC进行数据的接收和处理，最后，处理好的数据流在客户终端上及时显示和播放。

图5 音视频处理和网络传输流程图
　　本系统采用了VP8编解码技术，VP8是视频压缩解决方案厂商On2 Technologies公司推出的第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>元素中。
// 从Android移动终端本地摄像头获取一组媒体流，并且将其显示在HTML5<video>元素中
<html>
　　<script>
　　　　Function load( ){
　　　　　　Var video=document.getElementById(getVideo);
　　　　　　If (navigator.webkitGetUserMedia){
　　　　　　　　Navigator.webkitGetUserMedia(video,
　　　　　　　　Function(stream){video.src=webkitURL.create ObjectURL(stream)};
　　　　　　　　Function(error){alert(ERROR: +error.toString());}
　　　　　　}else{
　　　　　　　　Alert(webkitGetUserMedia not supported);
　　　　　　　　}
　　}
　　</script>
　　<body οnlοad="load( )">
　　　　<video autoplay= "autoplay" id="getVideo" />
　　</body>
</html>
　　对于视频播放的控制和画面的调节主要由网页中的控件来完成，这些控件是由HTML5本身提供的，其中包括了本地视频控件video元素的controls属性。
4 编译与测试
　　系统的各个功能模块实现之后，我们要对整个项目进行编译和测试。编译的过程是在Linux环境下来完成的，需要的工具有git、subver sion和depot_tools。这个部署工具是由谷歌公司专为Chrome提供的，它包含了下载代码、同步代码和上传代码等功能，编译的过程中比较关键的一步是执行gclient runhooksforce，它对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].[20121015]. http://blog.csdn.net/cymlife /article/details/6579861.
[4] Antbony T Holdener III，Mario Andres Pagella. 深入HTML5应用开发[M].秦绪文，李松峰,译.北京：人民邮电出版社，2011.
尹文刚（研究生），主要研究方向是嵌入式系统软件开发；杨斌（教授），主要研究方向是单片机及嵌入式系统应用。
（责任编辑：梅栾芳 收稿日期：2012-07-02）