BILIBILI ใช้โซลูชัน AI บนเว็บในอุปกรณ์ของ MediaPipe เพื่อปรับปรุง UX ของสตรีมวิดีโอและเพิ่มระยะเวลาเซสชันได้เพิ่มขึ้น 30%

Jun Jiu

Cecilia Cong

Tyler Mullen

Jason Mayes

BILIBILI เป็นหนึ่งในแพลตฟอร์มเนื้อหาความบันเทิงชั้นนำในจีนแผ่นดินใหญ่และเอเชียตะวันออกเฉียงใต้ ซึ่งให้บริการฐานข้อมูลขนาดใหญ่ของเนื้อหาที่ผู้ใช้สร้างขึ้น การถ่ายทอดสด และประสบการณ์การเล่นเกมที่ดึงดูดผู้ใช้ที่ใช้งานอยู่ในแต่ละเดือน (MAU) มากกว่า 330 ล้านคน

หนึ่งในฟีเจอร์ที่โดดเด่นของแพลตฟอร์ม BILIBILI คือการผสานรวมความคิดเห็นแบบข้อความที่วิ่ง ซึ่งเป็นหนึ่งในฟีเจอร์ยอดนิยมในญี่ปุ่นและจีนที่แสดงความคิดเห็นของผู้ชมแบบเรียลไทม์เป็นข้อความที่เลื่อนไปมาในสตรีมวิดีโอ ความคิดเห็นแบบข้อความในวิดีโอสดจะเพิ่มองค์ประกอบที่น่าตื่นเต้นและดึงดูดให้ผู้ชมมีส่วนร่วมกับเนื้อหาวิดีโอสดได้อย่างต่อเนื่อง โดยให้ผู้ชมได้แสดงความคิดเห็นของตนเองและโต้ตอบกับความรู้สึกของผู้ชมคนอื่นๆ แบบเรียลไทม์

ความท้าทาย

แม้ว่าความคิดเห็นแบบข้อความบนหน้าจอจะเป็นวิธีที่ดึงดูดให้ผู้ชมโต้ตอบกับเนื้อหาได้ แต่สิ่งสำคัญคือต้องไม่บดบังภาพของผู้พูดเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด ในวิดีโอต่อไปนี้ ความคิดเห็นแบบข้อความไฮไลต์อาจรบกวนและไม่ทำให้ผู้ชมอยากดูต่อ

หากต้องการเปิดใช้ความคิดเห็นแบบข้อความสั้นๆ ที่แสดงอยู่ด้านหลังภาพบุคคลของผู้พูดอย่างราบรื่น คุณต้องใช้การแบ่งกลุ่มด้วยแมชชีนเลิร์นนิงที่แม่นยำ ซึ่งอาจทำงานได้อย่างมีประสิทธิภาพในอุปกรณ์ได้ยาก ด้วยเหตุนี้ ที่ผ่านมาฟีเจอร์ที่มีประสิทธิภาพสูงดังกล่าวจึงจำเป็นต้องได้รับการรองรับฝั่งเซิร์ฟเวอร์

การที่ BILIBILI แสดงเนื้อหาจำนวนมากในแต่ละวันทำให้การประมวลผลเนื้อหาส่วนใหญ่ฝั่งเซิร์ฟเวอร์มีค่าใช้จ่ายสูงมาก ทีมพัฒนาซอฟต์แวร์จึงต้องหาโซลูชันฝั่งไคลเอ็นต์เพื่อลดต้นทุน ปัญหาอีกประการหนึ่งคือ การเปลี่ยนไปใช้แมชชีนเลิร์นนิงฝั่งไคลเอ็นต์ทําให้ควบคุมการใช้งาน CPU ไม่ให้เพิ่มขึ้นจนทําให้ประสิทธิภาพลดลงได้ยาก

โซลูชัน: การแบ่งกลุ่มรูปภาพในอุปกรณ์

นักพัฒนาซอฟต์แวร์ของ BILIBILI ใช้การแยกส่วนต่างๆ ของร่างกายด้วย MediaPipe และ TensorFlow.js ซึ่งเป็นรุ่นก่อนหน้าของเครื่องมือแยกแยะรูปภาพของ MediaPipe เพื่อแก้ปัญหาเหล่านี้ ซึ่งทำให้ได้ API การแบ่งกลุ่มในอุปกรณ์ที่มีประสิทธิภาพ รวมถึงโมเดลที่ผ่านการฝึกล่วงหน้าสำหรับการแยกแยะเซลฟีและวัตถุหลายรายการ

