優酷鴻蒙開發實踐｜多屏互動開發實踐

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c7c73a83994db10394f5998ded9b8b81.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：玉追 & 以繩","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優酷與華爲長期保持着良好的戰略合作關係，旨在爲消費者帶來優質的影音娛樂體驗。鴻蒙操作系統的流轉特性爲多屏互動帶來了全新的玩法，本文以優酷播放中心的技術儲備爲切入點，結合鴻蒙系統的鏡像和流轉特性，詳細介紹了普通流轉、自由視角和zoom 等核心能力在鴻蒙上的實踐之路。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"背景介紹","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"鴻蒙分佈式體驗","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"華爲定義的分佈式體驗主要包含連續性體驗和協同體驗兩種。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/aa/aa8542ac40397cfb0a9e2482287c467c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"連續性體驗","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當用戶在一個設備上發起操作，並切換到另一個設備上繼續操作時，用戶能夠馬上在新的設備上繼續當前的操作。連續性體驗包括任務接續和音視頻接續。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"協同體驗","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"多個設備上的軟件和硬件能力相互協同，作爲一個整體爲用戶提供比單設備更加高效、沉浸的體驗。協同體驗包括軟件協同和硬件協同。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於優酷而言，我們已經向用戶提供瞭如下的多屏互動功能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶用手機觀看視頻到某一個時間點，然後切換到平板設備從剛纔的中斷時間點繼續看視頻","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶用手機或者平板打開一個視頻，然後使用投屏功能將視頻投射到智慧屏或者電視盒子上，在大屏上繼續觀看","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶在大屏上遇到登錄或者支付等不方便使用大屏側客戶端完成的功能，他可以使用手機直接掃描大屏上的二維碼登錄或者支付。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述功能，都是優酷客戶端利用現有的“華爲一碰傳”，“華爲HiPlay”等功能可以直接實現的。我們希望藉助鴻蒙OS提供的特色功能，實現若干當前優酷客戶端所不具備的“新功能”，開發出若干“純鴻蒙”專有特性，然後與Android優酷主客相融合。鴻蒙代碼與Android代碼相互聯動，共同爲消費者提供各種酷炫的影音娛樂功能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優酷客戶端橫跨Android，iOS，iPad，OTT等多種軟硬件平臺，彼此之前可以通過投屏等功能相互聯動，天然具有多屏互動的場景。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而HarmonyOS採用了多種分佈式技術，使得應用程序的開發實現與不同終端設備的形態差異無關。這能夠讓開發者聚焦上層業務邏輯，更加便捷、高效地開發應用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在優酷鴻蒙版本中，我們基於HarmonyOS提供的分佈式總線能力，與優酷端既有的投屏功能相結合，開發出全新的HarmonyOS多屏互動FA,提供多臺鴻蒙設備之間多屏互動的功能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個FA也是100%利用鴻蒙API編寫的，用戶可以通過優酷鴻蒙版的播放頁“視頻流轉”按鈕,將手機端正在播放的視頻流轉到其它鴻蒙設備上(鴻蒙智慧屏,平板等),並可以將手機作爲遙控器對大屏設備進行播控控制。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ef/ef7ce01bfd4fd537f12dfc7f8e60e1cd.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不僅能對大屏的音量、快進快退、播放速度、清晰度、劇集進行控制，還可以旋轉大屏上的自由視角視頻的角度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“基於HarmonyOS的多屏互動”與傳統投屏的最大區別是，我們是利用HarmonyOS提供的“設備/服務發現機制”來搜索對端設備，使用HarmonyOS的“建立連接”功能來建立設備之間的雙向通信。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於HarmonyOSOS的 “設備/服務發現機制”“建立連接”功能經過高度優化，我們自己的使用體驗是“HarmonyOS多屏互動”相比傳統DLNA或者Miracast鏡像功能，設備發現快，連接建立快，且連接建立之後非常穩定，不容易斷連。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而且，我們可以通過此連接進行高速的數據傳輸，直接從操控側streaming視頻到大屏端。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面，我們簡單介紹下HarmonyOS的分佈式總線能力是如何與優酷既有的投屏功能相結合的。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"投屏業務概覽","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"投屏技術在我們日常生活和工作中得到了越來越多的應用，手機、平板、個人電腦等無線屏顯和擴展功能也給家庭、企業會議、產品發佈、遠程培訓帶來了更加便捷、更加高效的模式變革。市場上相應的產品解決方案也是百花齊放，例如蘋果公司的 Airplay 無線投屏解決方案、WiFi 聯盟的 Miracast 無線投屏解決方案、谷歌公司的 ChromeCast 無線投屏解決方案、英特爾公司的 WIDI 無線投屏解決方案等，都在不同程度上推動了家庭和辦公場合多屏互動產品的升級演化。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"無線投屏技術和網絡環境的改善其實已經標誌着高效智能時代的來臨，人們可以使用手機上網、看電視、娛樂、辦公，智能電視除了看電視外，更趨向於智慧屏、顯示屏的概念。大家希望能在電視上瀏覽信息、購物、玩遊戲等等。人們更希望在大屏上享受看電視的沉浸感。未來的發展趨勢同樣也很明顯，市場巨大的潛在需求是投屏技術的最大推動力，將會呈現一個百花齊放的“盛景”。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲國內互聯網視頻巨頭之一，優酷在投屏業務場景積累了豐富的技術和產品經驗，並取得了非常迅速的發展；另外，優酷獨有的播放能力，例如自由視角、zoom、AI超分、幀享4K等，也給多屏互動場景提供了強有力的擴展空間。整體而言，不管是優酷的投屏業務還是播放能力，都爲同華爲的合作打下了堅實的基礎。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"鴻蒙流轉場景","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"HarmonyOS 是新一代的智能終端操作系統，爲不同設備的智能化、互聯與協同提供了統一的語言，並帶來簡潔、流暢、連續、安全可靠的全場景交互體驗。HarmonyOS 自誕生之初就以 “萬物互聯” 爲使命，通過一套代碼和核心的分佈式技術，滿足了不同平臺上各種硬件的需求，打通了手機、平板、電腦、汽車和智能穿戴等多種設備，完美實現了不同設備之間的流轉。可以說，“流轉” 是鴻蒙生態最爲核心的特性之一。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/63/635c9d66a729e6443ec5cfca3e4d500c.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着智能時代的到來，流轉無處不在，不管是車機上的雙向控制，還是智能家居間的一觸即連；不管是辦公室的文件一碰投，還是手機和智慧屏的超級聯結，有屏幕的地方就能實現流轉。另一方面，5G 時代重新定義了大衆的文化娛樂方式，更大的屏幕、更高的碼率、更智能的流轉成爲了核心訴求，在這個背景下，鴻蒙跟優酷自然而然走到了一起。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"優酷投屏能力版圖","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優酷投屏能力不僅能覆蓋傳統的局域網協議，如 DLNA、AirPlay 等，還全新自研了雲投屏協議，徹底打破了局域網組播的限制，提高了設備發現成功率。此外，爲了增加全新玩法，最新的魔屏設備附贈了 NFC 貼紙，實現了一碰投功能，引入了全新的玩法。接下來詳細介紹下優酷投屏的能力版圖。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"能力版圖","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"無線投屏有三個最基本的要素：內容、設備和協議。其中，內容可以是非實時的數據文件，例如電影、圖片、音樂等，也可以是實時的數據流，例如屏幕鏡像、直播流等。設備包括髮起投屏的內容提供方（簡稱“發送端”）和接收投屏的內容呈現方（簡稱“接收端”），其中常見的發送端包括手機、平板等移動設備，負責獲取遠端或本地存儲的媒體資源，並傳輸給接收端；接收端則負責響應來自發送端的內容和播控指令，並完成後續的內容呈現。協議則提供了發送端和接收端之間的交互規約，覆蓋了包括設備發現、數據傳輸、播放控制等核心鏈路，比較有代表性的協議包括局域網投屏場景的 SSDP 和 SOAP 協議、雲投屏場景的 MTOP 和 ACCS 協議等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"多屏互動業務複雜度高，交互鏈路長，橫跨大小屏兩條業務線，涉及到包括廣告、會員、運營商、播放、硬件、媒資等非常多的業務方。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過大量需求的長期打磨，優酷最終形成了如下的多屏互動版圖，可以分爲投屏協議層，投屏播控層，業務適配層等核心組成部分：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"投屏協議層","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1、局域網投屏。包括 DLNA 和 AirPlay，通用性較強，但受限於組播能力，常會出現發現不了設備的問題；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2、雲投屏。雲投屏是爲了解決局域網協議無法發現設備而自研的新協議，能有效提升設備發現成功率，但受限於自營的大屏端應用，通用性受到了較大的限制；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e6/e6afb147736d6195bb0cbc18d582d8f0.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3、NFC投屏。作爲魔屏新硬件宣推的新特性之一，NFC投屏配合附帶的貼紙，縮短了移動端投屏的操作鏈路，實現了優酷視頻的 “一碰投”。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/78/78783e056eed65e51ff19b5fd74078a4.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/595eb0ef5574b6c27b923ee83cc6d48f.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"投屏播控層","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"DRM管理。負責投屏設備的管理和校驗，保證版權視頻的正確投放；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"格式處理。適配和兼容不同的大屏設備，保證投屏後的播放體驗；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"清晰度管理。負責多路清晰度的自適應和異常降級，兼顧廣告等業務場景；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"輔助調度。基於投屏的專屬域名，具備針對不同區域、運營商、設備信息的動態流管理和調度能力。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"業務適配層","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"投屏廣告。包括內投內、內投外、外投內三種組合。此外，大小屏端上投屏廣告的投放系統也在開發中；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"點直短融合。將點播、直播、短視頻三個場景的播放適配模塊下沉至投屏內部維護，這對於後期監控鏈路的統一和投屏能力的外發，都有重要意義。","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"鴻蒙系統初實踐","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"普通流轉","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“鴻蒙流轉” 指利用了鴻蒙操作系統特性的多屏互動方式，與傳統投屏協議最大的區別在於對鴻蒙操作系統的依賴。具體而言，鴻蒙操作系統不僅提供了 “設備/服務發現機制” 作爲設備發現的協議，還提供了 “設備連接能力” 支持設備之間進行雙向通信。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"類似傳統的投屏協議，鴻蒙流轉包括基於URL的普通流轉和基於流傳輸的流轉。普通流轉是指基於鴻蒙傳輸能力的多屏互動方式，不同於 DLNA 等通用協議，鴻蒙提供了包括設備發現、數據傳輸、應用查詢、文件分享等核心能力，不僅能提供較原生協議而言更穩定的連接，還能按照業務訴求，將自研的APK（例如酷喵）通過小屏傳輸至大屏並喚起，實現一系列定製化操作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先圍繞普通流轉進行介紹，其時序圖如下所示。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/13426865e76d8a5a1c3caa3b63b07abb.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如上圖所示，對其中部分核心流程的實現進行簡單介紹。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"鴻蒙設備發現","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"跟 DLNA 投屏和雲投屏發現流程完全一致，鴻蒙的發現協議在 DlnaDevs 的 search 方法中實現：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"// 鴻蒙search\n if (HarmonyCastMgr.haveInst()) {\n HarmonyCastMgr.getInst().searchDevs();\n // 自由視角search\n if (HarmonyCastMgr.getInst().hasMirr()){\n HarmonyCastMgr.getInst().searchHarmonyMirrorDevs();\n }\n }\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"再來看看鴻蒙發現流程的實現細節：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" // 搜索設備（異步方式）\n public boolean searchDevs() {\n boolean ret = false;\n if (isHarmonyEnable()) {\n Intent intent = new Intent();\n ComponentName componentName = new ComponentName(PackageContant.PACKAGE_YOUKU, \"com.youku.feature.MiddlewareAbility\");\n intent.setComponent(componentName);\n intent.putExtra(AbilityUtils.PARAM_KEY_INSTALL_ON_DEMAND, true);\n intent.setAction(\"action.videoplayer.getdevicelist\");\n try {\n mActivity = YoukuContext.getTopActivity();\n ret = AbilityUtils.connectAbility(mActivity, intent, mServiceConnection);\n } catch (RuntimeException e) {\n e.printStackTrace();\n ret = false;\n }\n }\n return ret;\n }\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"鴻蒙發現協議通過 AIDL 依賴了 FA 的通道，其中 mServiceConnection 內部對 IBinder 對象進行了解析，映射爲多屏互動定義的 Device 類型，並回調設備列表的更新接口，核心實現如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" public ServiceConnection mServiceConnection = new ServiceConnection() {\n @Override\n public void onServiceConnected(ComponentName name, IBinder service) {\n LogEx.d(tag(), \"onServiceConnected\");\n HarmonyRCS rcs = new HarmonyRCS(service);\n String[] devices = null;\n\n try {\n devices = rcs.getDeviceList();\n } catch (RemoteException e) {\n e.printStackTrace();\n }\n\n // 設備ID和名稱數組，以適應鴻蒙AIDL查詢格式\n List deviceIdList = new ArrayList<>();\n List deviceNameList = new ArrayList<>();\n\n for (int i = 0; i < devices.length; i++) {\n if ((i & 1) == 0) {\n deviceIdList.add(devices[i]);\n } else {\n deviceNameList.add(devices[i]);\n }\n }\n\n // 原始數據映射爲Client格式\n if (deviceNameList.size() >= deviceIdList.size()) {\n mHarmonyDevs.clear();\n for (int i = 0; i < deviceIdList.size(); i++) {\n String deviceId = deviceIdList.get(i);\n String deviceName = deviceNameList.get(i);\n if (StringUtils.isNotBlank(deviceId) && StringUtils.isNotBlank(deviceName)) {\n Client client = new Client();\n \n ...\n\n mHarmonyDevs.put(deviceId, client);\n }\n }\n\n // 判斷大屏設備是否在線，如果不在線，則停止投屏\n if (DlnaApiBu.api().proj().stat() == DlnaPublic.DlnaProjStat.PLAYING) {\n Client currentDev = DlnaApiBu.api().proj().req().mDev;\n if (currentDev != null && currentDev.isHarmonyDev() && !mHarmonyDevs.containsKey(currentDev.getDeviceUuid())) {\n stopProjEx();\n }\n }\n\n // 回調調用方獲取設備列表\n if (null != mRcsCallback) {\n mRcsCallback.onHarmonyDevsChanged();\n }\n }\n\n try {\n if (mActivity != null) {\n AbilityUtils.disconnectAbility(mActivity, mServiceConnection);\n }\n } catch (Exception pE) {\n pE.printStackTrace();\n }\n }\n\n @Override\n public void onServiceDisconnected(ComponentName name) {\n LogEx.d(tag(), \"onServiceConnected\");\n }\n };\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"選擇設備並啓動FA","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"類似雲投屏自研協議，鴻蒙普通流轉依賴單獨的發現流程，類似於其他協議，創建 HarmonyCastTrunkBiz 以作爲鴻蒙協議管理類，並實現瞭如下基礎接口：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" // 開始投屏\n void start();\n \n // 停止投屏\n void stop();\n\n // 發送播放指令\n void play();\n\n // 發送暫停指令\n void pause();\n\n // 發送seek指令\n void seek(int prog);\n\n // 發送設置音量指令\n void setVolume(int volume);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於鴻蒙 FA 提供了定製的遙控器界面和雙向數據傳輸通道，因此所有發送指令的任務均由鴻蒙 FA 接管，上述負責發送指令的接口僅僅同步了小屏端的播放狀態。用戶點擊選中鴻蒙設備後，觸發 start 方法並啓動鴻蒙協議入口，由 HarmonyCastMgr 的 startHarmony 負責同鴻蒙 FA 之間的數據交互：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" // 投屏所需的播放數據\n HarmonyCastData castData = new HarmonyCastData();\n castData.mDev = req.mDev;\n castData.mUrl = req.mUrl;\n castData.metaData = DlnaMetadata.getInst().getMetadataWithReq(req);\n castData.isFromNowbar = isFromNowbar;\n\n // FA遙控器所需的UI數據\n HarmonyParameterBean parameterBean = new HarmonyParameterBean();\n parameterBean.deviceUuid = req.mDev.getDeviceUuid();\n parameterBean.mShowTitle = req.mShowTitle;\n parameterBean.projSource = \"\";\n parameterBean.isYoukuApp = req.mDev.isYoukuApp;\n String parameterData = JSON.toJSONString(parameterBean);\n \n // 按FA數據格式進行封裝\n String touchuanData = JSON.toJSONString(castData);\n HarmonyPaBean paBean = new HarmonyPaBean();\n paBean.touchuanData = touchuanData;\n paBean.parameterData = parameterData;\n \n final String harmonyJson = JSON.toJSONString(paBean);\n Activity activity = YoukuContext.getTopActivity();\n Intent jIntent = new Intent();\n ComponentName component = new ComponentName(PackageContant.PACKAGE_YOUKU, \"com.youku.feature.MainAbility\");\n jIntent.putExtra(AbilityUtils.PARAM_KEY_INSTALL_ON_DEMAND, true);\n jIntent.putExtra(\"harmonyJson\", harmonyJson);\n jIntent.setComponent(component);\n\n try {\n // 每次開始投屏前檢測一次遠端是否在線，避免因大屏掉線導致的投屏失敗\n boolean remoteValid = true;\n if (HarmonyCastMgr.haveInst()) {\n remoteValid = HarmonyCastMgr.getInst().searchDevs();\n }\n\n if (remoteValid) {\n AbilityUtils.startAbility(activity, jIntent);\n } else {\n stopProjEx();\n }\n } catch (Exception e) {\n e.printStackTrace();\n }\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"自由視角","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自由視角由阿里文娛摩酷實驗室研發，是一種可以隨意滑動視頻、自由切換觀看視角的播放技術。自由視角視頻是多視角直播的進一步發展，帶給用戶更多的主動性。用戶可以在觀看球賽時旋轉視角，並放大局部畫面，近距離觀看偶像球員的灌籃動作，實現堪比跨次元的真實觀影體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下是 “這就是街舞” 綜藝的自由視角效果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"視頻請見原文中：","attrs":{}},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MDY0ODk0Ng==&mid=2247484425&idx=1&sn=843ee988d8e03f0b1d7ea02cfaa564cc&chksm=cf70b394f8073a823edb4330d67c4a5a1a922a9fd36b0c84029597db6daf1701b90d7706f504&token=604618845&lang=zh_CN#rd","title":"","type":null},"content":[{"type":"text","text":"優酷鴻蒙開發實踐｜多屏互動開發實踐","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同於普通視頻，自由視角視頻的碼率普遍偏高。例如上述街舞錄製現場，總共安裝了超過 40 臺專用相機，形成的陣列採集畫面全方位記錄了每個精彩瞬間，並實現毫秒級同步和遠程協同控制，採集到的畫面經過焦點矯正和3D重建，再基於各機位採集到的紋理、深度、姿態等參數信息，最終將多角度分散的畫面拼接成一個高達6K、8K的高清視頻文件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，自由視角視頻在提升用戶觀感的同時，也對播放端的網絡環境和解碼性能提出了非常高的要求。最初的自由視角實現方案是基於流轉特性，小屏端將自由視角視頻的 M3U8 地址或播控指令，通過上述流轉能力傳遞給大屏側，由大屏側完成數據的下載、解碼和渲染等後續流程。但考慮到華爲智慧屏的硬件性能不足以支撐這種規模的計算量，傳統的流轉方案不得不被叫停。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲此，開發團隊對比了鴻蒙系統上現存的所有投屏協議，得到如下表的結論：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"embedcomp","attrs":{"type":"table","data":{"content":"

