BILIBILI memanfaatkan solusi AI web di perangkat MediaPipe untuk meningkatkan UX streaming video dan menambah durasi sesi sebesar +30%

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

BILIBILI, salah satu platform konten hiburan utama di Greater China dan Asia Tenggara, menghosting database besar konten buatan pengguna, siaran live, dan pengalaman game yang menarik lebih dari 330 juta pengguna aktif bulanan (MAU).

Salah satu fitur unik platform BILIBILI adalah integrasi komentar bullet-screen, fitur populer di Jepang dan China yang menampilkan masukan penonton secara real time sebagai teks yang di-scroll di seluruh streaming video. Komentar layar peluru menambahkan elemen yang menarik dan imersif ke konten video live, sehingga penonton tetap berinteraksi secara aktif dengan mengekspresikan pikiran mereka sendiri dan merespons reaksi penonton lain secara real time.

Tantangan

Meskipun komentar layar buletin adalah cara menarik bagi penonton untuk berinteraksi dengan konten, penting untuk menjaga potret pembicara agar tidak terhalang untuk memberikan pengalaman pengguna terbaik. Dalam video berikut, komentar layar peluru dapat mengganggu dan membuat penonton tidak ingin melanjutkan menonton.

Status awal: Video awal menampilkan seseorang yang berbicara, dengan komentar yang di-scroll di layar, di atas wajah pembicara.

Untuk mengaktifkan komentar layar buletin yang mengalir dengan lancar di belakang potret pembicara, Anda memerlukan segmentasi machine learning yang akurat, yang dapat sulit dijalankan secara efisien di perangkat. Itulah sebabnya, secara historis, fitur yang canggih tersebut harus didukung sisi server.

Mengingat banyaknya konten yang ditayangkan BILIBILI setiap hari, memproses sebagian besar konten tersebut di sisi server akan sangat mahal. Jadi, tim pengembangan mereka perlu menemukan solusi sisi klien untuk mengurangi biaya. Tantangan selanjutnya adalah beralih ke machine learning sisi klien akan mempersulit penggunaan CPU agar tidak meningkat hingga performa terhambat.

Sasaran: Pada akhirnya, BILIBILI ingin komentar bullet-screen di-scroll dari kanan ke kiri di belakang pembicara, agar tidak menghalangi wajah pembicara.

Solusi: Segmentasi gambar di perangkat

Untuk mengatasi tantangan ini, developer BILIBILI memanfaatkan Segmentasi Tubuh dengan MediaPipe dan TensorFlow.js, pendahulu Pemroses Segmentasi Gambar MediaPipe. Hal ini menyediakan API segmentasi di perangkat yang efisien, serta model terlatih untuk selfie dan segmentasi multi-objek.

BILIBILI kini dapat melakukan iterasi dan mendukung fitur dengan cepat, sekaligus mengurangi biaya dan mempertahankan performa.

Penerapan

Berikut cara BILIBILI menerapkan solusi ini:

  1. Garis batas karakter real-time: BILIBILI menggunakan model Selfie Segmenter untuk mengekstrak garis batas karakter di seluruh video. Hal ini memungkinkan mereka membuat mask yang menentukan batas karakter.
  2. Integrasi dengan lapisan komentar live: Kemudian, mereka menggabungkan garis luar karakter yang diekstrak dengan lapisan komentar live menggunakan properti mask-image CSS. Dengan menetapkan area karakter tengah sebagai transparan, komentar layar peluru dapat muncul dengan lancar di belakang karakter tanpa menghalanginya.
    Karakter biru dalam kotak persegi panjang mengarah ke kotak lain dengan karakter abu-abu, yang mewakili mask SVG. Tanda plus dengan garis biru mewakili penambahan komentar live. Bersama-sama, ini sama dengan garis biru di belakang garis batas karakter, yang mewakili komentar yang mengalir di belakang karakter.
    Diagram yang menunjukkan cara developer BILIBILI mengekstrak garis batas karakter dari elemen video dan mengintegrasikannya dengan lapisan komentar live menggunakan komputasi real-time oleh MediaPipe.
  3. Mengoptimalkan penerapan: BILIBILI perlu menguji dan memastikan penerapan tidak menurunkan performa.

Pengoptimalan performa

Developer BILIBILI menggunakan OffscreenCanvas dan Web Workers untuk memindahkan tugas yang memakan waktu ke pekerja, agar tidak menempati thread utama. Kemudian, mereka mengurangi ukuran mask, karena hanya diperlukan untuk mengekstrak garis batas karakter dan tidak bergantung pada ukuran atau kualitas gambar.

Setelah mengurangi ukuran mask, tim pengembangan BILIBILI meregangkan mask selama komposisi dan menggabungkannya dengan lapisan DOM untuk mengurangi tekanan rendering sebanyak mungkin.

Karakter biru dalam kotak mengarah ke gambar mini yang identik. Garis putus-putus mengarah ke kotak hitam kecil dengan karakter transparan. Kotak hitam kecil mengarah ke kotak yang lebih besar dan identik. Proses minimalisasi ini ditambah komentar live, yang diwakili oleh garis biru, sama dengan hasil gabungan komentar yang mengalir di belakang karakter.
Diagram yang menunjukkan cara BILIBILI meminimalkan ukuran mask dan menggabungkannya dengan mask yang diregangkan.

Peningkatan durasi sesi dan rasio klik-tayang

Dengan menggabungkan jangkauan dan kemampuan web dengan fleksibilitas solusi AI MediaPipe, BILIBILI berhasil memberikan pengalaman aplikasi web yang efektif dan menarik kepada jutaan pengguna. Selain itu, hanya dalam satu bulan sejak penerapan, BILIBILI mengalami peningkatan durasi sesi sebesar 30% dan peningkatan rasio klik-tayang video live streaming sebesar 19%.

    30 %

    Peningkatan durasi sesi

    19 %

    CTR lebih tinggi

Dengan solusi AI web di perangkat MediaPipe yang gratis, developer BILIBILI dapat mempertahankan elemen visual penting secara efisien sekaligus menjaga penonton tetap berinteraksi, memastikan performa yang lancar, dan pada akhirnya, memberikan pengalaman streaming video premium yang diharapkan penonton dari pemimpin platform.

Kutipan dari Jun Liu, engineer senior di BILIBILI: Solusi MediaPipe membantu menghemat biaya pengembangan tanpa berfokus pada pembuatan model ekstraksi potret.