基于HTML5实现Web终端与IMS终端互通*

卫亚兵

(中国电子科技集团公司第三十研究所,四川成都610041)

基于HTML5实现Web终端与IMS终端互通*

卫亚兵

(中国电子科技集团公司第三十研究所,四川成都610041)

HTML5(Hyper TextMarkup Language 5)技术是新一代Web应用程序构建的基准,它包括了全新更加丰富的标签格式、高效的双向通信机制以及Web化多媒体特性。利用HTML5的这些新特性,可以构建出Web化的智能多媒体终端,实现基于浏览器的多媒体音视频实时通信。基于HTML5技术实现Web化智能多媒体终端具备跨操作系统平台、免安装等优点。通过WebRTC2SIP服务器网关,能够实现基于HTML5的Web智能多媒体终端与传统IMS/LTE多媒体终端之间实时音视频通信。

第五代超文本标记语言 双向通信机制 智能多媒体终端 WebRTC2SIP服务器 实时通信

0 引 言

HTML5(Edition Five,Hyper Text Markup Language)是超文本标记语言的最新版本,与以前版本不同,HTML5并非仅仅用来表示Web内容,而是将Web带入一个成熟的应用平台。HTML5技术显著增强了终端浏览器的功能,能够在跨平台环境下具备富Web应用的交互能力,将音频、视频、图像、动画以及一些交互特性标准化,为构建下一代Web应用程序提供了基准性规范。

传统的IMS/LTE智能多媒体终端[1],采用C/S通信模式,具有很强的系统平台相关性,用户须事先在指定的系统平台上安装相应的客户端程序才能使用其业务。而基于HTML5技术的Web多媒体终端,无需用户任何安装,无论用户处于何种系统平台,只需使用支持HTML5的浏览器即可加载Web多媒体终端,进而实现音视频多媒体通信业务。

基于HTML5技术的Web多媒体终端不仅具有传统多媒体终端的富媒体交互能力,同时具有系统平台无关性,方便用户跨平台使用,必将是未来的发展方向之一。考虑到目前大规模的IMS/LTE传统智能终端的应用,如果能够将Web智能终端与IMS/LTE终端互通,将会加快其发展和应用推进。

1 Web多媒体终端简介

Web多媒体终端首先需要具备双向的通信能力,能够作为主叫主动呼叫对端,也可以作为被叫,接收对端的呼叫。其次需要具备Web化的音视频多媒体处理引擎,实现音视频的采集、编码和传输等功能。在实现Web化的多媒体终端涉及到两个新技术,一是WebSocket浏览器式双向通信机制,二是WebRTC浏览器式音视频处理引擎技术。

1.1 WebSocket技术

在HTML5标准体系中,WebSocket[2]技术是一个非常重要的新特性,它定义了一个全双工通信信道,即浏览器可以利用WebSocket协议与对端主机双向通信,比XMLHTTPRequest更加强大、高效而且有效减少流量和降低网络带宽的占用。

通常浏览器访问Web页面都会向服务器发送一个HTTP请求,Web服务器识别请求后返回响应。大多数情况下实时性要求较高的Web应用都是围绕轮询和服务器推送技术展开,都会涉及HTTP请求和响应报头,包含了大量不必要的报头数据,效率低下且带宽资源占用较大。对于WebSocket通信,客户端和服务器在初始握手时就将HTTP升级为WebSocket协议,一旦连接成功,即以全双工模式在客户端和服务器之间传送WebSocket文本消息,相比传统的轮询技术,WebSocket带来了高效和节流等新特性。

基于WebSocket协议的全双工、高效节流的新特性,为开发Web化的智能多媒体终端提供了支撑。目前主流的浏览器已从不同的版本开始支持WebSocket协议了。具体如表1所示[3]。

表1 WebSocket浏览器支持情况Table1 Browsers support forWebSocket

1.2 WebRTC技术

在HTML5技术标准中,WebRTC[4](Web Real-Time Communication)技术是另一个非常重要的新特性,它是一种基于浏览器的多媒体实时通信技术,包括语音、视频、数据等。WebRTC将多媒体处理能力直接嵌入到浏览器中,不需要安装任何扩展和插件即可实现传统的多媒体实时通信。在此之前,基于浏览器的实时通信都需要通过安装插件的方式实现,如flash,而且采用私有协议,互通性较差。

WebRTC技术定义了一系列标准化的JavaScript接口和网络协议,并将多媒体处理能力向Web应用开发者开放。WebRTC的技术框架如图1所示[5]。

