BILIBILI หนึ่งในแพลตฟอร์มเนื้อหาบันเทิงชั้นนำในเกรทเทอร์ไชนา และเอเชียตะวันออกเฉียงใต้ โฮสต์ฐานข้อมูลขนาดใหญ่ของเนื้อหาที่ผู้ใช้สร้างขึ้น ออกอากาศ และประสบการณ์การเล่นเกมที่ดึงดูดผู้คนมากกว่า 330 ล้านคนต่อเดือน ผู้ใช้ที่ใช้งานอยู่ (MAU)
หนึ่งในฟีเจอร์ที่โดดเด่นของแพลตฟอร์มของ BILIBILI คือการผสานรวม ความคิดเห็นบนจอหัวข้อย่อย ซึ่งเป็นฟีเจอร์ยอดนิยมในญี่ปุ่นและจีนที่ ความคิดเห็นของผู้ชมแบบเรียลไทม์ในรูปแบบข้อความแบบเลื่อนผ่านสตรีมวิดีโอ หัวข้อย่อย ความคิดเห็นจะเพิ่มองค์ประกอบที่น่าตื่นเต้นและสมจริงให้กับเนื้อหาวิดีโอสด ทำให้ผู้ชมมีส่วนร่วมอย่างแข็งขันโดยให้พวกเขาแสดงความคิดและตอบสนอง แก่ผู้ชมคนอื่นๆ ความรู้สึกแบบเรียลไทม์
ความท้าทาย
ขณะที่การแสดงความคิดเห็นด้วยสัญลักษณ์หัวข้อย่อยเป็นวิธีที่น่าสนใจสำหรับผู้ชมในการโต้ตอบกับผู้ชม กับเนื้อหา สิ่งสำคัญคือต้องวางภาพผู้พูดให้ถูกกีดขวาง ประสบการณ์ของผู้ใช้ที่ดีที่สุด ในวิดีโอต่อไปนี้ สามารถใช้ความคิดเห็นบนหน้าจอหัวข้อย่อยได้ รบกวนและขัดขวางไม่ให้ผู้ชมดูต่อ
เพื่อเปิดใช้ความคิดเห็นบนจอหัวข้อย่อยที่ลื่นไหลต่อเนื่องหลังผู้พูด คุณต้องใช้การแบ่งกลุ่มแมชชีนเลิร์นนิงที่แม่นยำ บนอุปกรณ์อย่างมีประสิทธิภาพ ด้วยเหตุนี้ ในอดีตที่ผ่านมา ดังกล่าวจะต้องเป็นฝั่งเซิร์ฟเวอร์ที่รองรับ
เมื่อพิจารณาจากปริมาณเนื้อหาที่ BILIBILI แสดงในแต่ละวัน การประมวลผลข้อมูลจำนวนมาก ในฝั่งเซิร์ฟเวอร์จะมีราคาสูงมาก ดังนั้น ทีมพัฒนาแอป หาโซลูชันฝั่งไคลเอ็นต์เพื่อลดต้นทุน ความท้าทายที่กำลังจะเกิดขึ้น การเปลี่ยนไปใช้แมชชีนเลิร์นนิงฝั่งไคลเอ็นต์ทำให้ดูแล CPU ได้ยาก ตั้งแต่ที่เพิ่มขึ้นจนถึงจุดที่ประสิทธิภาพขัดขวาง
โซลูชัน: การแบ่งกลุ่มรูปภาพในอุปกรณ์
เพื่อรับมือกับความท้าทายเหล่านี้ นักพัฒนาซอฟต์แวร์ของ BILIBILI จึงใช้ประโยชน์จาก การแบ่งกลุ่มร่างกายด้วย MediaPipe และ TensorFlow.js, รุ่นก่อนหน้าเครื่องมือแบ่งกลุ่มรูปภาพของ MediaPipe เครื่องมือนี้มอบ API การแบ่งกลุ่มลูกค้าในอุปกรณ์ที่มีประสิทธิภาพ รวมถึง โมเดลสำหรับการแบ่งกลุ่มลูกค้าแบบเซลฟีและแบบหลายวัตถุ
ขณะนี้ BILIBILI สามารถเร่งรัดและสนับสนุนฟีเจอร์ดังกล่าวได้อย่างรวดเร็ว ทั้งยังลดต้นทุน และคงประสิทธิภาพไว้
การใช้งาน
ต่อไปนี้คือวิธีที่ BILIBILI นำโซลูชันนี้ไปใช้
- โครงร่างอักขระแบบเรียลไทม์: BILIBILI ใช้รูปแบบการแบ่งกลุ่มเซลฟี เพื่อดึงโครงร่างของตัวละครตลอดทั้งวิดีโอ ซึ่งช่วยให้ เพื่อสร้างมาสก์ที่อธิบายขอบเขตของตัวละคร
- การผสานรวมกับเลเยอร์ความคิดเห็นแบบสด: จากนั้นผสานข้อความที่ดึงมา
โครงร่างอักขระพร้อมด้วยเลเยอร์ความคิดเห็นแบบสดโดยใช้ CSS
mask-imageพร็อพเพอร์ตี้ เมื่อตั้งค่าพื้นที่ตัวละครกลางเป็นโปร่งใส ความคิดเห็นบนหน้าจอหัวข้อย่อยจะปรากฏอยู่ข้างหลังตัวละครได้อย่างราบรื่น มาบดบังวันที่ 
แผนภาพแสดงวิธีที่นักพัฒนาซอฟต์แวร์ของ BILIBILI ดึงข้อมูลโครงร่างตัวละครจากองค์ประกอบวิดีโอและผสานรวมเข้ากับเลเยอร์ความคิดเห็นแบบสดโดยใช้การประมวลผลแบบเรียลไทม์โดย MediaPipe - เพิ่มประสิทธิภาพการใช้งาน: BILIBILI ที่จำเป็นในการทดสอบและตรวจสอบให้แน่ใจว่า ไม่ได้ทำให้ประสิทธิภาพลดลง
การเพิ่มประสิทธิภาพ
ที่นักพัฒนาซอฟต์แวร์ของ BILIBILI ใช้ OffscreenCanvas และWeb Workers เพื่อ ย้ายงานที่ใช้เวลานานไปยังผู้ปฏิบัติงาน เพื่อหลีกเลี่ยงการใช้งานเทรดหลัก จากนั้นให้ทำดังนี้ ลดขนาดของมาสก์ลง เนื่องจากใช้แค่การแยกอักขระเท่านั้น เค้าโครงและไม่ขึ้นอยู่กับขนาดหรือคุณภาพของรูปภาพ
หลังจากลดขนาดมาสก์แล้ว ทีมพัฒนาของ BILIBILI ก็ยืดขยายหน้ากาก ในระหว่างการจัดองค์ประกอบและนำไปรวมกับเลเยอร์ DOM เพื่อลดการแสดงผล ให้ได้มากที่สุด
ระยะเวลาเซสชันและอัตราการคลิกผ่านเพิ่มขึ้น
โดยรวมการเข้าถึงและพลังของเว็บเข้ากับความยืดหยุ่นของ MediaPipe โซลูชัน AI อย่าง BILIBILI ประสบความสำเร็จในการส่งมอบเว็บแอปที่ทรงพลังและน่าสนใจ ให้แก่ผู้ใช้หลายล้านคน และภายใน 1 เดือนหลังจากติดตั้งใช้งาน BILIBILI พบว่าระยะเวลาเซสชันเพิ่มขึ้น 30% และดีขึ้น 19% ในอัตราการคลิกผ่านของวิดีโอสตรีมมิงแบบสด
30 ปี %
ระยะเวลาเซสชันเพิ่มขึ้น
19 ปี %
CTR สูงขึ้น
โซลูชัน AI บนเว็บในอุปกรณ์ฟรีของ MediaPipe ทำให้นักพัฒนาซอฟต์แวร์ของ BILIBILI รักษาองค์ประกอบภาพที่สำคัญไว้ได้อย่างมีประสิทธิภาพ ในขณะเดียวกันก็ดึงดูดความสนใจของผู้ชมไว้ รับประกันประสิทธิภาพที่ราบรื่น และสุดท้ายคือการแสดงวิดีโอพรีเมียม ประสบการณ์การสตรีมที่ผู้ชมคาดหวังจากผู้นำแพลตฟอร์ม
