优酷鸿蒙开发实践｜多屏互动开发实践
作者：玉追 & 以繩
優(yōu)酷與華為長(zhǎng)期保持著良好的戰(zhàn)略合作關(guān)系，旨在為消費(fèi)者帶來(lái)優(yōu)質(zhì)的影音娛樂(lè)體驗(yàn)。鴻蒙操作系統(tǒng)的流轉(zhuǎn)特性為多屏互動(dòng)帶來(lái)了全新的玩法，本文以優(yōu)酷播放中心的技術(shù)儲(chǔ)備為切入點(diǎn)，結(jié)合鴻蒙系統(tǒng)的鏡像和流轉(zhuǎn)特性，詳細(xì)介紹了普通流轉(zhuǎn)、自由視角和zoom 等核心能力在鴻蒙上的實(shí)踐之路。
背景介紹
鴻蒙分布式體驗(yàn)
華為定義的分布式體驗(yàn)主要包含連續(xù)性體驗(yàn)和協(xié)同體驗(yàn)兩種。
1連續(xù)性體驗(yàn)
當(dāng)用戶在一個(gè)設(shè)備上發(fā)起操作，并切換到另一個(gè)設(shè)備上繼續(xù)操作時(shí)，用戶能夠馬上在新的設(shè)備上繼續(xù)當(dāng)前的操作。連續(xù)性體驗(yàn)包括任務(wù)接續(xù)和音視頻接續(xù)。
2協(xié)同體驗(yàn)
多個(gè)設(shè)備上的軟件和硬件能力相互協(xié)同，作為一個(gè)整體為用戶提供比單設(shè)備更加高效、沉浸的體驗(yàn)。協(xié)同體驗(yàn)包括軟件協(xié)同和硬件協(xié)同。
對(duì)于優(yōu)酷而言，我們已經(jīng)向用戶提供了如下的多屏互動(dòng)功能。
- 用戶用手機(jī)觀看視頻到某一個(gè)時(shí)間點(diǎn)，然后切換到平板設(shè)備從剛才的中斷時(shí)間點(diǎn)繼續(xù)看視頻
- 用戶用手機(jī)或者平板打開(kāi)一個(gè)視頻，然后使用投屏功能將視頻投射到智慧屏或者電視盒子上，在大屏上繼續(xù)觀看
- 用戶在大屏上遇到登錄或者支付等不方便使用大屏側(cè)客戶端完成的功能，他可以使用手機(jī)直接掃描大屏上的二維碼登錄或者支付。
上述功能，都是優(yōu)酷客戶端利用現(xiàn)有的“華為一碰傳”，“華為HiPlay”等功能可以直接實(shí)現(xiàn)的。我們希望借助鴻蒙OS提供的特色功能，實(shí)現(xiàn)若干當(dāng)前優(yōu)酷客戶端所不具備的“新功能”，開(kāi)發(fā)出若干“純鴻蒙”專有特性，然后與Android優(yōu)酷主客相融合。鴻蒙代碼與Android代碼相互聯(lián)動(dòng)，共同為消費(fèi)者提供各種酷炫的影音娛樂(lè)功能。
優(yōu)酷客戶端橫跨Android，iOS，iPad，OTT等多種軟硬件平臺(tái)，彼此之前可以通過(guò)投屏等功能相互聯(lián)動(dòng)，天然具有多屏互動(dòng)的場(chǎng)景。
而HarmonyOS采用了多種分布式技術(shù)，使得應(yīng)用程序的開(kāi)發(fā)實(shí)現(xiàn)與不同終端設(shè)備的形態(tài)差異無(wú)關(guān)。這能夠讓開(kāi)發(fā)者聚焦上層業(yè)務(wù)邏輯，更加便捷、高效地開(kāi)發(fā)應(yīng)用。
在優(yōu)酷鴻蒙版本中，我們基于HarmonyOS提供的分布式總線能力，與優(yōu)酷端既有的投屏功能相結(jié)合，開(kāi)發(fā)出全新的HarmonyOS多屏互動(dòng)FA,提供多臺(tái)鴻蒙設(shè)備之間多屏互動(dòng)的功能。
這個(gè)FA也是100%利用鴻蒙API編寫的，用戶可以通過(guò)優(yōu)酷鴻蒙版的播放頁(yè)“視頻流轉(zhuǎn)”按鈕,將手機(jī)端正在播放的視頻流轉(zhuǎn)到其它鴻蒙設(shè)備上(鴻蒙智慧屏,平板等),并可以將手機(jī)作為遙控器對(duì)大屏設(shè)備進(jìn)行播控控制。
不僅能對(duì)大屏的音量、快進(jìn)快退、播放速度、清晰度、劇集進(jìn)行控制，還可以旋轉(zhuǎn)大屏上的自由視角視頻的角度。
“基于HarmonyOS的多屏互動(dòng)”與傳統(tǒng)投屏的最大區(qū)別是，我們是利用HarmonyOS提供的“設(shè)備/服務(wù)發(fā)現(xiàn)機(jī)制”來(lái)搜索對(duì)端設(shè)備，使用HarmonyOS的“建立連接”功能來(lái)建立設(shè)備之間的雙向通信。
由于HarmonyOSOS的 “設(shè)備/服務(wù)發(fā)現(xiàn)機(jī)制”“建立連接”功能經(jīng)過(guò)高度優(yōu)化，我們自己的使用體驗(yàn)是“HarmonyOS多屏互動(dòng)”相比傳統(tǒng)DLNA或者M(jìn)iracast鏡像功能，設(shè)備發(fā)現(xiàn)快，連接建立快，且連接建立之后非常穩(wěn)定，不容易斷連。
而且，我們可以通過(guò)此連接進(jìn)行高速的數(shù)據(jù)傳輸，直接從操控側(cè)streaming視頻到大屏端。
下面，我們簡(jiǎn)單介紹下HarmonyOS的分布式總線能力是如何與優(yōu)酷既有的投屏功能相結(jié)合的。
投屏業(yè)務(wù)概覽
投屏技術(shù)在我們?nèi)粘Ｉ詈凸ぷ髦械玫搅嗽絹?lái)越多的應(yīng)用，手機(jī)、平板、個(gè)人電腦等無(wú)線屏顯和擴(kuò)展功能也給家庭、企業(yè)會(huì)議、產(chǎn)品發(fā)布、遠(yuǎn)程培訓(xùn)帶來(lái)了更加便捷、更加高效的模式變革。市場(chǎng)上相應(yīng)的產(chǎn)品解決方案也是百花齊放，例如蘋果公司的 Airplay 無(wú)線投屏解決方案、WiFi 聯(lián)盟的 Miracast 無(wú)線投屏解決方案、谷歌公司的 ChromeCast 無(wú)線投屏解決方案、英特爾公司的 WIDI 無(wú)線投屏解決方案等，都在不同程度上推動(dòng)了家庭和辦公場(chǎng)合多屏互動(dòng)產(chǎn)品的升級(jí)演化。
無(wú)線投屏技術(shù)和網(wǎng)絡(luò)環(huán)境的改善其實(shí)已經(jīng)標(biāo)志著高效智能時(shí)代的來(lái)臨，人們可以使用手機(jī)上網(wǎng)、看電視、娛樂(lè)、辦公，智能電視除了看電視外，更趨向于智慧屏、顯示屏的概念。大家希望能在電視上瀏覽信息、購(gòu)物、玩游戲等等。人們更希望在大屏上享受看電視的沉浸感。未來(lái)的發(fā)展趨勢(shì)同樣也很明顯，市場(chǎng)巨大的潛在需求是投屏技術(shù)的最大推動(dòng)力，將會(huì)呈現(xiàn)一個(gè)百花齊放的“盛景”。
作為國(guó)內(nèi)互聯(lián)網(wǎng)視頻巨頭之一，優(yōu)酷在投屏業(yè)務(wù)場(chǎng)景積累了豐富的技術(shù)和產(chǎn)品經(jīng)驗(yàn)，并取得了非常迅速的發(fā)展；另外，優(yōu)酷獨(dú)有的播放能力，例如自由視角、zoom、AI超分、幀享4K等，也給多屏互動(dòng)場(chǎng)景提供了強(qiáng)有力的擴(kuò)展空間。整體而言，不管是優(yōu)酷的投屏業(yè)務(wù)還是播放能力，都為同華為的合作打下了堅(jiān)實(shí)的基礎(chǔ)。
鴻蒙流轉(zhuǎn)場(chǎng)景
HarmonyOS 是新一代的智能終端操作系統(tǒng)，為不同設(shè)備的智能化、互聯(lián)與協(xié)同提供了統(tǒng)一的語(yǔ)言，并帶來(lái)簡(jiǎn)潔、流暢、連續(xù)、安全可靠的全場(chǎng)景交互體驗(yàn)。HarmonyOS 自誕生之初就以 “萬(wàn)物互聯(lián)” 為使命，通過(guò)一套代碼和核心的分布式技術(shù)，滿足了不同平臺(tái)上各種硬件的需求，打通了手機(jī)、平板、電腦、汽車和智能穿戴等多種設(shè)備，完美實(shí)現(xiàn)了不同設(shè)備之間的流轉(zhuǎn)。可以說(shuō)，“流轉(zhuǎn)” 是鴻蒙生態(tài)最為核心的特性之一。
隨著智能時(shí)代的到來(lái)，流轉(zhuǎn)無(wú)處不在，不管是車機(jī)上的雙向控制，還是智能家居間的一觸即連；不管是辦公室的文件一碰投，還是手機(jī)和智慧屏的超級(jí)聯(lián)結(jié)，有屏幕的地方就能實(shí)現(xiàn)流轉(zhuǎn)。另一方面，5G 時(shí)代重新定義了大眾的文化娛樂(lè)方式，更大的屏幕、更高的碼率、更智能的流轉(zhuǎn)成為了核心訴求，在這個(gè)背景下，鴻蒙跟優(yōu)酷自然而然走到了一起。
優(yōu)酷投屏能力版圖
優(yōu)酷投屏能力不僅能覆蓋傳統(tǒng)的局域網(wǎng)協(xié)議，如 DLNA、AirPlay 等，還全新自研了云投屏協(xié)議，徹底打破了局域網(wǎng)組播的限制，提高了設(shè)備發(fā)現(xiàn)成功率。此外，為了增加全新玩法，最新的魔屏設(shè)備附贈(zèng)了 NFC 貼紙，實(shí)現(xiàn)了一碰投功能，引入了全新的玩法。接下來(lái)詳細(xì)介紹下優(yōu)酷投屏的能力版圖。
能力版圖
無(wú)線投屏有三個(gè)最基本的要素：內(nèi)容、設(shè)備和協(xié)議。其中，內(nèi)容可以是非實(shí)時(shí)的數(shù)據(jù)文件，例如電影、圖片、音樂(lè)等，也可以是實(shí)時(shí)的數(shù)據(jù)流，例如屏幕鏡像、直播流等。設(shè)備包括發(fā)起投屏的內(nèi)容提供方（簡(jiǎn)稱“發(fā)送端”）和接收投屏的內(nèi)容呈現(xiàn)方（簡(jiǎn)稱“接收端”），其中常見(jiàn)的發(fā)送端包括手機(jī)、平板等移動(dòng)設(shè)備，負(fù)責(zé)獲取遠(yuǎn)端或本地存儲(chǔ)的媒體資源，并傳輸給接收端；接收端則負(fù)責(zé)響應(yīng)來(lái)自發(fā)送端的內(nèi)容和播控指令，并完成后續(xù)的內(nèi)容呈現(xiàn)。協(xié)議則提供了發(fā)送端和接收端之間的交互規(guī)約，覆蓋了包括設(shè)備發(fā)現(xiàn)、數(shù)據(jù)傳輸、播放控制等核心鏈路，比較有代表性的協(xié)議包括局域網(wǎng)投屏場(chǎng)景的 SSDP 和 SOAP 協(xié)議、云投屏場(chǎng)景的 MTOP 和 ACCS 協(xié)議等。
多屏互動(dòng)業(yè)務(wù)復(fù)雜度高，交互鏈路長(zhǎng)，橫跨大小屏兩條業(yè)務(wù)線，涉及到包括廣告、會(huì)員、運(yùn)營(yíng)商、播放、硬件、媒資等非常多的業(yè)務(wù)方。
經(jīng)過(guò)大量需求的長(zhǎng)期打磨，優(yōu)酷最終形成了如下的多屏互動(dòng)版圖，可以分為投屏協(xié)議層，投屏播控層，業(yè)務(wù)適配層等核心組成部分：
投屏協(xié)議層
1、局域網(wǎng)投屏。包括 DLNA 和 AirPlay，通用性較強(qiáng)，但受限于組播能力，常會(huì)出現(xiàn)發(fā)現(xiàn)不了設(shè)備的問(wèn)題；
2、云投屏。云投屏是為了解決局域網(wǎng)協(xié)議無(wú)法發(fā)現(xiàn)設(shè)備而自研的新協(xié)議，能有效提升設(shè)備發(fā)現(xiàn)成功率，但受限于自營(yíng)的大屏端應(yīng)用，通用性受到了較大的限制；
3、NFC投屏。作為魔屏新硬件宣推的新特性之一，NFC投屏配合附帶的貼紙，縮短了移動(dòng)端投屏的操作鏈路，實(shí)現(xiàn)了優(yōu)酷視頻的 “一碰投”。
投屏播控層
業(yè)務(wù)適配層
鴻蒙系統(tǒng)初實(shí)踐
普通流轉(zhuǎn)
“鴻蒙流轉(zhuǎn)” 指利用了鴻蒙操作系統(tǒng)特性的多屏互動(dòng)方式，與傳統(tǒng)投屏協(xié)議最大的區(qū)別在于對(duì)鴻蒙操作系統(tǒng)的依賴。具體而言，鴻蒙操作系統(tǒng)不僅提供了 “設(shè)備/服務(wù)發(fā)現(xiàn)機(jī)制” 作為設(shè)備發(fā)現(xiàn)的協(xié)議，還提供了 “設(shè)備連接能力” 支持設(shè)備之間進(jìn)行雙向通信。
類似傳統(tǒng)的投屏協(xié)議，鴻蒙流轉(zhuǎn)包括基于URL的普通流轉(zhuǎn)和基于流傳輸?shù)牧鬓D(zhuǎn)。普通流轉(zhuǎn)是指基于鴻蒙傳輸能力的多屏互動(dòng)方式，不同于 DLNA 等通用協(xié)議，鴻蒙提供了包括設(shè)備發(fā)現(xiàn)、數(shù)據(jù)傳輸、應(yīng)用查詢、文件分享等核心能力，不僅能提供較原生協(xié)議而言更穩(wěn)定的連接，還能按照業(yè)務(wù)訴求，將自研的APK（例如酷喵）通過(guò)小屏傳輸至大屏并喚起，實(shí)現(xiàn)一系列定制化操作。
先圍繞普通流轉(zhuǎn)進(jìn)行介紹，其時(shí)序圖如下所示。
如上圖所示，對(duì)其中部分核心流程的實(shí)現(xiàn)進(jìn)行簡(jiǎn)單介紹。
1鴻蒙設(shè)備發(fā)現(xiàn)
跟 DLNA 投屏和云投屏發(fā)現(xiàn)流程完全一致，鴻蒙的發(fā)現(xiàn)協(xié)議在 DlnaDevs 的 search 方法中實(shí)現(xiàn)：
// 鴻蒙searchif (HarmonyCastMgr.haveInst()) {HarmonyCastMgr.getInst().searchDevs();// 自由視角searchif (HarmonyCastMgr.getInst().hasMirr()){HarmonyCastMgr.getInst().searchHarmonyMirrorDevs();}}再來(lái)看看鴻蒙發(fā)現(xiàn)流程的實(shí)現(xiàn)細(xì)節(jié)：
// 搜索設(shè)備（異步方式）public boolean searchDevs() {boolean ret = false;if (isHarmonyEnable()) {Intent intent = new Intent();ComponentName componentName = new ComponentName(PackageContant.PACKAGE_YOUKU, "com.youku.feature.MiddlewareAbility");intent.setComponent(componentName);intent.putExtra(AbilityUtils.PARAM_KEY_INSTALL_ON_DEMAND, true);intent.setAction("action.videoplayer.getdevicelist");try {mActivity = YoukuContext.getTopActivity();ret = AbilityUtils.connectAbility(mActivity, intent, mServiceConnection);} catch (RuntimeException e) {e.printStackTrace();ret = false;}}return ret;}鴻蒙發(fā)現(xiàn)協(xié)議通過(guò) AIDL 依賴了 FA 的通道，其中 mServiceConnection 內(nèi)部對(duì) IBinder 對(duì)象進(jìn)行了解析，映射為多屏互動(dòng)定義的 Device 類型，并回調(diào)設(shè)備列表的更新接口，核心實(shí)現(xiàn)如下：
public ServiceConnection mServiceConnection = new ServiceConnection() {@Overridepublic void onServiceConnected(ComponentName name, IBinder service) {LogEx.d(tag(), "onServiceConnected");HarmonyRCS rcs = new HarmonyRCS(service);String[] devices = null;try {devices = rcs.getDeviceList();} catch (RemoteException e) {e.printStackTrace();}// 設(shè)備ID和名稱數(shù)組，以適應(yīng)鴻蒙AIDL查詢格式List<String> deviceIdList = new ArrayList<>();List<String> deviceNameList = new ArrayList<>();for (int i = 0; i < devices.length; i++) {if ((i & 1) == 0) {deviceIdList.add(devices[i]);} else {deviceNameList.add(devices[i]);}}// 原始數(shù)據(jù)映射為Client格式if (deviceNameList.size() >= deviceIdList.size()) {mHarmonyDevs.clear();for (int i = 0; i < deviceIdList.size(); i++) {String deviceId = deviceIdList.get(i);String deviceName = deviceNameList.get(i);if (StringUtils.isNotBlank(deviceId) && StringUtils.isNotBlank(deviceName)) {Client client = new Client();...mHarmonyDevs.put(deviceId, client);}}// 判斷大屏設(shè)備是否在線，如果不在線，則停止投屏if (DlnaApiBu.api().proj().stat() == DlnaPublic.DlnaProjStat.PLAYING) {Client currentDev = DlnaApiBu.api().proj().req().mDev;if (currentDev != null && currentDev.isHarmonyDev() && !mHarmonyDevs.containsKey(currentDev.getDeviceUuid())) {stopProjEx();}}// 回調(diào)調(diào)用方獲取設(shè)備列表if (null != mRcsCallback) {mRcsCallback.onHarmonyDevsChanged();}}try {if (mActivity != null) {AbilityUtils.disconnectAbility(mActivity, mServiceConnection);}} catch (Exception pE) {pE.printStackTrace();}}@Overridepublic void onServiceDisconnected(ComponentName name) {LogEx.d(tag(), "onServiceConnected");}};2選擇設(shè)備并啟動(dòng)FA
類似云投屏自研協(xié)議，鴻蒙普通流轉(zhuǎn)依賴單獨(dú)的發(fā)現(xiàn)流程，類似于其他協(xié)議，創(chuàng)建 HarmonyCastTrunkBiz 以作為鴻蒙協(xié)議管理類，并實(shí)現(xiàn)了如下基礎(chǔ)接口：
// 開(kāi)始投屏void start();// 停止投屏void stop();// 發(fā)送播放指令void play();// 發(fā)送暫停指令void pause();// 發(fā)送seek指令void seek(int prog);// 發(fā)送設(shè)置音量指令void setVolume(int volume);由于鴻蒙 FA 提供了定制的遙控器界面和雙向數(shù)據(jù)傳輸通道，因此所有發(fā)送指令的任務(wù)均由鴻蒙 FA 接管，上述負(fù)責(zé)發(fā)送指令的接口僅僅同步了小屏端的播放狀態(tài)。用戶點(diǎn)擊選中鴻蒙設(shè)備后，觸發(fā) start 方法并啟動(dòng)鴻蒙協(xié)議入口，由 HarmonyCastMgr 的 startHarmony 負(fù)責(zé)同鴻蒙 FA 之間的數(shù)據(jù)交互：
// 投屏所需的播放數(shù)據(jù)HarmonyCastData castData = new HarmonyCastData();castData.mDev = req.mDev;castData.mUrl = req.mUrl;castData.metaData = DlnaMetadata.getInst().getMetadataWithReq(req);castData.isFromNowbar = isFromNowbar;// FA遙控器所需的UI數(shù)據(jù)HarmonyParameterBean parameterBean = new HarmonyParameterBean();parameterBean.deviceUuid = req.mDev.getDeviceUuid();parameterBean.mShowTitle = req.mShowTitle;parameterBean.projSource = "";parameterBean.isYoukuApp = req.mDev.isYoukuApp;String parameterData = JSON.toJSONString(parameterBean);// 按FA數(shù)據(jù)格式進(jìn)行封裝String touchuanData = JSON.toJSONString(castData);HarmonyPaBean paBean = new HarmonyPaBean();paBean.touchuanData = touchuanData;paBean.parameterData = parameterData;final String harmonyJson = JSON.toJSONString(paBean);Activity activity = YoukuContext.getTopActivity();Intent jIntent = new Intent();ComponentName component = new ComponentName(PackageContant.PACKAGE_YOUKU, "com.youku.feature.MainAbility");jIntent.putExtra(AbilityUtils.PARAM_KEY_INSTALL_ON_DEMAND, true);jIntent.putExtra("harmonyJson", harmonyJson);jIntent.setComponent(component);try {// 每次開(kāi)始投屏前檢測(cè)一次遠(yuǎn)端是否在線，避免因大屏掉線導(dǎo)致的投屏失敗boolean remoteValid = true;if (HarmonyCastMgr.haveInst()) {remoteValid = HarmonyCastMgr.getInst().searchDevs();}if (remoteValid) {AbilityUtils.startAbility(activity, jIntent);} else {stopProjEx();}} catch (Exception e) {e.printStackTrace();}自由視角
自由視角由阿里文娛摩酷實(shí)驗(yàn)室研發(fā)，是一種可以隨意滑動(dòng)視頻、自由切換觀看視角的播放技術(shù)。自由視角視頻是多視角直播的進(jìn)一步發(fā)展，帶給用戶更多的主動(dòng)性。用戶可以在觀看球賽時(shí)旋轉(zhuǎn)視角，并放大局部畫面，近距離觀看偶像球員的灌籃動(dòng)作，實(shí)現(xiàn)堪比跨次元的真實(shí)觀影體驗(yàn)。
以下是 “這就是街舞” 綜藝的自由視角效果：
視頻請(qǐng)見(jiàn)原文中：優(yōu)酷鴻蒙開(kāi)發(fā)實(shí)踐｜多屏互動(dòng)開(kāi)發(fā)實(shí)踐
不同于普通視頻，自由視角視頻的碼率普遍偏高。例如上述街舞錄制現(xiàn)場(chǎng)，總共安裝了超過(guò) 40 臺(tái)專用相機(jī)，形成的陣列采集畫面全方位記錄了每個(gè)精彩瞬間，并實(shí)現(xiàn)毫秒級(jí)同步和遠(yuǎn)程協(xié)同控制，采集到的畫面經(jīng)過(guò)焦點(diǎn)矯正和3D重建，再基于各機(jī)位采集到的紋理、深度、姿態(tài)等參數(shù)信息，最終將多角度分散的畫面拼接成一個(gè)高達(dá)6K、8K的高清視頻文件。
因此，自由視角視頻在提升用戶觀感的同時(shí)，也對(duì)播放端的網(wǎng)絡(luò)環(huán)境和解碼性能提出了非常高的要求。最初的自由視角實(shí)現(xiàn)方案是基于流轉(zhuǎn)特性，小屏端將自由視角視頻的 M3U8 地址或播控指令，通過(guò)上述流轉(zhuǎn)能力傳遞給大屏側(cè)，由大屏側(cè)完成數(shù)據(jù)的下載、解碼和渲染等后續(xù)流程。但考慮到華為智慧屏的硬件性能不足以支撐這種規(guī)模的計(jì)算量，傳統(tǒng)的流轉(zhuǎn)方案不得不被叫停。
為此，開(kāi)發(fā)團(tuán)隊(duì)對(duì)比了鴻蒙系統(tǒng)上現(xiàn)存的所有投屏協(xié)議，得到如下表的結(jié)論：
| 鴻蒙投屏協(xié)議 | 優(yōu)點(diǎn) | 缺點(diǎn) |
| DLNA | 標(biāo)準(zhǔn)成熟協(xié)議，通用性強(qiáng) | 原生擴(kuò)展能力較弱 |
| 云投屏 | 不依賴局域網(wǎng)，擴(kuò)展性強(qiáng) | 通用性較差 |
| 鴻蒙協(xié)議 | 系統(tǒng)適配度高，擴(kuò)展能力強(qiáng) | 依賴?guó)櫭上到y(tǒng) |
| Cast+協(xié)議 | 系統(tǒng)適配度高，兼容性強(qiáng)，滿足流傳輸需要 | 依賴華為生態(tài) |
經(jīng)過(guò)內(nèi)部評(píng)估以及同華為研發(fā)團(tuán)隊(duì)的討論，開(kāi)發(fā)團(tuán)隊(duì)最終決定放棄傳統(tǒng)的基于URL的投屏方式，采用基于華為 Cast+ 的鏡像投屏方案，具體而言，是在手機(jī)端正常播放和操控自由視角視頻，并把播放器視圖通過(guò)Cast+鏡像到電視端。
簡(jiǎn)單介紹下華為 Cast+ 協(xié)議的實(shí)現(xiàn)細(xì)節(jié)。如下圖所示，華為 Cast+ Kit 是華為自研的、以手機(jī)為中心的多屏協(xié)同組件，業(yè)務(wù)方可據(jù)此實(shí)現(xiàn)多設(shè)備之間快速、穩(wěn)定、低時(shí)延的鏡像傳輸。
基于華為 Cast+ 協(xié)議，自由視角場(chǎng)景的投屏鏈路跟普通投屏協(xié)議大體保持一致，重疊的部分包括設(shè)備搜索、選擇設(shè)備和建連，不同之處在于，自由視角視頻最后一步并沒(méi)有投放播放地址到大屏，而是創(chuàng)建虛擬屏并完成顯示，虛擬屏的創(chuàng)建時(shí)機(jī)和方式是實(shí)踐過(guò)程中的重中之重。
自由視角流轉(zhuǎn)方案的本質(zhì)，可以概括為兩個(gè)方面：首先，將遙控器頁(yè)面作為主屏幕，打通其與播放頁(yè)之間的雙向數(shù)據(jù)通道，以實(shí)現(xiàn)播放控制和狀態(tài)同步；其次，在虛擬屏上啟動(dòng)播放相關(guān)的視圖，作為鏡像和傳輸?shù)酱笃恋膬?nèi)容。
主屏幕的方案基本確定，輪到虛擬屏的時(shí)候卻踩了坑。最初能想到的虛擬屏渲染對(duì)象，自然而然是全屏播放頁(yè)，然而試了才發(fā)現(xiàn)，直接將全屏播放頁(yè)渲染到虛擬屏，會(huì)存在如下兩個(gè)問(wèn)題，附帶分析報(bào)告如下：
問(wèn)題1：主屏幕上的遙控器頁(yè)面首先被鏡像到大屏。
- 原因：Cast+ 會(huì)在建連成功后、設(shè)備處于 PLAYING 狀態(tài)時(shí)，開(kāi)始抓取虛擬屏的內(nèi)容，如果虛擬屏尚未加載，會(huì)截取主屏幕內(nèi)容作為兜底。經(jīng)過(guò)測(cè)試，這個(gè)時(shí)間差大概在 100ms 左右，而期間播放頁(yè)無(wú)法完成初始化，因此會(huì)存在主屏幕內(nèi)容占用的問(wèn)題。
問(wèn)題2：播放頁(yè)進(jìn)入后存在橫豎屏切換邏輯，導(dǎo)致鏡像后屏幕會(huì)經(jīng)歷一次轉(zhuǎn)屏。
- 原因：屬于播放頁(yè)自適應(yīng)邏輯，初始進(jìn)入時(shí)為豎屏，在鏡像后會(huì)觸發(fā)橫屏切換邏輯，從而導(dǎo)致大屏側(cè)的轉(zhuǎn)屏。
內(nèi)部綜合評(píng)估后，決定采用更加輕量的方式實(shí)現(xiàn)虛擬屏。我們發(fā)現(xiàn)，播放器 Dialog 中只包含 SurfaceView 和 Loading 狀態(tài)等內(nèi)容，如果僅僅鏡像 Dialog 級(jí)別，雖然增加了較多的播放器處理邏輯，但保證了上屏速度和更快的響應(yīng)效率。調(diào)整后的方案結(jié)構(gòu)如下圖所示。
該方案具備如下優(yōu)勢(shì)：
綜上所示，最終的效果如下視頻所示。
視頻請(qǐng)見(jiàn)原文中：優(yōu)酷鴻蒙開(kāi)發(fā)實(shí)踐｜多屏互動(dòng)開(kāi)發(fā)實(shí)踐
線上表現(xiàn)
網(wǎng)友們對(duì)鴻蒙系統(tǒng)的特性和優(yōu)酷鴻蒙版本的表現(xiàn)，也表現(xiàn)出了強(qiáng)烈的興趣，我們摘取了網(wǎng)上的一些體驗(yàn)視頻，列舉如下：
- 《優(yōu)酷鴻蒙版體驗(yàn)——轉(zhuǎn)自知乎》：https://www.bilibili.com/video/BV1A5411w76Y/
- 《鴻蒙優(yōu)酷投屏 愛(ài)了愛(ài)了》：https://www.bilibili.com/s/video/BV1pU4y187t3
隨后，經(jīng)過(guò)兩個(gè)版本的持續(xù)迭代，優(yōu)酷鴻蒙版的穩(wěn)定性和體驗(yàn)得到了極大改善。另一方面，伴隨著鴻蒙系統(tǒng)的自我完善，優(yōu)酷鴻蒙版的二期需求版本已經(jīng)開(kāi)始排期，相信在雙方強(qiáng)強(qiáng)聯(lián)合之下，會(huì)持續(xù)給市場(chǎng)和用戶帶來(lái)驚喜。
總結(jié)
在優(yōu)酷鴻蒙版多屏互動(dòng)專項(xiàng)的開(kāi)發(fā)過(guò)程中，各參與方在鴻蒙接口和調(diào)試環(huán)境尚不完善的時(shí)候介入，克服了重重困難，不斷探索試錯(cuò)，在極短的時(shí)間內(nèi)掌握了鴻蒙開(kāi)發(fā)技術(shù)棧，不僅順利完成了大大小小的開(kāi)發(fā)任務(wù)，還反饋給華為技術(shù)團(tuán)隊(duì)不少遺留問(wèn)題和改進(jìn)建議。這是雙方再一次的深度合作，也是一次非常成功的實(shí)踐。
對(duì)于華為而言，優(yōu)酷鴻蒙版不僅給鴻蒙生態(tài)帶來(lái)了開(kāi)創(chuàng)性的視頻新交互形式，讓新用戶大呼過(guò)癮；而且完美適配了鴻蒙系統(tǒng)流轉(zhuǎn)特性、為后續(xù)更豐富的新玩法鋪平了道路。對(duì)于優(yōu)酷而言，鴻蒙上的多屏互動(dòng)實(shí)踐，大大擴(kuò)展了現(xiàn)有的多屏互動(dòng)能力版圖，為鴻蒙新時(shí)代積累了重要經(jīng)驗(yàn)。
關(guān)注我們，每周 3 篇移動(dòng)技術(shù)實(shí)踐&干貨給你思考！
總結(jié)
以上是生活随笔為你收集整理的优酷鸿蒙开发实践｜多屏互动开发实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 规则引擎在数据治理平台的实践
- 下一篇： 计算机模拟太阳系,科学家通过计算机模拟发