图1 WebRTC体系框架Fig.1 Architecture ofWebRTC

Web应用层是Web开发者基于支持WebRTC浏览器开发的类似于网络视频聊天的Web应用, Web API层是面向Web开发者的WebRTC标准API。音频引擎包含了一系列音频处理技术,包括Opus编解码、语音NetEQ技术、回声消除/噪声抑制技术等。视频引擎包括了VPX/H264编解码、视频抖动缓冲、图像增强模块等。在传输层,WebRTC采用RTP/SRTP传输媒体流,采用ICE技术在STUN或TURN服务器的支持下实现媒体流的私网穿透。WebRTC技术向浏览器引入了音视频引擎、网络传输功能,提供开源编码格式,为实现Web智能多媒体终端提供了另一必不可少的支撑。

1.3 HTML5与Flash技术的比较

在Web化智能多媒体通信领域,不得不提到Adobe Flash技术,通过安装flash player插件即可以实现功能强劲的Web化富客户端,包括音频、视频等多媒体实时通信。例如著名的基于Flash技术的BigBlueButton开源Web多媒体通信系统,该系统首

先需要用户在Web浏览器前端安装flash player插件,用于完成音视频多媒体数据的处理;另外基于RTMP协议在前后端之间传输控制和媒体数据。

相对HTML5技术来说,Flash技术一是需要安装插件支持,二是控制与媒体数据融合在同一个协议通道中传输,与NGN/IMS网络控制与业务分离的思想背离,三是技术标准封闭且需要收费。诚然通过Flash技术也可以实现Web富客户端与传统SIP终端的互通,但必须在后端服务器处对控制和媒体数据进行分离、转换。这样一来,对于实时多媒体通信来说,延时和处理性能都可能存在瓶颈。而HTML5技术则无需额外安装插件,技术标准开放、免费,实现了呼叫控制和媒体处理分离,更适合用来实现与传统SIP终端的互通。

1.4 SIPML5浏览器终端

SIPML5[6]是一款基于HTML5技术开发的Web智能多媒体终端,由Doubango通信公司开发并开放源码。该Web智能多媒体终端使用SIP协议作为呼叫控制信令,基于WebSocket技术实现SIP协议消息的双向传输。使用浏览器内嵌的WebRTC功能模块实现音视频多媒体处理和传输。搭配支持WebSocket双向传输协议的SIP服务器即可实现SIPML5浏览器终端的SIP注册、呼叫和多媒体通信业务。

SIPML5浏览器终端与支持WebSocket传输协议的SIP服务器通信框架如图2所示。

图2 SIPML5浏览器终端通信框架Fig.2 Communication architecture of SIPML5

目前Asterisk开源服务器自版本11之后支持基于WebSocket传输协议的SIP通信,Tomcat服务器自版本7之后也开始提供基于WebSocket协议的SIP Servlet。SIPML5浏览器终端使用JavaScript语言实现SIP/SDP协议栈,向支持WebSocket的SIP服务器注册、发起呼叫,呼叫建立后,使用WebRTC模块采集音视频多媒体数据、编码和传输,实现浏览器智能终端之间的音视频通信。但要实现SIPML5浏览器终端与传统IMS智能终端之间的互通,还需要借助转换网关的支撑,如下面将要介绍的WebRTC2SIP互通网关[6]。

2 WebRTC2SIP网关简介

基于HTML5技术的Web智能终端目前正刚刚兴起,具有较多的优点,将是未来智能终端的发展趋势之一。但相对于传统的IMS/LTE智能终端来说,应用规模还很小,如果能够实现与IMS/LTE智能终端的互通,必将能够加快其自身的发展应用进程。

WebRTC2SIP[6]网关就是为了解决HTML5终端与IMS/LTE终端互通而出现的,由Doubango通信公司开发并开放源码。WebRTC2SIP网关的技术框架如图3所示。

图3 WebRTC2SIP网关框架Fig.3Architecture ofWebRTC2SIP

