HTML5 視頻重定向在桌面虛擬化中的應(yīng)用

翟海波，車剛健

（中興通訊股份有限公司，江蘇南京 210000）

0 引言

伴隨云計(jì)算技術(shù)發(fā)展，上“云”已經(jīng)成為一種趨勢(shì)。虛擬化技術(shù)作為云計(jì)算最重要的技術(shù)，從某種角度來(lái)說(shuō)它是云計(jì)算的基石［1］。桌面虛擬化［2］作為虛擬化的一個(gè)重要解決方案，目的是使資源能按需分配、統(tǒng)一調(diào)度和管理，具有低能耗、低成本、安全性高、易于升級(jí)和維護(hù)等優(yōu)點(diǎn)，能為企業(yè)節(jié)省運(yùn)營(yíng)成本和維護(hù)成本。

多媒體視頻重定向在桌面虛擬化中是一個(gè)巨大挑戰(zhàn)，尤其是在服務(wù)器資源有限、帶寬受到限制的情況下會(huì)面臨很多問(wèn)題，如視頻卡頓、畫(huà)面和聲音延遲以及音視頻不同步等。目前針對(duì)視頻重定向大都是基于本地視頻，而對(duì)于在線視頻大都停留在Flash 播放的視頻，但Flash 視頻依賴于控件，用戶需要事先安裝該控件。此外，Adobe 公司已經(jīng)宣布停止對(duì)Flash 更新，F(xiàn)lash 退出歷史舞臺(tái)是遲早的事。隨著HTML5 技術(shù)的發(fā)展，尤其是其對(duì)視頻標(biāo)簽的支持，促使各大廠商紛紛加入，如優(yōu)酷、土豆、騰訊等，給桌面虛擬化帶來(lái)了新的機(jī)遇和挑戰(zhàn)。本文研究了一種基于HTML5的在線視頻重定向方案。

1 相關(guān)技術(shù)介紹

1.1 桌面虛擬化

桌面虛擬化，簡(jiǎn)單說(shuō)就是服務(wù)器通過(guò)虛擬化技術(shù)創(chuàng)建很多虛機(jī)，通過(guò)桌面協(xié)議與云終端進(jìn)行交互后畫(huà)面回顯的一種解決方案，用戶訪問(wèn)的桌面就像是訪問(wèn)傳統(tǒng)的本地桌面一樣。目前市場(chǎng)上主流解決方案有Cirtix 公司的XenDesktop［3-5］、Vmware 公司的Horizon View［6］、Microsoft 的MED-V［7］以及中興的云電腦等，它們分別使用ICA、PCOIP、RDP、ICE 協(xié)議完成服務(wù)器與云終端之間的交互。盡管從解決方案的制定到協(xié)議的交互存在著差異，但無(wú)論哪種虛擬化解決方案總體都遵循如圖1 所示的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)。

Fig.1 Desktop virtualization network architecture圖1 桌面虛擬化網(wǎng)絡(luò)拓?fù)浼軜?gòu)

1.2 HTML 5 視頻

2012 年12 月萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布HTML 5［8］規(guī)范完成，其新增的video 標(biāo)記實(shí)現(xiàn)了多媒體支持，借助Vid?eo API 可以自定義HTML 視頻控件，瀏覽器不必再使用插件方式播放視頻，避免了插件的影響。在HTML5 技術(shù)出現(xiàn)之前，大部分Web 視頻播放是通過(guò)瀏覽器插件如Adobe Flash 實(shí)現(xiàn)的，這要求客戶在觀看視頻之前安裝相應(yīng)的組件。文獻(xiàn)［9］指出HTML 5 使命是將Web 帶入一個(gè)成熟的平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像、動(dòng)畫(huà)以及更多的智能設(shè)備交互被標(biāo)準(zhǔn)化。目前國(guó)內(nèi)外主流瀏覽器的最新版本均支持HTML5的主要特性［10］，如IE 9+，F(xiàn)irefox，Chrome、Opera 以及Safari 都支持

1.3 視頻重定向

在桌面虛擬化應(yīng)用中，視頻重定向技術(shù)指服務(wù)器上部署的虛擬機(jī)播放視頻通過(guò)某種技術(shù)手段在客戶端或云終端進(jìn)行渲染。文獻(xiàn)［12-14］介紹了該技術(shù)手段包括通道技術(shù)、鉤子技術(shù)以及基于WDDM 驅(qū)動(dòng)等，實(shí)現(xiàn)有兩種方式：①將服務(wù)端的多媒體視頻播放圖像重新進(jìn)行視頻編碼處理，然后將視頻編碼數(shù)據(jù)傳輸?shù)娇蛻舳诉M(jìn)行解碼播放顯示；②視頻重定向方式，通過(guò)捕獲服務(wù)端播放器需要播放的視頻編碼流，直接將視頻編碼流發(fā)送到客戶端進(jìn)行解碼播放顯示。

