BILIBILI は、グレーター チャイナと東南アジアの主要なエンターテイメント コンテンツ プラットフォームの一つで、ユーザー作成コンテンツ、ライブ配信、ゲーム体験の膨大なデータベースをホストし、月間アクティブ ユーザー数（MAU）が 3 億 3,000 万人を超えています。
BILIBILI のプラットフォームの特徴的な機能の一つが、弾幕コメントの統合です。これは、日本と中国で人気のある機能で、動画ストリーミング全体にスクロール テキストとして視聴者のリアルタイム フィードバックを表示します。弾幕コメントは、ライブ動画コンテンツにエキサイティングで没入感のある要素を追加します。視聴者は自分の考えを表現したり、他の視聴者の反応にリアルタイムで返信したりできるため、視聴者のエンゲージメントを高めることができます。
課題
吹き出しコメントは、視聴者がコンテンツを操作する魅力的な方法ですが、最適なユーザー エクスペリエンスを実現するには、スピーカーのポートレートが遮られないようにすることが重要です。次の動画では、吹き出しコメントが邪魔になり、視聴者が視聴を続けなくなる可能性があります。
スピーカーのポートレートの背後にシームレスに流れる箇条書きコメントを有効にするには、正確な機械学習セグメンテーションが必要ですが、デバイス上で効率的に実行するのは難しい場合があります。そのため、これまでは、このような強力な機能はサーバーサイドでサポートする必要がありました。
BILIBILI が毎日提供するコンテンツの量を考えると、その大部分をサーバーサイドで処理するのは非常に費用がかかります。そのため、開発チームはコストを削減するためのクライアントサイド ソリューションを見つける必要がありました。別の課題として、クライアントサイドの ML に移行すると、パフォーマンスが低下するほど CPU 使用量を抑えることが難しくなります。
ソリューション: デバイス上の画像分割
これらの課題に対処するため、BILIBILI のデベロッパーは、MediaPipe の画像セグメンテーションツールの前身である MediaPipe と TensorFlow.js によるボディ セグメンテーションを活用しました。これにより、効率的なオンデバイス分割 API と、自撮りや複数オブジェクトの分割用に事前トレーニング済みのモデルが提供されました。
BILIBILI は、コストを削減しながらパフォーマンスを維持しながら、機能を迅速に反復処理してサポートできるようになりました。
実装
BILIBILI がこのソリューションを実装した方法は次のとおりです。
- リアルタイムの文字の輪郭: BILIBILI は、自撮りセグメンテーション モデルを使用して、動画全体の文字の輪郭を抽出しました。これにより、文字の境界を示すマスクを作成できました。
- ライブコメントレイヤとの統合: 次に、CSS
mask-imageプロパティを使用して、抽出された文字の輪郭をライブコメントレイヤと統合しました。中央の文字領域を透明に設定すると、箇条書きの画面コメントを文字を遮ることなく文字の背後にシームレスに表示できます。
BILIBILI のデベロッパーが、MediaPipe のリアルタイム コンピューティングを使用して動画要素から文字の輪郭を抽出し、ライブコメントレイヤと統合する方法を示した図。 - 実装を最適化する: BILIBILI は、実装によってパフォーマンスが低下していないことをテストする必要がありました。
パフォーマンスの最適化
BILIBILI のデベロッパーは、OffscreenCanvas と Web Workers を使用して、時間のかかるタスクをワーカーに移動し、メインスレッドの占有を回避しました。次に、マスクのサイズを縮小しました。マスクは文字の輪郭を抽出するためにのみ必要であり、画像のサイズや品質には依存しないためです。
マスクサイズを小さくした後、BILIBILI の開発チームは、コンポーズ中にマスクを伸ばし、DOM レイヤと統合して、レンダリング負荷を可能な限り軽減しました。
セッション継続時間とクリック率の向上
BILIBILI は、ウェブのリーチとパワーを MediaPipe の AI ソリューションの柔軟性と組み合わせることで、何百万人ものユーザーに強力で魅力的なウェブアプリ エクスペリエンスを提供することに成功しました。実装からわずか 1 か月で、BILIBILI のセッション継続時間は 30% 増加し、ライブ配信動画のクリックスルー率は 19% 向上しました。
30 %
セッション継続時間の増加
19 %
CTR の向上率
MediaPipe の無料のオンデバイス ウェブ AI ソリューションにより、BILIBILI の開発者は、視聴者のエンゲージメントを維持しながら、重要な視覚要素を効率的に保持し、スムーズなパフォーマンスを確保し、最終的には、視聴者がプラットフォーム リーダーに期待するプレミアムな動画ストリーミング エクスペリエンスを提供できました。