WebRTC2SIP网关主要由SIP Proxy模块、WebRTC Breaker模块、Media Coder模块以及Clickto-call模块组成。其中SIP Proxy模块完成HTML5浏览器终端侧WebSocket传输的SIP协议到传统UDP/TCP传输的SIP协议之间的转换,实现SIP呼叫控制消息的互通。WebRTC Breaker模块主要完成HTML5浏览器终端侧音视频媒体流与传统IMS网络侧RTP/RTCP媒体流之间的转换。Media Coder模块主要是完成HTML5浏览器终端侧音视频编码格式与IMS网络侧音视频编码格式之间的转码。WebRTC Breaker与Media Coder模块结合起来共同完成HTML5浏览器终端侧与IMS网络侧之间的媒体互通。Click-to-call是WebRTC2SIP网关另外提供的一个点击呼叫业务模块,它与HTML5浏览器终端与IMS终端互通相关性不大,此处不做深入介绍。

3 HTM L5终端与IMS终端互通方案

HTML5浏览器终端由于采用的技术体制与IMS/LTE传统的智能终端之间存在差异,导致他们

之间需要借助一个转换网关的帮助,才能实现SIP呼叫控制和音视频媒体流两个层面的转换互通[6]。

从图4互通框架中可以看到,WebRTC2SIP网关在其中扮演了桥梁转换的角色。下面分别对其中三个转换模块进行较详细的描述。

图4 HTML5浏览器终端与IMS/LTE终端互通框架Fig.4 Inter-communication architecture of between HTML5 browers terminals and IMS/LTE terminals

3.1 SIPProxy模块

SIP Proxy[6]模块主要作用就是将基于Web-Socket协议传输的SIP消息与传统SIP网络中基于UDP、TCP或TLS协议传输的SIP消息进行互转,实现不同传输协议制式中的SIP消息代理转换功能。

下面以注册流程为例叙述SIP代理模块的转换处理。代理模块注册流程如图5所示。

图5 SIP代理模块注册流程Fig.5 Registration flow of SIP proxymodule

(1)HTML5浏览器侧SIP注册消息

F1 REGISTER Web浏览器-＞WebRTC2SIP (WS)

REGISTER sip:proxy.example.com SIP/2.0

Via:SIP/2.0/WS df7 jal23 ls0d.invalid;

branch=z9hG4b5

From:sip:browser@example.com;tag=abc

To:sip:browser@example.com

Call-ID:abcdefghijklmnopqrstuvwxyz

CSeq:1 REGISTER

Max-Forwards:70

Contact:＜sip:browser@df7jal23ls0d.invalid;

transport=ws＞

由于Web浏览器无法直接获取到本机的地址和端口,导致SIP注册请求消息中使用了无效的地址,分别在Contact和Via消息头字段中。这样的SIP消息如果直接发送到传统的SIP服务器中将无法处理,同时由于基于WebSocket协议传输,也不可能正确的传到传统的SIP服务器中。

(2)WebRTC2SIP网关转换后的SIP注册消息

F2 REGISTERWebRTC2SIP-＞SIP Network (UDP)

REGISTER sip:proxy.example.com SIP/2.0

Via:SIP/2.0/UDP 66.66.66.66:5060;

branch=z9hG4b5;rport

Via:SIP/2.0/TCP 192.168.0.9:55210;rport;

branch=z9hG4b6;ws-hacked=WS

From:sip:browser@example.com;tag=abc

To:sip:browser@example.com

Call-ID:abcdefghijklmnopqrstuvwxyz

CSeq:1 REGISTER

Max-Forwards:70

Contact:＜sip:browser@66.66.66.66:5060;

transport=udp＞

经过转换后的SIP注册消息替换了Contact和Via消息头字段中的地址信息,再将转换后的SIP注册请求转发到SIP网络中,才能被正确的接收和处理。

3.2 WebRTCBreaker模块

HTML5标准中的WebRTC规范强制要求支持ICE、DTLS和SRTP媒体传输,而大多数的SIP网络设备并不支持这些技术。因此使用WebRTC Breaker模块来协商、转换这两种完全不同媒体流制式并且使他们互通。

WebRTC Breaker[6]模块的启用可以通过HTML5浏览器终端进行设置,但必须在注册之前就选择启用该模块。启用WebRTC Breaker模块后,从HTML5浏览器终端发出的SIP消息的Uri记录地址中都包含有“rtcweb-breaker=yes”参数,整个媒体流转换过程类似B2BUA模式,衔接了两段不同模式的媒体流。

具体流程如图6所示。

图6 WebRTC Breaker模块媒体流转换Fig.6 Media flow transform ofWebRTCbreakermodule

3.3 MediaCoder模块

WebRTC标准在音频编码方面强制定义了两种格式,分别是opus和g711。而视频编码格式暂时还处在讨论阶段,目前的选择主要在VPX和H.264之间。VPX视频编码格式主要优点是免费,但缺点是应用范围不广;H.264视频编码格式应用范围很广,但不是免费使用的。