鴻蒙投屏協議	優點	缺點
DLNA	標準成熟協議，通用性強	原生擴展能力較弱
雲投屏	不依賴局域網，擴展性強	通用性較差
鴻蒙協議	系統適配度高，擴展能力強	依賴鴻蒙系統
Cast+協議	系統適配度高，兼容性強，滿足流傳輸需要	依賴華爲生態

"}}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經過內部評估以及同華爲研發團隊的討論，開發團隊最終決定放棄傳統的基於URL的投屏方式，採用基於華爲 Cast+ 的鏡像投屏方案，具體而言，是在手機端正常播放和操控自由視角視頻，並把播放器視圖通過Cast+鏡像到電視端。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡單介紹下華爲 Cast+ 協議的實現細節。如下圖所示，華爲 Cast+ Kit 是華爲自研的、以手機爲中心的多屏協同組件，業務方可據此實現多設備之間快速、穩定、低時延的鏡像傳輸。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於華爲 Cast+ 協議，自由視角場景的投屏鏈路跟普通投屏協議大體保持一致，重疊的部分包括設備搜索、選擇設備和建連，不同之處在於，自由視角視頻最後一步並沒有投放播放地址到大屏，而是創建虛擬屏並完成顯示，虛擬屏的創建時機和方式是實踐過程中的重中之重。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自由視角流轉方案的本質，可以概括爲兩個方面：首先，將遙控器頁面作爲主屏幕，打通其與播放頁之間的雙向數據通道，以實現播放控制和狀態同步；其次，在虛擬屏上啓動播放相關的視圖，作爲鏡像和傳輸到大屏的內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主屏幕的方案基本確定，輪到虛擬屏的時候卻踩了坑。最初能想到的虛擬屏渲染對象，自然而然是全屏播放頁，然而試了才發現，直接將全屏播放頁渲染到虛擬屏，會存在如下兩個問題，附帶分析報告如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"問題1：主屏幕上的遙控器頁面首先被鏡像到大屏。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原因：Cast+ 會在建連成功後、設備處於 PLAYING 狀態時，開始抓取虛擬屏的內容，如果虛擬屏尚未加載，會截取主屏幕內容作爲兜底。經過測試，這個時間差大概在 100ms 左右，而期間播放頁無法完成初始化，因此會存在主屏幕內容佔用的問題。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"問題2：播放頁進入後存在橫豎屏切換邏輯，導致鏡像後屏幕會經歷一次轉屏。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原因：屬於播放頁自適應邏輯，初始進入時爲豎屏，在鏡像後會觸發橫屏切換邏輯，從而導致大屏側的轉屏。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"內部綜合評估後，決定採用更加輕量的方式實現虛擬屏。我們發現，播放器 Dialog 中只包含 SurfaceView 和 Loading 狀態等內容，如果僅僅鏡像 Dialog 級別，雖然增加了較多的播放器處理邏輯，但保證了上屏速度和更快的響應效率。調整後的方案結構如下圖所示。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/93/936ccd609eca0f9336fe0055b8e7fe04.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該方案具備如下優勢：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"優化了播放器的生命週期，每次在自由視角流轉和小屏播放之間切換時，僅僅切換 SurfaceView，並不重建播放器，此時播放器只是處於 STOPPED 狀態，切到小屏播放後，跳過了初始化和播放地址請求等過程，保證快速起播；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"將啓動 Presentation 的時機提前，在收到 onDisplayAdded 時就進行頁面啓動和播放器續播，大大縮短了上屏時間。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"綜上所示，最終的效果如下視頻所示。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"視頻請見原文中：","attrs":{}},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s?__biz=Mzg4MDY0ODk0Ng==&mid=2247484425&idx=1&sn=843ee988d8e03f0b1d7ea02cfaa564cc&chksm=cf70b394f8073a823edb4330d67c4a5a1a922a9fd36b0c84029597db6daf1701b90d7706f504&token=604618845&lang=zh_CN#rd","title":"","type":null},"content":[{"type":"text","text":"優酷鴻蒙開發實踐｜多屏互動開發實踐","attrs":{}}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"線上表現","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"網友們對鴻蒙系統的特性和優酷鴻蒙版本的表現，也表現出了強烈的興趣，我們摘取了網上的一些體驗視頻，列舉如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"《優酷鴻蒙版體驗——轉自知乎》：https://www.bilibili.com/video/BV1A5411w76Y/","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"《鴻蒙優酷投屏 愛了愛了》：https://www.bilibili.com/s/video/BV1pU4y187t3","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨後，經過兩個版本的持續迭代，優酷鴻蒙版的穩定性和體驗得到了極大改善。另一方面，伴隨着鴻蒙系統的自我完善，優酷鴻蒙版的二期需求版本已經開始排期，相信在雙方強強聯合之下，會持續給市場和用戶帶來驚喜。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在優酷鴻蒙版多屏互動專項的開發過程中，各參與方在鴻蒙接口和調試環境尚不完善的時候介入，克服了重重困難，不斷探索試錯，在極短的時間內掌握了鴻蒙開發技術棧，不僅順利完成了大大小小的開發任務，還反饋給華爲技術團隊不少遺留問題和改進建議。這是雙方再一次的深度合作，也是一次非常成功的實踐。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於華爲而言，優酷鴻蒙版不僅給鴻蒙生態帶來了開創性的視頻新交互形式，讓新用戶大呼過癮；而且完美適配了鴻蒙系統流轉特性、爲後續更豐富的新玩法鋪平了道路。對於優酷而言，鴻蒙上的多屏互動實踐，大大擴展了現有的多屏互動能力版圖，爲鴻蒙新時代積累了重要經驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#F5222D","name":"red"}},{"type":"strong","attrs":{}}],"text":"關注我們，每週 3 篇移動技術實踐&乾貨給你思考！","attrs":{}}]}]}