如何像抖音直播一樣，從 App 直播間到桌面畫中畫實現畫面無縫切換？丨有問有答

語言: CN / TW / HK
時間 2022-04-19 08:47:29
主題:

收錄於話題

前一些時間，我在知識星球上建立了一個音視訊技術社群： 關鍵幀的音視訊開發圈 ，不少朋友加入並在裡面諮詢一些音視訊相關的技術問題，其中不乏一些開發中普遍遇到的問題，這裡我會挑一些放出來供大家參考。

如果你也有音視訊技術問題想諮詢，或者符合下面的情況：

  • 在校大學生 → 學習音視訊開發

  • iOS/Android 客戶端開發 → 轉入音視訊領域

  • 直播/短視訊業務開發 → 深入音視訊底層 SDK 開發

  • 音視訊 SDK 開發 → 提升技能，解決優化瓶頸

不妨看看 《是的，我建了一個進階百萬年薪的社群》 瞭解一下這個社群，根據自己的需要，按需加入。

今天我們要討論的問題是一位社群的朋友遇到的一個工作中的技術優化問題，原文如下：

請問 iOS 畫中畫小窗播放如何做到像抖音一樣無縫切換？目前 App 內使用騰訊雲的播放器播放 flv 的流，切到桌面畫中畫小窗時必須使用系統的 AVPictureInPictureController + AVPlayer，AVPlayer 不支援 flv，所以只能播放 hls 的流。又因為 hls 比 flv 延遲高，而且需要重新開始拉流，無法做到畫面無縫銜接，體驗不是很好。能否給點優化建議？

以下是建議的技術方案，歡迎大家留言討論補充：

方案 1：佔位 AVPlayer + 旁路 flv 渲染檢視，實現畫中畫的畫面無縫切換。

在 App 的直播間依然使用騰訊雲的播放器播放 flv 的流，同時在 flv 的首幀渲染成功後，再拉起一個 AVPlayer 來播放一路佔位的 hls 流（可以靜音、全黑、小尺寸畫面）。這個 AVPlayer 在 App 內不顯示出來，但是把它作為畫中畫 AVPictureInPictureController 的播放器。

當退後臺時，處理畫中畫的事件回撥，從直播播放器拿一個旁路的渲染 view 貼到畫中畫的 AVPictureInPictureController 檢視上，這個旁路的渲染 view 繼續渲染直播 flv 流的內容，這樣就實現了畫面無縫切換了。

需要注意的是：

  • 1）App 要開啟後臺播放音訊，繼續播放 flv 流的聲音；

  • 2）支援後臺渲染的能力，支援退後臺後，旁路渲染 view 能平滑渲染 flv 流，這需要設定好 MPNowPlayingInfoCenter.nowPlayingInfo（否則會只有聲音，畫面會卡住或閃動）。

  • 3）hls 流只要跟 flv 流的比例一致就好了，大小不影響，畫中畫的尺寸是按比例來的。

這個方案有個問題，即真實直播流 flv 和佔位流 hls 這兩個流的狀態其實是不一致的。如果 hls 那路流一直不出問題還好，畫中畫始終依賴 flv 的流狀態控制 UI 就好，但是如果 hls 那路流出錯導致 AVPlayer 報錯就會直接影響到畫中畫的狀態。

除了這個方案外，我還提出了另外一個方案 2，不過改動會比較大，這裡就先不公佈了。如果你確實感興趣或者有更好的方案，可以在通過本文後的二維碼加入我們 關鍵幀的音視訊開發圈 一起了解和探討。

- 完 -

長按識別二維碼加入社群

還剩少量優惠券，早到早得

謝謝看完全文，也點一下『贊』和 『在看』吧 ↓

「」