当前各大浏览器厂商结合自己的情况,都有着不同的视频编码选择倾向。其中Google、Mozilla和Opera厂商倾向使用免费的VPX视频编码格式,而微软、爱立信则倾向选择H.264视频编码格式。

针对WebRTC侧的媒体流编码格式标准与传统IMS/LTE网络侧的不同,为了使两者互通,必须借助媒体转码模块的支撑。

下面是媒体转码模块的框架图,如图7所示[6]。

图7 Media Coder媒体转码Fig.7 Media Coder architecture

4 结 语

HTML5是一项新兴的技术标准,增添了多种标签,可以实现更加丰富多彩的Web应用。尤其是加入了WebRTC多媒体处理和WebSocket双向传输这两个技术标准,使得基于HTML5实现Web版多媒体智能SIP终端成为了可能。结合Web浏览器的平台无关性,Web应用免安装等特点,Web化的智能多媒体终端给用户带来了不一样的体验,将会是未来的主流趋势之一。实现Web化的智能多媒体终端与传统IMS/LTE智能终端的互通,必将极大的推进Web化智能终端的应用和发展。

[1] 柯卫,沈雷,赵化明.基于IMS的CDMA视频通信业务关键技术研究[J].通信技术,2011,44(09):65-67.

KEWei,SHEN Lei,ZHAO Hua-ming.Study on Key Technologies of CDMA Network Video Telephony Services based on IMS[J].Communications Technology,2011,44 (09):65-67.

[2] 李代立,陈榕.WebSocket在Web实时通信领域的研究[J].电脑知识与技术,2010(06):7923-7925,7935.

LI Dai-li,CHEN Rong.The Research of WebSocket based on Web Real-time Communication[J].Computer Knowledge and Technology,2010,6:7923-7925,7935.

[3] 张志明,柯卫.基于HTML5的视频通信云服务应用技术研究[J].电信科学,2012(01):31-34.

ZHANG Zhi-ming,KEWei.Research on Techniques of Cloud Service Applications in HTML5-Based Video Communication[J].Telecommunications Science,2012 (01).31-34.

[4] 屈振华,李慧云,张海涛,等.WebRTC技术初探[J].电信科学,2012(01):106-110.

QU Zheng-hua,LI Hui-yun,ZHANG Hai-tao etc.A Preliminary Exploration of Arising WebRTC Technology [J].Telecommunications Science,2012(01):106-110.

[5] 梁艳.基于HTML5的WebRTC技术浅析[J].信息通信技术,2014(02):52-56.

LIANG Yan.Analysis of webRTC Technology Based on HTML5[J].Information and CommunicationTechnologies,2014(02):52-56.

[6] Mamadou DIOP.webrtc2sip-Smart SIP and Media Gateway for WebRTC endpoints Technical Guide[EB/OL]. (2013)[2014-07-28].http://www.doubango.org.

卫亚兵(1979—),男,工程师,硕士,主要研究方向为下一代网络和多媒体通信。

WEIYa-bing(1979-),male,engineer, M.Sci.,mainly engaged in NGN and multimedia communication.

HTM L5-based Interflows of Web Terminals with IMS Terminals

WEI Ya-bing
(No.30 Instituteof CETC,Chengdu Sichuan 610041,China)

HTML5(Hyper Text Markup Language 5)technology is a new-generation standard for establishing Web applications,includingmany new characteristics,such as completely-new andmore abundant label format, high-efficiency and bi-directional communication mechanisms and multimedia capability of Web.By using these new charateristics of HTML5 technology,Web′s intelligentmultimedia terminals could be established and real-time communication ofmultimedia audio/video alsobased on browsersbe realized.These Web′s intelligent multimedia terminals based on HTML5 technology enjoys the supriorities of cross-os and installation-free. Meanwhile,Web′s intelligentmu ltimedia terminals based on HTML5 could achieve real-time communication with the traditional IMS/LTE legacy intelligent terminals through WebRTC2SIP server′s gateway.

HTML5;bi-directional communication mechanism;intelligent multimedia terminals; WebRTC2SIP server;real-time communication

TN915.41

A

002-0802(2014)12-1459-05

10.3969/j.issn.1002-0802.2014.12.023

2014-09-18;

2014-11-09 Received date：2014-09-18;Revised date：2014-11-09