ตอนนี้ BILIBILI สามารถปรับปรุงและรองรับฟีเจอร์นี้อย่างรวดเร็ว ทั้งยังลดต้นทุนและคงประสิทธิภาพไว้ได้

การใช้งาน

วิธีการที่ BILIBILI ใช้โซลูชันนี้

1. ขอบของตัวละครแบบเรียลไทม์: BILIBILI ใช้โมเดลตัวแบ่งส่วนเซลฟีเพื่อดึงขอบของตัวละครตลอดทั้งวิดีโอ ซึ่งช่วยให้พวกเขาสร้างมาสก์ที่กําหนดขอบเขตของตัวละครได้
2. การผสานรวมกับเลเยอร์ความคิดเห็นแบบเรียลไทม์: จากนั้นผสานขอบของตัวอักษรที่ดึงมากับเลเยอร์ความคิดเห็นแบบเรียลไทม์โดยใช้พร็อพเพอร์ตี้ CSSmask-image การตั้งค่าพื้นที่ตัวละครหลักเป็นแบบโปร่งใสจะช่วยให้ความคิดเห็นแบบข้อความบรรยายปรากฏอยู่ด้านหลังตัวละครได้อย่างราบรื่นโดยไม่บดบังตัวละคร

   

3. เพิ่มประสิทธิภาพการติดตั้งใช้งาน: BILIBILI ต้องทดสอบและตรวจสอบว่าการติดตั้งใช้งานไม่ได้ทำให้ประสิทธิภาพลดลง

การเพิ่มประสิทธิภาพ

นักพัฒนาซอฟต์แวร์ของ BILIBILI ใช้ OffscreenCanvas และ Web Workers เพื่อย้ายงานที่ใช้เวลานานไปยังผู้ปฏิบัติงาน เพื่อไม่ให้ใช้ชุดข้อความหลัก จากนั้นจึงลดขนาดของหน้ากาก เนื่องจากมีไว้เพื่อดึงโครงร่างของตัวละครเท่านั้นและไม่ได้ขึ้นอยู่กับขนาดหรือคุณภาพของรูปภาพ

หลังจากลดขนาดมาสก์แล้ว ทีมพัฒนาของ BILIBILI ได้ยืดมาสก์ระหว่างการจัดวางและผสานกับเลเยอร์ DOM เพื่อลดภาระการแสดงผลให้มากที่สุด

ระยะเวลาเซสชันและอัตราการคลิกผ่านเพิ่มขึ้น

BILIBILI มอบประสบการณ์การใช้งานเว็บแอปที่มีประสิทธิภาพและน่าสนใจให้แก่ผู้ใช้หลายล้านคนได้สำเร็จด้วยการรวมการเข้าถึงและความสามารถของเว็บเข้ากับความยืดหยุ่นของโซลูชัน AI ของ MediaPipe และภายในเพียง 1 เดือนหลังจากใช้งาน BILIBILI พบว่าระยะเวลาเซสชันเพิ่มขึ้น 30% และอัตราคลิกผ่านของวิดีโอสตรีมมิงแบบสดเพิ่มขึ้น 19%

30 _%

ระยะเวลาเซสชันเพิ่มขึ้น

19 _%

CTR สูงขึ้น

โซลูชัน AI บนเว็บในอุปกรณ์แบบไม่มีค่าใช้จ่ายของ MediaPipe ช่วยให้นักพัฒนาซอฟต์แวร์ของ BILIBILI คงองค์ประกอบภาพที่สำคัญไว้ได้อย่างมีประสิทธิภาพไปพร้อมๆ กับการดึงดูดผู้ชม ช่วยให้มั่นใจได้ว่าประสิทธิภาพจะราบรื่น และท้ายที่สุดก็มอบประสบการณ์สตรีมมิงวิดีโอระดับพรีเมียมที่ผู้ชมคาดหวังจากผู้นำแพลตฟอร์ม