基于HTML5實現Web終端與IMS終端互通*

衛亞兵

(中國電子科技集團公司第三十研究所,四川成都610041)

基于HTML5實現Web終端與IMS終端互通*

衛亞兵

(中國電子科技集團公司第三十研究所,四川成都610041)

HTML5(Hyper TextMarkup Language 5)技術是新一代Web應用程序構建的基準,它包括了全新更加豐富的標簽格式、高效的雙向通信機制以及Web化多媒體特性。利用HTML5的這些新特性,可以構建出Web化的智能多媒體終端,實現基于瀏覽器的多媒體音視頻實時通信?；贖TML5技術實現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