MediaPipe의 온디바이스 웹 AI 솔루션을 활용하여 동영상 스트림 UX를 개선하고 세션 시간을 30% 늘린 BILIBILI

Jun Jiu
Cecilia Cong
Cecilia Cong
Tyler Mullen
Tyler Mullen
LinkedIn
Jason Mayes

BILIBILI, 중화권 최고의 엔터테인먼트 콘텐츠 플랫폼 대규모 사용자 제작 콘텐츠 데이터베이스를 호스팅하여 매월 3억 3천만 명 이상의 사용자가 방문하는 활성 사용자 수 (MAU)

BILIBILI 플랫폼의 특징 중 하나는 글머리기호 댓글은 일본과 중국에서 인기 있는 기능으로 동영상 스트림에서 텍스트를 스크롤하는 방식으로 실시간 시청자 의견을 얻을 수 있습니다. 불릿 화면 댓글은 라이브 동영상 콘텐츠에 흥미롭고 생생한 느낌을 더해주어 자신의 생각을 표현하고 응답할 수 있도록 하여 적극적으로 참여 다른 시청자에게 생생하게 반응할 수 있습니다.

도전과제

글머리기호 화면 댓글은 시청자가 재미있게 상호작용할 수 있는 방법입니다. 발표할 때 발표자의 인물 사진을 방해받지 않고 최상의 사용자 경험을 제공합니다. 다음 동영상에서는 글머리기호 화면에 댓글을 시청을 방해하고 시청을 막는 것입니다.

<ph type="x-smartling-placeholder">
</ph>
원래 상태: 초기 동영상에서는 사람이 말을 하고 발언자의 얼굴 위로 스크롤하는 댓글들입니다.

발언자 화면 뒤로 매끄럽게 이어지는 글머리기호 댓글 사용 정확한 머신러닝 세분화가 필요합니다. 효율적으로 실행하기가 어렵습니다. 그래서 역사적으로 가볍게 여겨지는 힘은 서버 측에서 지원되어야 합니다.

매일 BILIBILI에서 제공하는 콘텐츠 양을 고려할 때 일부는 서버 측에서 매우 비쌉니다. 개발팀은 클라이언트 측 솔루션을 찾아야 했습니다 또 다른 과제 클라이언트 측 머신러닝으로 전환하면 CPU 사용률을 유지하기가 성능이 저하되는 수준까지 사용량을 늘릴 수 있습니다

<ph type="x-smartling-placeholder">
</ph>
목표: BILIBILI는 결국 글머리기호 화면의 댓글을 스크롤하기를 원했습니다. 화자의 얼굴을 가리지 않도록 해야 합니다.

솔루션: 온디바이스 이미지 세분화

이러한 문제를 해결하기 위해 BILIBILI의 개발자들은 MediaPipe 및 TensorFlow.js를 사용한 신체 분할, MediaPipe의 Image Segmenter의 전신입니다. 이는 효율적인 온디바이스 세그먼테이션 API를 제공했으며, 셀카 및 다중 객체 세분화를 위한 모델.

이제 BILIBILI에서 신속하게 반복하고 기능을 지원하면서 비용을 절감할 수 있습니다. 성능을 유지할 수 있습니다

구현

BILIBILI에서 이 솔루션을 구현한 방법은 다음과 같습니다.

  1. 실시간 캐릭터 개요: BILIBILI는 셀카 분할기 모델을 사용했습니다. 을 사용하여 동영상 전반에서 문자의 윤곽선을 추출합니다. 이를 통해 를 사용하여 문자의 경계를 나타내는 마스크를 만듭니다.
  2. 실시간 댓글 레이어와 통합: 그런 다음 추출된 댓글 레이어와 CSS를 사용한 실시간 댓글 레이어의 문자 윤곽선 mask-image 속성 중앙 문자 영역을 투명으로 설정하면 글머리기호 화면에 댓글을 쓰지 않아도 막을 수 있습니다. <ph type="x-smartling-placeholder">
    </ph> 직사각형 상자의 파란색 문자가 SVG 마스크를 나타내는 회색 문자가 있는 다른 상자를 가리킵니다. 파란색 선이 있는 더하기 기호는 실시간 댓글이 추가되었음을 나타냅니다. 문자 윤곽선 뒤의 파란색 선은 캐릭터 뒤의 댓글을 의미합니다.
    BILIBILI의 개발자가 MediaPipe의 실시간 컴퓨팅을 사용해 동영상 요소에서 캐릭터 윤곽선을 추출하여 실시간 댓글 레이어에 통합한 방법을 보여주는 다이어그램
  3. 구현 최적화: BILIBILI는 성능을 저하시키지 않았습니다.

성능 최적화

BILIBILI의 개발자들은 OffscreenCanvas 웹 작업자를 사용하여 시간이 많이 소요되는 작업을 작업자로 이전하여 기본 스레드를 점유하지 않도록 합니다. 그런 다음 문자를 추출하는 데에만 필요하므로 마스크의 크기를 줄였습니다 이미지 크기나 품질에 종속되지 않습니다.

BILIBILI 개발팀은 마스크 크기를 줄인 후 마스크를 늘렸습니다. 컴포지션 중에 DOM 레이어와 병합하여 렌더링을 줄임 최대한 강한 압력을 가하는 것입니다.

<ph type="x-smartling-placeholder">
</ph> 상자 안의 파란색 문자가 동일한 미니 이미지를 가리킵니다. 점선이 투명한 문자가 있는 작은 검은색 상자를 가리킵니다. 작은 검은색 상자가 동일한 큰 상자를 가리킵니다. 이러한 최소화 프로세스와 실시간 댓글(파란색 선으로 표시)은 캐릭터 뒤쪽에 흐르는 댓글의 병합된 결과와 같습니다.
BILIBILI에서 마스크 크기를 최소화하고 늘어난 마스크와 병합한 과정을 보여주는 다이어그램

세션 시간 및 클릭률 증가

웹의 도달범위와 파워를 MediaPipe의 유연성과 결합하면 AI 솔루션과 함께 강력하고 매력적인 웹 앱을 성공적으로 제공한 BILIBILI 제공할 수 있게 될 것입니다 구현 후 단 한 달 만에 세션 시간은 30%, 세션 시간은 19% 늘린 BILIBILI 실시간 스트리밍 동영상의 클릭률

    30개 %

    세션 시간 증가

    19명 %

    CTR 증가

MediaPipe의 무료 온디바이스 웹 AI 솔루션을 통해 BILIBILI의 개발자는 다음과 같은 이점을 누릴 수 있습니다. 중요한 시각적 요소를 효율적으로 유지하면서도 시청자의 참여를 이를 통해 궁극적으로는 프리미엄 동영상을 제공할 수 있습니다. 최고의 스트리밍 경험을 제공할 수 있습니다.

BILIBILI의 선임 엔지니어 준 류의 말 인용: MediaPipe의 솔루션은 인물 사진 추출 모델을 만드는 데 집중하지 않고도 개발 비용을 절감하는 데 도움이 되었습니다.