文獻(xiàn)［15］通過(guò)開(kāi)發(fā)BHO 插件，結(jié)合鉤子技術(shù)攔截網(wǎng)頁(yè)視頻文件獲取視頻參數(shù)。在網(wǎng)絡(luò)允許的情況下將獲取的url 信息直接發(fā)往客戶端進(jìn)行播放；在網(wǎng)絡(luò)受限的情況下將HTTP 請(qǐng)求數(shù)據(jù)轉(zhuǎn)發(fā)到客戶端進(jìn)行播放，但該方法僅適用于老的Flash 播放器。在各大視頻網(wǎng)站紛紛支持HTML 5視頻標(biāo)簽的形勢(shì)下，未來(lái)HTML5 視頻重定向必定是研究熱點(diǎn)之一。

2 HTML 5 視頻重定向方案設(shè)計(jì)

2.1 Windows Media Fundation

基于HTML 5 播放視頻研究與Flash 視頻重定向相比，HTML 5 視頻重定向采用了一種全新方式。HTML5 視頻播放架構(gòu)采用Windows Media Fundation（簡(jiǎn)稱WMF）［16］，該架構(gòu)將取代較早的Dshow 播放架構(gòu)；WMF 架構(gòu)是由一套組件串起來(lái)的，類似于Dshow 的filter。通過(guò)把這些component 組合，形成pipeline，就可完成多媒體應(yīng)用程序所需的各種功能。與directshow［17］鏈接filter 一樣，在保持filter 功能獨(dú)立性的同時(shí)又提供靈活多變的組合功能。Media Foundation提供了Media Pipeline 和Souce Reader &Sink Writer 兩種編程模型，本文采用的是Media Pipeline 模式，其核心組件如圖2 所示。

Fig.2 Media Pipeline model圖2 Media Pipeline 模式

使用一個(gè)端到端Pipeline，類似DShow 中使用Graph?Builder、Filter 的模式。

Media Session：控制貫穿Pipeline 的數(shù)據(jù)流動(dòng)和處理任務(wù)（如質(zhì)量控制、視音頻同步、響應(yīng)格式改變），類似DShow中的GraphBuilder。

Media Sources：類似DShow 中的Source Filters，接收來(lái)自本地文件或網(wǎng)絡(luò)的數(shù)據(jù)并交給后面組件處理。此外還進(jìn)行音視頻數(shù)據(jù)解復(fù)用并輸出。

Media Foundation Transforms（MFTs）：類似DShow 中的Transform Filters，用來(lái)接收Media sources 的輸入，然后完成解碼、轉(zhuǎn)換輸出。

Media Sink：類似DShow 中的Render，該組件用來(lái)進(jìn)行最終數(shù)據(jù)的渲染。

2.2 虛機(jī)內(nèi)部設(shè)計(jì)

本文通過(guò)截獲源數(shù)據(jù)改變?cè)械囊曨l數(shù)據(jù)流向，從而實(shí)現(xiàn)視頻數(shù)據(jù)的重定向。在了解WMF 播放結(jié)構(gòu)后，通過(guò)替換原有的Media Source 就能截獲到原始數(shù)據(jù)。通過(guò)替換MFTs，一方面可以將真實(shí)數(shù)據(jù)通過(guò)網(wǎng)絡(luò)轉(zhuǎn)發(fā)到云終端上進(jìn)行播放，另一方面為了MF 架構(gòu)能夠正常運(yùn)轉(zhuǎn)，可以偽造RGB［18］數(shù)據(jù)和PCM 靜音數(shù)據(jù)交由系統(tǒng)處理。修改后的架構(gòu)如圖3 所示。

Fig.3 MF reconstruction playback architecture圖3 MF 重構(gòu)播放架構(gòu)

各部件主要功能如下：①自研的Media Sources 對(duì)網(wǎng)絡(luò)接收到的音視頻數(shù)據(jù)進(jìn)行解析和解封裝；②自研的MFTs一方面對(duì)真實(shí)音視頻數(shù)據(jù)通過(guò)網(wǎng)絡(luò)發(fā)送到云終端，另一方面?zhèn)卧霷GB 視頻數(shù)據(jù)和PCM 靜音數(shù)據(jù)交由系統(tǒng)Media Sink 處理；③Media Sink 完成音視頻播放和渲染；④云終端接收音視頻數(shù)據(jù)并進(jìn)行解碼渲染。

