在WirelessAdapter客戶端支持Chromecast 投射功能

黃旭

摘 要 2011年，星網(wǎng)視易公司與Marvel公司技術(shù)合作，開發(fā)了一款集WiFi模塊、硬盤存儲于一身的WiDiSK無線硬盤產(chǎn)品。該硬盤產(chǎn)品在業(yè)界收到廣泛關(guān)注，星網(wǎng)視易公司2013年又與TOSHIBA公司、Marvel公司通力合作，完成了一款WirelessAdapter的無線產(chǎn)品的研發(fā)。星網(wǎng)視易主要完成iOS端及Android端的APP開發(fā)工作。2013年，Google公司研發(fā)了一款新產(chǎn)品，命名為Chromecast，支持把一些網(wǎng)絡(luò)視頻、音樂、圖片通過投射的方式在電視上進(jìn)行播放。它顛覆和引領(lǐng)了電視行業(yè)的產(chǎn)品娛樂體驗，作為一款與AppleTV抗衡的硬件產(chǎn)品，人機交互效果得到了市場上的廣泛好評。這么好的產(chǎn)品，我們的WirelessAdapter的客戶端APP也集成了對它的支持。

關(guān)鍵詞 WirelessAdapter 客戶端 投射功能

中圖分類號：TP391文獻(xiàn)標(biāo)識碼：A

1 Chromecast運作原理

Chromecast是一種熒屏分享技術(shù)，可以讓用戶通過小型移動設(shè)備如手機、平板，或者PC傳送或控制如影片的內(nèi)容至大型的顯示裝置如電視機。操作起來跟AirPlay、Miracast類似。

我們以Youtube或Google Music這兩個App為例子，手機上所看到的這兩個App，被定義為Sender App，手機上所看到的這兩個App，被定義為Sender App，我們的ChromeCast Dongle算是Receiver。而一個Chromecast應(yīng)用的組成要件必須要有Sender（發(fā)送端），Receiver（接收端），Sender端有Sender App，Receiver端也要有對應(yīng)的Receiver App。

2 WirelessAdapter、Chromecast、iOS 端App之間的通信及交互方式

WirelessAdapter的iOS端App繼承了WiDiSK所具有的特點，以WebDav的方式支持分類瀏覽跟目錄瀏覽兩種方式遍歷瀏覽WirelessAdapter所接入的移動硬盤里面的內(nèi)容。下面就我們設(shè)計和實現(xiàn)的App WirelessAdapter Chromecast與硬盤間的通信方式與交互方式進(jìn)行總結(jié)。

由于App要支持多個WirelessAdapter并且支持在同一個Router下的WirelessAdapter之間切換。我們需要設(shè)計更好用的廣播或者組播方式，我們就采用與組播協(xié)議為基礎(chǔ)的Bonjour協(xié)議。

最終的通信方式是這樣的，WirelessAdapter切換到STA模式連入路由器，手機跟Chromecast也連入同一個路由器，App端通過Bonjour協(xié)議去發(fā)現(xiàn)路由器下的WirelessAdapter，并接入，App去發(fā)現(xiàn)Chromecast并連接上，Chromecast的Receiver接收App發(fā)送的ReceiverID，在Chromecast Dongle上load入Receiver APP。進(jìn)入AppChromecast模式，點擊Disconnect可以讓App退出Chromecast模式。

對于交互方式，在非Chromecast模式下操作設(shè)備，一切照舊，用戶在Chromecast模式下使用App的時候（圖2 圖3），移動設(shè)備連接上Chromecast設(shè)備。

移動設(shè)備連接上Chromecast設(shè)備在手持設(shè)備上播放圖片，默認(rèn)把圖片投射到Chromecast上，并在顯示器上面顯示出來。并支持Slideshow功能。用戶在投射視頻的時候，把視頻投射到Chromecast上，App上顯示的界面變成視頻的控制界面。

3基于WirelessAdapter App端與Receiver端協(xié)議制訂以及Receiver App實現(xiàn)的關(guān)鍵

關(guān)鍵的技術(shù)點有：（1）協(xié)議制訂;（2）對象Receiver App端SlideShow的實現(xiàn);（3）iOS端Current-casting-play box（CCPB）的實現(xiàn)方案。

3.1 協(xié)議制訂

與WirelessAdapter硬件Cut Through協(xié)議制訂，Chromecast采用的是Marvel的硬件，以及硬件方案，Marvel沒有公開Cut Through技術(shù)，但是通過協(xié)議讓我們調(diào)用。因為WirelessAdapter只有2M/S的帶寬，如果Chromecast在播放WirelessAdapter的視頻時候占用它的帶寬，會導(dǎo)致App端做其它交互的時候響應(yīng)較慢。Cut Through讓Chromecast直接是占用Router的帶寬，算是對2m/s帶寬的一個優(yōu)化策略。

3.2對象Receiver App端SlideShow的實現(xiàn)

由于SlideShow是實現(xiàn)圖片之間的切換，在HTML上面我們是用DIV的一個節(jié)點來顯示圖片。我們是通過修改DOM節(jié)點的顯示，來實現(xiàn)。但是如果要修改DIV里面的URL，而且我們想賦予它動畫效果，后面通過2個DIV之間切換來實現(xiàn)，每次隱藏一個DIV顯示另一個，在這個之間通過jquery做一個動畫效果，每次交換一個DIV顯示新的URL。

4總結(jié)

本文對Chromecast在Toshiba WirelessAdapter中的開發(fā)應(yīng)用進(jìn)行了介紹，同時對WirelessAdapter、Chromecast、iOS端App之間的通信及交互方式進(jìn)行了總結(jié)，闡述了基于WirelessAdapter App端與Receiver端協(xié)議制訂以及Receiver App實現(xiàn)的關(guān)鍵點以及iOS App交互方式的設(shè)計。WirelessAdapter也已經(jīng)投入市場，也得到了大部分客戶的認(rèn)可和稱贊。當(dāng)然，本文中采用的方案可能也有需要改進(jìn)的地方，在后續(xù)的研發(fā)過程中會進(jìn)行不斷完善;在這里，希望大家可以多提一些建議和意見，也歡迎大家給出更好的設(shè)計思路。