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