BILIBILI 是中國大陸和東南亞地區首屈一指的娛樂內容平台，擁有大量使用者自製內容、直播和遊戲體驗資料庫，每月活躍使用者 (MAU) 超過 3 億。
彈幕是 bilibili 平台的特色功能之一，在日本和中國相當受歡迎。這項功能會在影片串流中顯示觀眾的即時意見回饋，以捲動文字的形式呈現。彈幕留言可為直播影片內容增添令人興奮的沉浸式元素，讓觀眾表達自己的想法，並即時回應其他觀眾的反應，進而保持積極參與。
難題
雖然彈幕是觀眾與內容互動的有趣方式，但為了提供最佳使用者體驗，請務必確保講者肖像不受遮蔽。在下方影片中，彈幕可能會造成干擾，讓觀眾不想繼續觀看。
如要讓子彈頭螢幕註解能流暢地在講者大頭照後方顯示，您需要使用精確的機器學習區隔技術，但這類技術在裝置端執行時可能效率不彰。因此，這類強大功能在過去必須由伺服器端支援。
考量 bilibili 每天提供的內容量，在伺服器端處理大量內容會非常昂貴。因此，開發團隊需要尋找用於降低成本的用戶端端解決方案。另一個挑戰是，改用用戶端端機器學習技術後，很難避免 CPU 用量增加到影響效能的程度。
解決方案：裝置端圖像分割
為解決這些問題，bilibili 的開發人員利用MediaPipe 和 TensorFlow.js 進行身體區隔，這是 MediaPipe 圖片區隔器的前身。這項功能提供了高效的裝置端區隔 API，以及自拍和多物件區隔的預先訓練模型。
BILIBILI 現可快速迭代並支援這項功能，同時降低成本並維持效能。
導入作業
以下是 BILIBILI 實作這項解決方案的方式：
- 即時人物輪廓：BILIBILI 使用 Selfie Segmenter 模型，擷取影片中人物的輪廓。這讓他們能夠建立遮罩，劃分字元邊界。
- 與即時註解圖層整合：接著，他們使用 CSS
mask-image屬性，將擷取的字元輪廓與即時註解圖層合併。將中央角色區域設為透明，可讓子彈螢幕註解流暢地顯示在角色後方，而不會遮住角色。
這張圖表顯示 BILIBILI 的開發人員如何從影片元素中擷取角色輪廓，並使用 MediaPipe 的即時運算技術，將其與即時留言層整合。 - 最佳化導入作業：BILIBILI 需要進行測試，確保導入作業不會降低效能。
效能最佳化
BILIBILI 的開發人員使用 OffscreenCanvas 和 Web Workers，將耗時的工作移至 worker，避免佔用主執行緒。接著，他們縮小了遮罩大小，因為只需要擷取字元輪廓，不依賴圖片大小或品質。
縮小遮罩大小後，BILIBILI 的開發團隊在組合期間拉伸遮罩，並將其與 DOM 圖層合併，以盡可能減少算繪壓力。
提高工作階段持續時間和點閱率
BILIBILI 結合了網路的觸及範圍和強大功能，以及 MediaPipe AI 解決方案的彈性，成功為數百萬使用者提供強大且引人入勝的網頁應用程式體驗。實施後短短一個月，bilibili 的工作階段時間長度明顯增加 30%，直播影片的點閱率也提升了 19%。
30 %
工作階段持續時間增加
19 %
點閱率升幅
有了 MediaPipe 免費的裝置端網頁 AI 解決方案，bilibili 的開發人員就能有效保留重要視覺元素，同時維持觀眾的互動度，確保順暢的效能，最終提供觀眾期待的優質串流影片體驗。
