BILIBILI 是华大地区和东南亚的主要娱乐内容平台之一，拥有由用户生成的内容、直播和游戏体验的庞大数据库，吸引了超过 3.3 亿的月活跃用户 (MAU)。
BILIBILI 平台的一大特色是集成了弹幕评论功能。弹幕评论在日本和中国都很受欢迎，可将观看者实时反馈以滚动文本的形式显示在视频直播中。聊天弹幕可为直播视频内容增添令人兴奋且身临其境的元素，让观看者能够实时表达自己的想法并回应其他观看者的回应，从而保持积极互动。
挑战
虽然信息条评论是一种吸引观看者与内容互动的方式，但请务必让讲者的肖像不受遮挡，以便提供最佳用户体验。在以下视频中，信息量过多的弹幕可能会干扰观看体验，让观看者不想继续观看。
如需让要点评论能够在讲者肖像后面流畅播放，您需要准确的机器学习分割，但这在设备端可能很难高效运行。因此，从历史上看，此类强大的功能需要服务器端支持。
鉴于 bilibili 每天提供的内容量，在服务器端处理大量内容的费用非常高昂。因此，其开发团队需要找到一种客户端解决方案来降低费用。另一个挑战是，由于转向客户端机器学习，因此很难防止 CPU 使用量增加到影响性能的程度。
解决方案：设备端图像分割
为了应对这些挑战，BILIBILI 的开发者利用了使用 MediaPipe 和 TensorFlow.js 进行人体分割（MediaPipe 图片分割器的前身）。这提供了高效的设备端分割 API，以及用于自拍和多对象分割的预训练模型。
现在，BILIBILI 可以快速迭代和支持该功能，同时降低成本并保持性能。
实现
BILIBILI 是这样实现此解决方案的：
- 实时角色轮廓：BILIBILI 使用自拍分割模型提取整个视频中的角色轮廓。这样，他们就可以创建一个遮罩来划定字符的边界。
- 与实时注释层集成：然后，他们使用 CSS
mask-image属性将提取的字符轮廓与实时注释层合并。通过将中心字符区域设置为透明，项目符号屏幕注释可以无缝显示在字符后面，而不会遮挡字符。
一张示意图，展示了 BILIBILI 的开发者如何使用 MediaPipe 的实时计算功能从视频元素中提取角色轮廓，并将其与实时评论层集成。 - 优化实现：BILIBILI 需要进行测试，确保实现不会降低性能。
性能优化
BILIBILI 的开发者使用 OffscreenCanvas 和 Web Worker 将耗时的任务移到了 worker，以避免占用主线程。然后，他们缩减了遮罩的大小，因为它只需提取字符轮廓，而不依赖于图片大小或质量。
缩减遮罩大小后，BILIBILI 的开发团队在合成期间拉伸了遮罩，并将其与 DOM 层合并，以尽可能减轻渲染压力。
提高了会话时长和点击率
通过将 Web 的覆盖面和强大功能与 MediaPipe 的 AI 解决方案的灵活性相结合，BILIBILI 成功为数百万用户提供了强大且富有吸引力的 Web 应用体验。仅仅实施一个月后，bilibili 的直播视频会话时长就显著增加了 30%，直播视频的点击率也提高了 19%。
30 %
延长了会话时长
19 %
点击率增幅
借助 MediaPipe 的免费设备端 Web AI 解决方案，bilibili 的开发者能够高效保留关键的视觉元素，同时保持观看者的互动度，确保顺畅的性能，最终为观看者提供他们对该平台领军者的期望的高品质视频在线播放体验。
