BILIBILI、MediaPipe のオンデバイス ウェブ AI ソリューションを利用して動画ストリームの UX を改善し、セッション継続時間を 30% 拡大

Jun Jiu
Cecilia Cong
Cecilia Cong
Tyler Mullen
Tyler Mullen
LinkedIn
Jason Mayes

BILIBILI は、中華圏の大手エンターテイメント コンテンツ プラットフォームです。 コンテンツを集めた膨大なデータベースをライブでホストし、 ゲーム体験を通じて、月間 3 億 3, 000 万人以上が利用する アクティブ ユーザー（MAU）

BILIBILI のプラットフォームの特徴の一つは 箇条書き画面のコメント機能は、日本と中国でよく利用されています。 複数の動画ストリームにテキストをスクロールすることで、 視聴者からリアルタイムにフィードバックを受け取れます。箇条書き画面 ライブ動画コンテンツに刺激的で没入感のある要素が追加されます。これにより、 視聴者が自分の考えを表明したり反応したりできるようにすることで、視聴者が積極的に関与している 他の視聴者のリアルタイムで生成できます。

課題

箇条書きを使ったコメントは視聴者と交流するための 発言者のポートレートが遮られないようにし、 実現できるようにすることです次の動画では、箇条書き画面のコメントを 視聴を中断させ 視聴をやめさせる

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
元の状態: 最初の動画では、人物が話し、 画面や発表者の顔にスクロールするコメント。

箇条書き画面のコメントを発言者の背後でシームレスに 正確な ML セグメンテーションが必要です。 実行が困難ですだからこそ、これまでも サーバーサイドでサポートする必要があります

BILIBILI が 1 日に配信するコンテンツの量を考慮すると、 サーバーサイドでの一部分だけ使用すると、非常に高額になります。開発チームは 費用削減のためのクライアントサイドの ソリューションを見つける必要がありましたさらなるチャレンジ クライアントサイドの ML に移行すると、CPU 使用率の パフォーマンスが低下することがあります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
目標: 最終的に BILIBILI は、箇条書き画面のコメントをスクロールするようにしたいと考えました。 発言者の顔を邪魔しないように、発言者の背後に右から左に並べます。

ソリューション: デバイス上の画像セグメンテーション

これらの課題に対処するため、BILIBILI の開発者は MediaPipe と TensorFlow.js を使用した身体セグメンテーション これは MediaPipe の Image Segmenter の前身です。 これにより効率的なオンデバイス セグメンテーション API と、事前トレーニング済み モデルを使用しています。

BILIBILI は、費用を削減しながら、この機能のイテレーションとサポートを迅速に行えるようになりました。 パフォーマンスを維持します

実装

BILIBILI がこのソリューションを実装した方法を次に示します。

  1. リアルタイムのキャラクターのアウトライン: BILIBILI は自撮り写真の Segmenter モデルを使用 を使用して、動画内の文字の輪郭を抽出します。これにより、 を使用して、文字の境界を区切るマスクを作成します。
  2. ライブコメント レイヤとの統合: その後、抽出されたコメント レイヤを CSS を使用したライブコメント レイヤ付きのキャラクターのアウトライン mask-image プロパティです。中央の文字領域を透明に設定すると、 箇条書き画面のコメントは文字の背後にシームレスに表示されますが、 妨げます。 <ph type="x-smartling-placeholder">
    </ph> 長方形のボックス内の青い文字が、SVG マスクを表す灰色の文字のある別のボックスを指しています。青い線のプラス記号は、ライブコメントの追加を表します。これらを組み合わせることで、文字の輪郭の背後に青い線が見え、文字の後ろにコメントが流れることになります。
    MediaPipe によるリアルタイム コンピューティングを使用して、BILIBILI のデベロッパーが動画要素から文字のアウトラインを抽出し、ライブコメント レイヤと統合した方法を示す図
  3. 実装の最適化: BILIBILI は、 パフォーマンスが低下することはありません

パフォーマンスの最適化

BILIBILI の開発者は OffscreenCanvas ウェブワーカーから 時間のかかるタスクをワーカーに移動して、メインスレッドを占有しないようにします。次に、 文字の抽出のみが必要なため、マスクのサイズを縮小しました。 画像のサイズや画質に依存しません。

マスクサイズを縮小した後、BILIBILI の開発チームはマスクを引き伸ばした レンダリングを減らすために DOM レイヤと統合されました。 プレッシャーを与えます

<ph type="x-smartling-placeholder">
</ph> 箱の中にある青い文字が、同じミニの絵を指し示している。点線は、透明な文字のある小さな黒いボックスを指しています。小さな黒いボックスが、同じ大きさのボックスを指しています。この最小化プロセスに青い線で示されるライブコメントを加えた結果が、キャラクターの後ろに流れるコメントのマージ結果に等しくなります。
BILIBILI がマスクサイズを最小限に抑え、引き伸ばされたマスクと結合する方法を示す図。

セッション継続時間とクリック率の増加

ウェブのリーチとパワーと MediaPipe の柔軟性を組み合わせることで、 BILIBILI は、高機能かつ魅力的なウェブアプリの提供に成功しました。 優れたエクスペリエンスが 何百万人ものユーザーに提供されますまた、実装からわずか 1 か月で、 BILIBILI では、セッション継続時間が 30% 増加し、19% 改善を達成 ライブ配信動画のクリック率

    30 個 %

    セッション継続時間が増加

    19 %

    クリック率の向上

MediaPipe の無料のオンデバイス ウェブ AI ソリューションにより、BILIBILI の開発者は次のことを実現できました。 重要な視覚要素を効率的に保持しながら 視聴者のエンゲージメントを維持できます スムーズなパフォーマンスを実現し 最終的には 視聴者が期待するライブ配信体験を提供します。

BILIBILI のシニア エンジニアである Jun Liu 氏の言葉: MediaPipe のソリューションは、ポートレート抽出モデルの作成に注力することなく、開発費用を削減できました。