The Hole

Платформа видеостриминга для Medium Quality — крупнейшего паблишера российского YouTube
Содержание

Клиент

Medium Quality

Крупнейший паблишер российского Youtube. Выпускает Внутри ЛапенкоЧто было дальшеBig Russian Boss Show и другие шоу.

Задача

Создать собственную платформу для видеостриминга

2020 год, контент потребляют и создают на мобильных устройствах, а Youtube до сих пор не умеет работать с вертикальными видео.

Medium Quality хочет создать стриминговую платформу, которая будет транслировать контент, удобный для просмотра на мобильном. Например, mobile first шоу, которые изначально снимаются под вертикальный формат. Обычные горизонтальные видео должны автоматически правильно кадрироваться, когда телефон повёрнут в вертикальную ориентацию.

Кроме того, MQ нужно выйти за рамки возможностей Youtube, чтобы делать максимально разнообразный контент: не только привычные видеоролики, но и интерактивные викторины и сериалы, в которых зритель сам выбирает, как будут развиваться события.

Запуск приложения приурочили к выходу 3 сезона «Внутри Лапенко». Целевая нагрузка, которую нужно было выдержать при запуске, — 20% аудитории шоу на Youtube.

Решение

Подготовились

Провели CJM-воркшоп и вместе с командой MQ построили карту путей пользователя: для каждой точки касания описали действия и психоэмоциональное состояние клиента, aha-моменты, барьеры и способы их снижения с помощью будущего продукта.

В процессе нашли одну из моделей монетизации — платные предрелизы шоу за неделю до премьеры на Youtube.

Разработали UX/UI

На начальном этапе у проекта не было названия и брендинга, поэтому сначала мы сделали обезличенный концепт дизайна.

Название The Hole и брендинг появились позже. Название мы обыграли в UI-дизайне с помощью графики и анимаций.

Брендинг The Hole в интерфейсе приложения

Работу над пользовательским опытом начали с изучения UX других видеоплееров. Нашли инсайт, что перемотка вперед должна быть интервалами по 30 секунд, а назад — по 10: потому что вперёд мотают, если скучно, а назад — чтобы повторить или переслушать момент.

Удобный плеер с рекомендациями

Выбрали Flutter

У MQ высокие требования к пользовательскому опыту: в приложении очень важны плавность работы UI, анимации перехода между экранами. Мы предложили разрабатывать приложение на кроссплатформенной технологии Flutter: с плавностью и анимациями у него всё хорошо, а ещё он даёт 40% экономии бюджета по сравнению с нативной разработкой.

Единственное, в чём у нас были сомнения, — как Flutter справится с видеоплеером. Поэтому за два дня мы собрали демо для iOS и Android: проверили скорость воспроизведения и перемотки HLS-видео, возможность построить кастомный UI поверх плагинных возможностей управления плеером. Всё получилось: мы убедились, что проблем не возникнет.

Написали бэкенд

Бэкенд сервиса мы разработали на Kotlin, Spring, Kubernetes. Это современный Java-стек, на котором мы разрабатываем большинство бэкенд-систем.

Веб-серверы и CDN (сети доставки и дистрибуции содержимого) размещены у российских хостинг-провайдеров.

  • Скорость ответа максимальная: чем ближе контент к потребителю, тем быстрее работа.
  • Сервису не страшны потенциальные блокировки AWS и Google Cloud.

Оптимизировали бэкенд под ожидаемую нагрузку

Мы рассчитали, что серверы The Hole должны выдерживать 25 тысяч запросов в секунду — тогда они справятся с целевой нагрузкой.

Провели нагрузочное тестирование и замерили, как деградирует производительность микросервисов под нагрузкой. Это позволило ещё до запуска проекта найти и устранить несколько «бутылочных горлышек». После оптимизации бэкенд уверенно справляется с плановой нагрузкой.

Чтобы прогнозировать нагрузку в изменяющихся условиях, скорость работы бэкенда мониторим также со стороны клиента. В приложении используется Firebase Performance Monitoring — с его помощью измеряется время каждого запроса к API. Так мы определяем проблемные места в продакшене и знаем, какие точки надо оптимизировать.

Сделали веб-приложение

Разработали веб-приложение для управления контентом на React + Ant Design. Приложение позволяет публиковать видео и отправлять пользователям уведомления, добавлять мета-информацию и получать статистику о просмотрах в реальном времени.

Экран шоу в веб-приложении

Внедрили аналитику

Нам нужно было реализовать аналитику в реальном времени и иметь возможность строить кастомные отчёты и визуализировать их в веб-приложении. Стандартные системы аналитики мы использовать не могли: данные в них появляются с временной задержкой.

Чтобы получать аналитику по видео в реальном времени, потребовалось развернуть собственное хранилище пользовательских событий. Мы использовали облачную OLAP базу данных от Яндекса — ClickHouse. Эта БД работает под капотом у AppMetrica.

Приложение отправляет пользовательские события о взаимодействии с видео в ClickHouse, а все остальные интересующие нас пользовательские события — в AppMetrica и Firebase Analytics. Это наш стандартный выбор для аналитики, такой связкой мы пользуемся и на других проектах.

Управление сериями на главном экране

Провели бета-тестирование

Прежде чем запустить сервис, мы проверили приложение на тестовой группе. MQ опубликовал в Instagram призыв участвовать в бета-тестировании — так мы получили 5000 бета-пользователей.

Результат

  • Стали для клиента надежным технологическим партнером
    MQ — творческие телевизионщики, продюсеры. Крутые креативные ребята, которые создали Comedy Club и успешные проекты на ТНТ и YouTube. Но они никогда до этого не делали IT-проекты, поэтому с техническими вопросами и дизайном помогли мы. Получился продукт на стыке двух миров. Гордимся им вместе с MQ.
  • Сделали проект в сжатые сроки
    Изначально сказали клиенту, что дизайн и проектирование займут месяц, реализация — три месяца. Так и получилось: мы соблюли сроки. Теперь на практике знаем, сколько времени занимает сделать свой YouTube.
  • Выдержали нагрузку после запуска
    К нам пришло 5 000 бета-тестеров
  • Есть длинный план развития сервиса на будущее
    В первую неделю после бета-релиза пользователи прислали десятки крутых идей по развитию проекта. Мы наладили механизм системного сбора обратной связи и вместе с клиентом определили приоритеты по внедрению новых функций.
  • Справились с челленджем: создали свой YouTube
    Это была интересная и сложная задача для команды инженеров. Архитекторам и разработчикам очень понравилось работать над ней, и теперь они хотят ещё 😉
Давайте создадим мобильное приложение под ваши задачи вместе
Обсудить проект
Обсудить проект