BILIBILI, одна из ведущих платформ развлекательного контента в Большом Китае и Юго-Восточной Азии, размещает огромную базу данных пользовательского контента, прямых трансляций и игровых впечатлений, которая привлекает более 330 миллионов активных пользователей в месяц (MAU).
Одной из отличительных особенностей платформы BILIBILI является интеграция комментариев на экране-буллете, популярной функции в Японии и Китае, которая отображает обратную связь зрителей в реальном времени в виде прокручивающегося текста в видеопотоках. Комментарии на экране-буллете добавляют захватывающий и захватывающий элемент к живому видеоконтенту, поддерживая активное вовлечение зрителей, позволяя им выражать собственные мысли и реагировать на реакции других зрителей в реальном времени.
Вызов
Хотя комментарии на экране с пулями являются привлекательным способом взаимодействия зрителей с контентом, важно, чтобы портрет говорящего не был перекрыт для лучшего пользовательского опыта. В следующем видео комментарии на экране с пулями могут быть деструктивными и отбивать у зрителей желание продолжать просмотр.
Чтобы включить комментарии на экране маркеров, которые плавно перетекают за портретом докладчика, вам нужна точная сегментация машинного обучения, которую может быть сложно эффективно запустить на устройстве. Вот почему исторически такие мощные функции должны были поддерживаться на стороне сервера.
Учитывая, сколько контента BILIBILI обслуживает ежедневно, обработка больших его частей на стороне сервера будет очень дорогой. Поэтому их команде разработчиков нужно было найти решение на стороне клиента, чтобы снизить стоимость. Еще одна проблема заключается в том, что переход на машинное обучение на стороне клиента затрудняет предотвращение увеличения использования ЦП до точки, когда производительность снижается.
Решение: сегментация изображений на устройстве
Для решения этих проблем разработчики BILIBILI использовали Body Segmentation с MediaPipe и TensorFlow.js , предшественника Image Segmenter от MediaPipe . Это обеспечило эффективный API сегментации на устройстве, а также предварительно обученные модели для селфи и многообъектной сегментации.
Теперь BILIBILI может быстро внедрять и поддерживать эту функцию, одновременно сокращая затраты и сохраняя производительность.
Выполнение
Вот как BILIBILI реализовала это решение:
- Контуры персонажей в реальном времени : BILIBILI использовала модель Selfie Segmenter для извлечения контуров персонажей на протяжении всего видео. Это позволило им создать маску, которая очерчивала границы персонажей.
- Интеграция со слоем живых комментариев : Затем они объединили извлеченный контур персонажа со слоем живых комментариев с помощью свойств CSS
mask-image. Установив центральную область персонажа прозрачной, комментарии на экране маркеров могут плавно появляться за персонажами, не заслоняя их.
Схема, показывающая, как разработчики BILIBILI извлекли контур персонажа из видеоэлемента и интегрировали его со слоем живых комментариев, используя вычисления в реальном времени с помощью MediaPipe. - Оптимизация реализации : BILIBILI необходимо было протестировать и убедиться, что реализация не снижает производительность.
Оптимизация производительности
Разработчики BILIBILI использовали OffscreenCanvas и Web Workers для перемещения трудоемких задач в worker-ы, чтобы не занимать основной поток. Затем они уменьшили размер маски, так как она нужна только для извлечения контура персонажа и не зависит от размера или качества изображения.
После уменьшения размера маски команда разработчиков BILIBILI растянула маску во время композиции и объединила ее со слоем DOM, чтобы максимально снизить нагрузку на рендеринг.
Увеличение продолжительности сеанса и количества кликов
Объединив охват и мощь Интернета с гибкостью решений MediaPipe AI, BILIBILI успешно предоставила мощный и увлекательный опыт веб-приложения миллионам пользователей. И всего за один месяц внедрения BILIBILI увидела заметное 30%-ное увеличение продолжительности сеанса и 19%-ное улучшение показателя кликабельности потокового видео в реальном времени.
30 %
Увеличенная продолжительность сеанса
19 %
Более высокий CTR
Благодаря бесплатным веб-решениям MediaPipe на основе искусственного интеллекта на устройствах разработчики BILIBILI могут эффективно сохранять важные визуальные элементы, одновременно удерживая внимание зрителей, обеспечивая бесперебойную работу и, в конечном итоге, предоставляя первоклассный опыт потоковой передачи видео, которого зрители ожидают от лидера платформы.
