Интро
Наш заказчик — MTC Digital. В 2019 году он создал стриминговую платформу WASD. Изначально она задумывалась как площадка для прямых эфиров геймеров. Но в 2023 году было решено расширить аудиторию и перезапустить проект, изменив его позиционирование.
WASD переименовали в NUUM и начали переход от узконаправленной игровой тематики к более массовому контенту. Новое приложение должно было стать альтернативой популярным сервисам для создания и просмотра видео. Но для этого ему была необходима UGS-составляющая — встроенный видеоредактор, который бы позволял снимать и монтировать ролики прямо в приложении. Как раз за его разработкой заказчик и обратился к нам.
Задача
За 4 месяца разработать нативный модуль видеоредактора для мобильного приложения
Изначально в приложении вообще не существовало возможности редактировать контент перед публикацией. Если пользователь хотел обрезать видео или наложить на него текст, это приходилось делать в стороннем редакторе. Затем сохранять смонтированный ролик на устройство и только после этого публиковать на платформе NUUM.
Нам предстояло создать встроенный в приложение видеоредактор, который бы умел:
делать запись видео на основную и фронтальную камеры;
подгонять видео из галереи под технические требования платформы;
обрезать видео, а также накладывать на него текст и анимированные стикеры.
Требовалось архитектурно продумать устройство видеоредактора и заложить прочный фундамент, на который в дальнейшем можно было бы легко «достраивать» новую функциональность.
Решение
Адаптировали процессы под специфику проекта и реализовали в срок один из самых сложных модулей в приложении
В идеальном мире команды последовательно переходят от одного этапа создания продукта к другому. В реальной жизни так бывает не всегда. У нас было всего четыре месяца на задачу. Мы приняли рискованное, но стратегически верное решение — запараллелить процессы дизайна и разработки. А чтобы предусмотреть возможные форс-мажоры, предварительно провели глубокое ревью.
Итог — точно к назначенной дате приложение с работающим видеоредактором появилось в сторах. Мы полностью закрыли задачу своими силами и реализовали один из самых сложных модулей. Пользователи получили возможность снимать и монтировать видео, не покидая NUUM. А мы после первого релиза переключились на расширение функциональности — занялись внедрением AR-масок и фильтров, а также интеграцией с музыкальным сервисом.
Управление
Выстроили работу в условиях сжатых сроков
Заказчик мог периодически добавлять задачи по изменению или расширению функциональности. Однако координация проекта была полностью на нашей стороне — мы самостоятельно расставляли приоритеты и управляли задачами. Перед нами стояла цель успеть всё к 1-му декабря, и мы шли к ней.
Так как сроки были сильно ограничены, у нас не было возможности ждать финальный дизайн, чтобы стартовать разработку. Мы запараллелили процессы. Пока дизайнеры отрисовывали макеты и согласовывали их с заказчиком, разработчики проводили глубокое ревью, подбирали оптимальное архитектурное решение и технологический стек.
Фундамент будущего видеоредактора закладывали тимлиды и сеньор-разработчики, что помогло оптимизировать процессы и задать темп проекта. Ребята восприняли происходящее как личный вызов и с головой окунулись в работу. Нам уже приходилось решать похожие задачи и создавать высоконагруженные системы, способные обрабатывать большое количество данных. Здесь мы агрегировали опыт предыдущих проектов.
Марго Вырвич
Head of Project Management
Дизайн
Анализировали и вдумчиво улучшали существующие решения
Перед нами стояла амбициозная задача — создать продукт, который бы совмещал в себе лучшие функции популярных видеоплатформ и закрывал потребности любой аудитории. При проработке дизайна мы старались изучить как можно больше референсов — помимо YouTube, Instagram*, Twitch и VK Клипов, анализировали приложения, специализирующиеся исключительно на монтаже видео. Смотрели, что и как реализовано в других сервисах, и думали, как улучшить эти практики.
Работали в связке с аналитиком, чтобы минимизировать риски
Стартовать разработку пришлось, когда макеты ещё не были готовы. Это всегда стрессовая история и для дизайнеров, и для разработчиков, потому что сложнее управлять рисками. Но благодаря тому, что мы всегда подключаем к проектам аналитика, нам удалось продумать логику с учётом блокеров, технических ограничений и потенциальных проблем. Это позволило минимизировать возможные ошибки и оптимизировать процессы.
Плотно общались с дизайнерами заказчика, чтобы сохранить преемственность
В своём модуле мы отвечали за картинку, которую видит пользователь, когда снимает и редактирует контент. Но была ещё внутренняя команда NUUM, которая занималась лентой приложения. Нам было важно синхронизироваться, чтобы видеоредактор не выглядел чужеродно внутри платформы. Мы плотно общались с дизайнерами заказчика, советовались с ними по вопросам, касающимся дизайн-системы. И хотя мы занимались только одним модулем в рамках целого приложения, ощущалась наша причастность к чему‑то глобальному.
Когда работаешь над продуктом, который должен составить конкуренцию популярным сервисам вроде TikTok или Instagram*, начинаешь смотреть на приложение глазами не только дизайнера, но и пользователя. Хочется сделать всё удобно и попасть в ожидания аудитории.
Это немного тревожно. Хочется быть не хуже того же Instagram*. Но у него огромная команда, которая работает над продуктом много лет. И ты словно соревнуешься с этой командой, хотя ты маленький дизайнер из Санкт-Петербурга.
Ася Михайловская
Дизайнер MobileUp
Разработка
Подобрали архитектурное решение и приступили к реализации
Первостепенной задачей команды разработки было заложить архитектурную базу будущего видеоредактора. Это позволило оптимизировать процессы и выделить четыре направления работы: стикеры, текст, монтажный стол и запись видео. За каждым из них был закреплён отдельный человек, который, как напильником, оттачивал свою функциональность.
Прошло почти полгода с тех пор, как мы начали работать над проектом, но у ребят по‑прежнему закреплены зоны ответственности. Задачу дают адресно конкретному разработчику, и он досконально в ней разбирается. При этом все находятся в тесном взаимодействии и знают, что и у кого происходит.
Конечно, периодически возникают смежные задачи, когда непонятно, чья это зона ответственности. В этом случае ребята собираются вместе и обсуждают. Один из плюсов проекта — здесь есть прямая коммуникация между разработчиками — и нашими, и со стороны заказчика. При необходимости ребята могут написать iOS — и Android-лидам NUUM, чтобы выяснить какие‑то технические тонкости.
Марго Вырвич
Head of Project Management
Разбирались с логикой и UI
На проекте нетривиальный UI — не классические экраны, которые все привыкли делать, а нечто необычное. Было тяжело найти информацию и готовые примеры реализации. Большую часть решений мы придумывали самостоятельно.
Одна из самых интересных задач была связана с синхронизацией. У нас было несколько дорожек: фреймы видео, наложения и аудио. Нужно было сделать так, чтобы при прокрутке каждая из них соответствовала положению видео, а чуть позже — и музыки. Мы нашли несколько вариантов решения, но в итоге остановились на следующей реализации: синхронизировали дорожки и сделали сплошную прокрутку под весь таймлайн.
Сделали так, чтобы при наложении на видео стикеры отображались без пикселей
Перед нами стояла задача — отображать стикеры в высоком качестве, чтобы при зумировании не было видно пикселей. Это же правило должно было работать и при экспорте видео.
Мы проанализировали работу популярных сервисов. Все они использовали gif-анимации, которые обеспечивали быстрый экспорт, но при зумировании на стикерах появлялись пиксели. Такой вариант не подходил под нашу задачу.
Вместо gif-анимаций мы выбрали векторную графику, которая как раз позволяла добиться высокого качества стикеров. А для работы с ней — библиотеку Lottie.
Но на этапе технического ресёрча по экспорту видео столкнулись с проблемой. Оптимальное и простое решение, позволяющее практически из-под коробки AVFoundation моментально экспортировать ролики с наложенными стикерами, выдавало ошибку. У стикеров на экспортированном видео появлялись проблемы с цветом и градиентом. Чтобы использовать простое решение, требовалось кардинально переработать стикеры. На это мы пойти не могли и придумали свой рендеринг на основе Lottie-анимации.
Сейчас мы покадрово создаём overlay-видео, которое потом накладываем на результирующее. Это работает медленнее, но даёт гибкость и позволяет «играть» со стикерами. Если сравнивать с другими сервисами, тот же Instagram изначально пошёл на худшее качество, чтобы получить более быстрый результат при экспорте. Мы решили сосредоточиться на качестве.
Многие решения находились опытным путём. Например, для отображения стикеров в общем списке мы планировали использовать такие же Lottie-анимации, как в видеоредакторе. Но это векторная графика, и с ней практически невозможно ничего сделать с точки зрения производительности.
Мы подумали в сторону gif-анимаций и даже сделали пробную реализацию. Но выявились проблемы с их отображением — форматом, прозрачностью и др. Тогда мы перешли на WebP. Это решило проблему с отображением, но не с производительностью. И мы начали перебирать библиотеки для отображения. А после приступили к отдельным сборкам для каждой и тестированию на разных устройствах. Смотрели, есть ли какие‑то кардинальные различия в производительности.
Денис Фадеев
Android-разработчик
Продолжили наращивать функциональность после первого релиза и внедрили AR-маски
Одна из самых интересных задач была связана с добавлением возможности отображать маски и сохранять видео с ними. Мы рассматривали разные решения, но в итоге выбирали между ARKit, Banuba и ARCore.
ARKit не подошёл, так как поддерживал только фронтальную камеру. При переключении на основную камеру распознавание лица не срабатывало. Banuba казался неплохим, но в то же время очень дорогим вариантом. От него мы отказались по экономическим соображениям. В итоге остановились на ARCore. Это SDK от Google, который умеет распознавать лица и на фронтальной, и на основной камере.
В первую очередь требовалось отрисовать видеопоток с камеры и маску так, чтобы при движениях головы маска не слетала, всё работало без лагов. Это мы сделали c помощью ARCore и Scenekit. ArCore распознавал лицо и выдавал параметры для отображения маски в 3D-пространстве, а SceneKit рендерил маску и видеопоток с камеры. А затем реализовали механизм, позволяющий использовать уже отрисованные кадры для записи видео.
Тестирование
Наш модуль — часть большого целого. Учитывали это в тестировании
Мы постепенно наращиваем функциональность видеоредактора и проверяем его работу на разных устройствах. На этапе добавления новых фич тестируем модуль и отдельно, и в рамках материнского приложения. Остальные команды со стороны заказчика соединяют свои блоки с нашим, мы всё это тестируем в общей системе — смотрим, как влияем на другие модули и как они влияют на нас.
Расширяли парк тестовых устройств
Были кейсы, когда на устаревших девайсах наш модуль работал не совсем корректно. Чтобы отлавливать даже мелкие баги, возникающие на девайсах предыдущих поколений, мы пополнили наш парк тестовых устройств. Например, у нас появился смартфон Motorola, которого уже давно нет в свободной продаже. Пришлось постараться, чтобы добыть его. Но так вышло, что именно это устройство было у тестировщика со стороны заказчика, и именно на нём возникали ошибки в работе редактора. Мы подумали, что нам нужен такой девайс, чтобы мы могли оперативно отлавливать баги и проверять их воспроизведение или невоспроизведение.
Было интересно работать над этим проектом, потому что я сама часто использую разные видеоредакторы. И если вижу какие‑то классные идеи, обязательно добавляю их в файл бэклога, чтобы мы потом могли обсудить на созвоне и решить, стоит ли нам внедрить нечто похожее.
Кажется, что мы работаем лишь над небольшой частью огромного приложения. Условно, пользователь проведёт в нашем редакторе минут пять и пойдёт дальше. Но наша цель — сделать так, чтобы эти пять минут он провёл настолько круто, чтобы ему точно захотелось вернуться и смонтировать что‑то ещё. И в идеале — вообще заменить все сторонние видеоредакторы, чтобы все действия по монтажу роликов он совершал в Nuum.
Юля Бойко
Tech Lead QA
Итог
За 4 месяца реализовали один из самых сложных модулей, а сейчас наращиваем его функциональность
Сейчас мы готовим пятый релиз, и он будет самым крупным и значимым после первого. Именно в этой версии появятся долгожданные AR-маски, фильтры и возможность наложения музыки. Новые фичи уже реализованы — сейчас мы всё тестируем и доводим до идеала.
* Деятельность Meta (соцсети Facebook и Instagram) запрещена в России как экстремистская.