本文設(shè)計(jì)的關(guān)鍵點(diǎn)是對(duì)RGB 數(shù)據(jù)構(gòu)造以及對(duì)PCM 靜音數(shù)據(jù)構(gòu)造。其中PCM 靜音數(shù)據(jù)以全0 的方式進(jìn)行構(gòu)造，相對(duì)比較簡(jiǎn)單，但構(gòu)造RGB 數(shù)據(jù)需要考慮多方面因素，目的是能夠通過(guò)像素對(duì)比進(jìn)行視頻窗口區(qū)域的捕獲，具體需要從以下兩方面考慮：

（1）構(gòu)造的RGB 數(shù)據(jù)需要與源視頻比例保持一致；即源視頻寬W 和原視頻高H 滿足如下公式：

其中：W1、H1分別表示原視頻的寬度和高度；W2、H2分別表示構(gòu)造RGB 流的寬度和高度；這里W2 和H2 要盡可能小，這樣可有效降低渲染帶來(lái)的CPU 消耗。

（2）構(gòu)造的RGB 數(shù)據(jù)盡量與Web 頁(yè)面像素不同，以便于查找整個(gè)源視頻區(qū)域。

本文以接近黑色像素RGB（2，1，3）來(lái)偽造視頻數(shù)據(jù)，這樣一方面可使MF 播放架構(gòu)正常運(yùn)轉(zhuǎn)，即讀取音視頻數(shù)據(jù)、解復(fù)用、解碼、渲染等步驟正常運(yùn)行；另一方面，通過(guò)區(qū)域像素提取方法判斷源視頻區(qū)域大小S源，然后再計(jì)算視頻有效區(qū)域S有效或遮擋區(qū)域S遮擋。無(wú)遮擋窗口和有遮擋窗口場(chǎng)景如圖4 所示，為兩種有效區(qū)域。

2.2.1 視頻區(qū)域無(wú)窗口遮擋場(chǎng)景

如圖4（a）所示，步驟如下：

（1）獲取瀏覽器窗口區(qū)域，根據(jù)RGB 像素值是否為（2，1，3）并結(jié)合當(dāng)前連續(xù)像素點(diǎn)是否超過(guò)某個(gè)閾值（如10），判定該區(qū)域是否為視頻區(qū)域。

Fig.4 Video playback scene圖4 視頻播放場(chǎng)景

（2）獲取視頻區(qū)域大小后，在內(nèi)存構(gòu)建一張bitmap 兼容位圖，并對(duì)該位圖空間進(jìn)行二值化處理。由于不存在遮擋區(qū)域，所有內(nèi)存區(qū)域全部賦值為1，表示全部都是有效視頻區(qū)域，此時(shí)滿足公式（2）。

2.2.2 視頻區(qū)域有窗口遮擋場(chǎng)景

如圖4（b），該場(chǎng)景顯然比無(wú)窗口遮擋場(chǎng)景要復(fù)雜許多，計(jì)算有效視頻區(qū)域步驟如下：

（1）計(jì)算視頻區(qū)域S源，同無(wú)窗口遮擋計(jì)算。

（2）同樣需要構(gòu)建一張bitmap 兼容位圖，并對(duì)空間進(jìn)行二值化處理，只是由于遮擋區(qū)域的連續(xù)RGB 像素值不滿足（2，1，3），因此賦值為0；無(wú)遮擋區(qū)域賦值為1。滿足以下公式：

（3）分割整個(gè)視頻區(qū)域，如mxn進(jìn)行分割，應(yīng)滿足條件m

（4）循環(huán)查找分割點(diǎn)位置的像素是否為RGB（2，1，3）像素；如果不是則向左移動(dòng)找到最近的（2，1，3）或直到邊緣位置，即為遮擋區(qū)域的left 值；同理分別向上、向右和向下移動(dòng)得到top，rigth 以及bottom 值，根據(jù)（left，top，right，bottom）即可得到遮擋區(qū)域S1，同理得到遮擋區(qū)域S2和S3。

（5）把S 源和S 遮擋區(qū)域發(fā)往終端，終端再對(duì)S 遮擋區(qū)域進(jìn)行裁剪，即可得到真正的S 有效區(qū)域，即視頻觀看區(qū)域。

2.3 云終端播放器設(shè)計(jì)

