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
Tyler Mullen
Tyler Mullen
LinkedIn
Jason Mayes

BILIBILI, salah satu platform konten hiburan terkemuka di China Daratan dan Asia Tenggara, menghosting database besar berisi konten buatan pengguna, siaran, dan pengalaman game yang menarik lebih dari 330 juta pengguna per bulan pengguna aktif (MAU).

Salah satu fitur khas dari platform BILIBILI adalah integrasi dari komentar layar berbutir, fitur populer di Jepang dan China yang menampilkan masukan penonton secara real-time sebagai scroll teks di seluruh streaming video. Layar butir komentar menambahkan elemen yang menarik dan imersif pada konten video live, penonton terlibat secara aktif dengan membiarkan mereka ke penonton lain, reaksi secara langsung.

Tantangan

Meskipun komentar layar berbutir adalah cara yang menarik bagi penonton untuk berinteraksi dengan konten, penting untuk menjaga agar potret pembicara tidak terhalang pengalaman pengguna terbaik. Dalam video berikut, komentar layar butir dapat mengganggu dan membuat penonton enggan menonton.

Status asli: Video awal menampilkan orang berbicara, dengan komentar yang bergulir di layar, di atas wajah pembicara.

Untuk memungkinkan komentar layar berbutir yang mengalir dengan mulus di belakang komentar pembicara Anda memerlukan segmentasi machine learning yang akurat, yang dapat sulit dijalankan secara efisien di perangkat. Itulah mengapa, secara historis, sekuat itu fitur harus didukung di sisi server.

Mengingat banyaknya konten yang disajikan BILIBILI setiap hari, pemrosesan data dalam jumlah besar sebagian sisi server akan sangat mahal. Jadi, tim pengembangan mereka yang diperlukan untuk menemukan solusi dari sisi klien untuk mengurangi biaya. Tantangan selanjutnya adalah, beralih ke machine learning sisi klien akan mempersulit upaya untuk mempertahankan CPU penggunaan yang meningkat hingga performa terhambat.

Tujuan: Pada akhirnya, BILIBILI ingin agar komentar layar butir dapat di-scroll dari kanan ke kiri di belakang speaker, 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 Segmen Gambar MediaPipe. Solusi ini memberikan API segmentasi di perangkat yang efisien, serta untuk segmentasi selfie dan 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 besar karakter real-time: BILIBILI menggunakan model Selfie Segmenter untuk mengekstrak garis batas karakter di seluruh video. Hal ini memungkinkan mereka untuk membuat mask yang menggambarkan batas-batas karakter.
  2. Integrasi dengan lapisan komentar langsung: Kemudian, mereka menggabungkan hasil yang diekstrak garis batas karakter dengan lapisan komentar langsung menggunakan CSS mask-image properti baru. Dengan mengatur area karakter pusat sebagai transparan, komentar layar berbutir dapat dengan mulus muncul di belakang karakter tanpa menghalangi mereka.
    Karakter biru dalam kotak persegi panjang menunjuk ke kotak lain dengan karakter abu-abu, yang merepresentasikan mask SVG. Tanda plus dengan garis biru mewakili penambahan komentar langsung. Bersama-sama, ini sama dengan garis biru di belakang garis luar karakter, yang merepresentasikan komentar yang mengalir di belakang karakter.
    Diagram yang menunjukkan cara developer BILIBILI mengekstraksi kerangka karakter dari elemen video dan mengintegrasikannya dengan lapisan komentar langsung menggunakan komputasi real-time oleh MediaPipe.
  3. Optimalkan penerapan: BILIBILI diperlukan untuk menguji dan memastikan tidak menurunkan performa.

Pengoptimalan performa

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

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

Karakter biru dalam kotak mengarah ke gambar mini yang identik. Garis putus-putus menunjuk ke kotak hitam kecil dengan karakter transparan. Kotak hitam kecil menunjuk ke kotak identik yang lebih besar. Proses minimalisasi plus komentar langsung, yang diwakili garis biru, sama dengan hasil gabungan komentar yang mengalir di belakang karakter.
Diagram yang menunjukkan bagaimana BILIBILI meminimalkan ukuran mask dan menggabungkannya dengan mask yang direntangkan.

Peningkatan durasi sesi dan rasio klik-tayang

Dengan mengombinasikan jangkauan dan kecanggihan web dengan fleksibilitas teknologi MediaPipe Solusi AI, BILIBILI berhasil menghadirkan aplikasi web yang canggih dan menarik pengalaman pengguna kepada jutaan pengguna. Dan, hanya dalam waktu satu bulan penerapan, BILIBILI mengalami peningkatan durasi sesi yang signifikan sebesar 30% dan peningkatan sebesar 19% rasio klik-tayang video live streaming.

    30 %

    Durasi sesi ditambah

    19 %

    CTR lebih tinggi

Dengan solusi AI web di perangkat gratis dari MediaPipe, developer BILIBILI dapat mempertahankan elemen visual penting dengan efisien sambil menjaga keterlibatan pemirsa, memastikan performa yang lancar, dan, pada akhirnya, menghadirkan video premium pengalaman streaming yang diharapkan penonton dari pemimpin platform.

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