黃旭

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

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

中圖分類(lèi)號(hào)：TP391文獻(xiàn)標(biāo)識(shí)碼：A

1 Chromecast運(yùn)作原理

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

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

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

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

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

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

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

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

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

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

3.1 協(xié)議制訂

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

3.2對(duì)象Receiver App端SlideShow的實(shí)現(xiàn)

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

4總結(jié)

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