在接收到虛機(jī)內(nèi)部發(fā)過(guò)來(lái)的數(shù)據(jù)后，根據(jù)終端能力或配置選擇，以硬解或軟解的方式進(jìn)行解碼顯示和音頻播放。播放控制（如暫停、快進(jìn)等）是在虛機(jī)內(nèi)部通過(guò)JavaS?cript 腳本進(jìn)行控制，其播放架構(gòu)如圖5 所示。

Fig.5 Terminal playback architecture圖5 終端播放架構(gòu)

終端根據(jù)虛機(jī)發(fā)過(guò)來(lái)的視頻源S源區(qū)域創(chuàng)建播放器窗口，收到視頻數(shù)據(jù)后分別通過(guò)開(kāi)源組件gstreamer［19］、FFm?peg 完成視頻的硬解［20］和軟解，解碼完成后在播放窗口區(qū)域進(jìn)行渲染完成視頻數(shù)據(jù)的播放，然后根據(jù)S遮擋區(qū)域進(jìn)行裁剪；當(dāng)收到音頻數(shù)據(jù)后將AAC 數(shù)據(jù)解碼成PCM 原始數(shù)據(jù)放入聲卡中完成音頻播放。此外，終端通過(guò)音視頻數(shù)據(jù)幀PTS 時(shí)間戳完成音視頻的同步操作［21］。實(shí)現(xiàn)步驟如下：

（1）防止終端處于小網(wǎng)環(huán)境，客戶端需接收虛機(jī)組件通知的目的端口，由終端側(cè)向虛機(jī)側(cè)建立音視頻鏈路。

（2）接收虛機(jī)側(cè)發(fā)來(lái)的視頻創(chuàng)建VideoReDirectCreate消息（包括寬高、幀率等），完成硬解或軟件的初始化工作。

（3）接收虛機(jī)側(cè)發(fā)來(lái)的音頻創(chuàng)建AudioReDirectCreate消息（包括格式和采樣率等），完成硬解或軟解的初始化工作。

（4）接收視頻數(shù)據(jù)VideoReDirectData（包括視頻數(shù)據(jù)和視頻裁剪區(qū)域），完成視頻數(shù)據(jù)的解碼、繪制、裁剪等工作。

（5）接收音頻數(shù)據(jù)AudioReDirectData，完成解碼和播放以及音視頻同步。音視頻同步方式較多，本文采用以音頻PTS 為基準(zhǔn)對(duì)視頻進(jìn)行同步的方式。

3 實(shí)驗(yàn)結(jié)果

本文以全屏在線播放一段1 080p 視頻進(jìn)行實(shí)驗(yàn)。虛機(jī)內(nèi)部CPU 占用率對(duì)比如圖6 所示。從對(duì)比結(jié)果看，使用本文方法的虛機(jī)CPU 資源降低約70%～80%，解決了虛機(jī)播放視頻卡頓問(wèn)題，緩解了服務(wù)器資源緊張。

4 結(jié)語(yǔ)

桌面虛擬化目前已逐漸應(yīng)用到電信、教育、醫(yī)療與金融等領(lǐng)域。隨著應(yīng)用的推廣，流媒體播放帶來(lái)的挑戰(zhàn)越來(lái)越大。本文研究了最新標(biāo)準(zhǔn)HTML5 在線視頻，通過(guò)重構(gòu)Media Foundation 的方式截獲源數(shù)據(jù)，改變?cè)幸曨l數(shù)據(jù)流向，通過(guò)圖片二值化算法找到視頻區(qū)域，從而實(shí)現(xiàn)基于HT?ML5 視頻數(shù)據(jù)的重定向。該方案不僅節(jié)省了服務(wù)器資源，而且用戶觀看在線視頻時(shí)就像訪問(wèn)本地視頻一樣，畫(huà)質(zhì)較非重定向要清晰很多。

Fig.6 Experimental results圖6 實(shí)驗(yàn)結(jié)果

最初IE 瀏覽器只有優(yōu)酷視頻網(wǎng)站進(jìn)行了HTML5 改造，嵌入了HTML5 視頻標(biāo)簽，本文以此為突破口研究其播放架構(gòu)和重構(gòu)WMF 播放構(gòu)架。之后新浪視頻網(wǎng)站進(jìn)行了HTML5 改造，本文提出的方法能在不作任何修改的情況下在新浪使用，說(shuō)明只要HTML5 視頻網(wǎng)站遵循WMF 播放架構(gòu)，本文提出的HTML 5 視頻重定向技術(shù)就能使用。實(shí)踐證明該方法通用性強(qiáng)，對(duì)研究HTML5 視頻重定向技術(shù)具有一定參考價(jià)值。