BILIBILI，大中华区最重要的娱乐内容平台之一 和东南亚地区，拥有庞大的用户原创内容数据库， 广播节目和游戏体验，每月吸引超过 3.3 亿观众 活跃用户数 (MAU)。
BILIBILI 平台与众不同的一项功能是 项目符号是日本和中国的一种热门功能，它会显示 滚动文字显示观看者的实时反馈。项目符号 评论功能为直播视频内容增添了令人兴奋和沉浸感的元素， 让观看者表达自己的想法和回应，从而积极参与互动 与其他观看者的回应。
挑战
项目符号评论是吸引观看者进行互动的一种方式 展示内容时，务必要确保演讲者的肖像不被遮挡 最佳用户体验在以下视频中，项目符号评论可以 干扰观看者，让他们打消继续观看的念头。
启用演讲者备注后无缝显示的项目符号评论 您需要准确的机器学习细分， 难以在设备端高效运行。正因如此，历史上 则需要服务器端支持。
鉴于 BILIBILI 每天投放的内容量 在服务器端进行部分处理将会非常昂贵。他们的开发团队 需要找到一个客户端解决方案来降低成本。进一步的挑战 迁移到客户端机器学习会让 使用量从增加到影响性能的程度。
解决方案：设备端图像分割
为了应对这些挑战，BILIBILI 的开发者 使用 MediaPipe 和 TensorFlow.js 进行身体分割， MediaPipe 的图像分割器的前身。 这提供了一个高效的设备端分割 API，以及 用于自拍和多对象分割的模型。
BILIBILI 现在可以快速迭代和支持该功能，同时降低成本 和维护性能。
实现
BILIBILI 实施此解决方案的方式如下：
- 实时人物轮廓：BILIBILI 使用自拍分割器模型 从整个视频中提取字符轮廓。这使得他们 创建用于划分字符边界的蒙版。
- 与实时评论层集成：然后，他们将提取的
使用 CSS 显示实时评论层的字符轮廓
mask-image属性。通过将字符中心区域设置为透明， 项目符号可以顺畅地显示在角色背后， 造成干扰。
显示 BILIBILI 开发者如何使用 MediaPipe 的实时计算从视频元素中提取角色轮廓并将其与实时评论层集成的示意图。 - 优化实施方式：BILIBILI 需要测试并确保 且不会降低性能。
性能优化
BILIBILI 的开发者使用了 OffscreenCanvas 和 Web Worker 来 将耗时的任务移到 worker，以避免占用主线程。然后， 他们减小了蒙版的大小，因为我们只需提取 不取决于图片大小或质量。
缩减口罩尺寸后，BILIBILI 的开发团队将口罩拉长 并将其与 DOM 层合并，以减少渲染 尽可能大的压力
提高会话时长和点击率
通过将网络的覆盖面和强大功能与 MediaPipe 的灵活性相结合， AI 解决方案，BILIBILI 成功交付了功能强大且富有吸引力的 Web 应用 为数百万用户提供更好的体验而且，在实施后的短短一个月内 BILIBILI 的会话时长显著增加，提升了 30%，改善了 19% 直播视频的点击率增幅
30 个 百分比
会话时长增加
19 个 百分比
点击率增幅
借助 MediaPipe 的免费设备端 Web AI 解决方案，BILIBILI 的开发者可以 高效保留关键视觉元素，同时保持对观看者的吸引力， 从而确保流畅的性能，并最终为他们提供优质的视频， 满足观看者对平台领导者所期望的在线播放体验。
