Синхронизация голоса и видео в реальном времени
Разработали браузерное приложение для школы озвучки.
Клиент
Занимается обучением актеров озвучивания и дубляжа. Хотя это относительно небольшой стартап, у клиента своя команда преподавателей. А еще собственная профессиональная студия звукозаписи, куда приходят студенты – совсем как на обычный урок по вокалу.
Во время пандемии очные занятия в студии стали невозможны. Клиент оказался перед выбором: поставить развитие на паузу или перевести обучение в онлайн. Он выбрал второе – так появилась идея создать Dubtrainer.
Вызовы
У клиента уже был MVP, построенный на базе библиотеки Video.js. Менять технологическую основу проекта он не планировал – предполагалось, что решение нужно доработать и довести до релиза.
Поэтому он целенаправленно искал команду с опытом работы именно с Video.js. Однако большинство разработчиков используют библиотеку как готовый видеоплеер, тогда как проект требовал построения полноценного веб-инструмента с записью голоса поверх видео и точной синхронизацией. Поиск занял продолжительное время – подходящую команду удалось найти только в 2021 году.
На установочной встрече клиент поделился основными этапами и видением будущего проекта. Предоставил MVP, но жизнеспособным продукт все-таки было сложно назвать. Видео зависало, старт записи голоса начинался с задержкой в 30 секунд – для работы со звуком это точно никуда не годилось.
Мы посмотрели первоначальный прототип, дали оценку и календарный план работ. Выяснили, что задержка происходила из-за клиент-серверной архитектуры: запись шла только через сервер, каждый файл отправлялся целиком после тейка.
У нас было сильное портфолио фронтенд-проектов, а главное – опыт работы с Video.js не как с готовым плеером, а как с инструментом глубокой кастомизации и построения сложной медиа-логики.
Большие аппетиты
Такое ощутимое зависание MVP сразу подсказало нам, что у приложения проблемы с потреблением ресурсов. Если даже на мощных компьютерах разработчиков задержка была в полминуты, то что говорить о ПК рядовых пользователей…
Стабильная синхронизация
Точное совмещение видео с записью голоса – must-have для инструментов озвучки. Мы были уверены, что сможем реализовать такой функционал, однако это потребует глубокой доработки библиотеки. Кроме того, синхронизация картинки и звука должна быть безупречной на разных браузерах.
Процесс разработки
Как работает Dubtrainer
Для студентов процесс выглядит просто: нажал «Запись», произнес текст – и через пару секунд готовый тейк уже в кабинете. Преподаватели отмечают удобство проверки: записи сохраняются автоматически, а платформа поддерживает хранение нескольких тейков и сравнение результатов.
Преподаватель
Готовит материалы: загружает видеоролик с оригинальной дорожкой и сценарий с разбивкой по таймингам.
Студент
Подключается к онлайн-уроку. Озвучивает реплику прямо в браузере: мы использовали встроенные Web-API. Голос пишется поверх видео.
Загрузка в облако
Каждый тейк автоматически загружается в облако. Файлы на сервере приводятся в единый формат.
Оценка результатов
Преподаватель видит все тейки в личном кабинете. Может прослушивать их одновременно со студентом, чтобы сразу проговорить ошибки и недочеты.
Как работали:
1. Переработали MVP
Подключили выделенную команду: фронтенд-разработчик, бэкенд-разработчик и PM. В конце добавили DevOps-инженера – закрыть вопросы безопасности учетных записей и оплаты.
Сделали MVP веб-приложения для Chrome, которое запускалось мгновенно и работало стабильно. Продемонстрировали клиенту – он сам попробовал записать звук поверх тестового видео и остался доволен результатом.
2. Взялись за разработку MMR
То есть занялись подготовкой к минимальному рыночному релизу.
– Взяли выборку из наиболее популярных браузеров, чтобы не раздувать бюджет:
• Google Chrome, он занимает лидирующую позицию на мировом рынке;
• Firefox как самый распространенный в 2021 году десктопный браузер в Германии;
• Safari, чтобы охватить пользователей устройств Apple.
– Наращивали функционал: сперва появился раздел для добавления уроков и редактирования материалов, затем – админка для управления пользователями.
3. Поработали над оптимизацией
Несмотря на кажущуюся простоту, Dubtrainer – веб-приложение с высокой нагрузкой.
Чтобы все работало правильно даже на слабых устройствах, оптимизировали потребление ресурсов:
– доработали плагин записи и оптимизировали клиентскую обработку аудио;
– настроили фоновые задачи на сервере для финальной обработки;
– подключили и настроили CDN для ускорения загрузки контента.
4. Стриминговая загрузка
В MVP, с которым пришел клиент, запись обрабатывалась только после завершения тейка: файл целиком отправлялся на сервер, из-за чего каждая публикация занимала до одной-двух минут.
Мы переработали логику загрузки: запись больше не ждёт окончания тейка, а начинает передаваться на сервер по частям уже в процессе.
Это позволило сократить задержку между окончанием записи и появлением результата до нескольких секунд и убрать узкое место в пользовательском сценарии.
5. Добавили групповые занятия
Клиент хотел сделать идеально синхронизированное приложение для двух человек – преподавателя и ученика. В реальных условиях актеров озвучивания в одном дубле, как правило, несколько. Поэтому мы добавили возможность провести сессию на 5 человек.
– Каждый из участников подключается к единой сессии. Его поток отправляется на сервер, а нужные потоки возвращаются обратно.
– Сервер отправляет синхросигнал для старта – видео запускается синхронно во всех браузерах.
– Преподаватель слушает студентов онлайн и может сразу комментировать, а готовые тейки автоматически попадают в кабинеты.
Технологии
Бэкенд
Node.js
Интерфейс
React
Видео
Video.js
Аудио
Browser APIs
База данных
MongoDB
Инфраструктура
AWS
Результат
Мы совершенствовали Dubtrainer в течение года. Работали с ограниченным бюджетом, поэтому интерфейс получился аскетичным, однако все необходимое в нем есть. Само приложение отличается скоростью работы и доступностью – нужен только компьютер и микрофон.
Клиент пришел только с одной задачей – синхронизацией видео со звуком, – а получил полноценное веб-приложение для пользователей и админ-панель для преподавателей.
- Индивидуальные занятия занимают 70% всех сессий, основной формат – «студент и преподаватель». Групповые занятия – до четырех студентов одновременно плюс преподаватель.
- Обычный тейк в среднем занимает от 15 до 30 секунд, учебный отрывок – 1-2 минуты.
- Полное занятие, рассчитанное на 60 минут, включает около 20 дублей и время на обсуждение.
Клиент не планировал монетизировать проект, расценивая его скорее как вспомогательный бизнес-инструмент и способ расширить географию студентов. Кстати, со временем он открыл новый сегмент целевой аудитории – сегодня Dubtrainer пользуется популярностью у подкастеров.
студентов уже прошли курсы Dubtrainer за первый год.
Что происходит дальше:
Мы получаем запрос, обрабатываем его в течение 24 часов и связываемся по указанным вами e‑mail или телефону для уточнения деталей.
Подключаем аналитиков и разработчиков. Совместно они составляют проектное предложение с указанием объемов работ, сроков, стоимости и размера команды.
Договариваемся с вами о следующей встрече, чтобы согласовать предложение.
Когда все детали улажены, мы подписываем договор и сразу же приступаем к работе.