Онлайн-курсы озвучки и дубляжа
Разработали веб-приложение для школы озвучки со стабильной синхронизацией видео и аудио.
Клиент
Занимается обучением актеров озвучивания и дубляжа. Хотя это относительно небольшой стартап, у клиента своя команда преподавателей. А еще собственная профессиональная студия звукозаписи, куда приходят студенты – совсем как на обычный урок по вокалу.
Стандартная для многих бизнес-проектов история с COVID-19 и ответным переходом в онлайн коснулась и нашего клиента – вот почему он решил создать курсы дистанционного обучения Dubtrainer.
Вызовы
Клиент точно знал, что в его проекте надо использовать библиотеку 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, с которым пришел клиент, приходилось тратить время на ожидание окончания загрузки тейка. Сперва студент полностью писал тейк, затем файл отправлялся на сервер целиком. Каждая публикация занимала одну-две минуты.
Мы использовали стриминговую загрузку через WebSocket: теперь запись сразу же разбивается на маленькие кусочки и отправляется на сервер по частям во время самого озвучивания. В результате преподаватель видит готовый дубль уже через секунду после окончания записи, ему не нужно ждать.
5. Добавили групповые занятия
Клиент хотел сделать идеально синхронизированное приложение для двух человек – преподавателя и ученика. В реальных условиях актеров озвучивания в одном дубле, как правило, несколько. Поэтому мы добавили возможность провести сессию на 5 человек – применили WebRTC с SFU-серверами.
– Каждый из участников подключается к единой сессии. Его поток отправляется на сервер, а нужные потоки возвращаются обратно.
– Сервер отправляет синхросигнал для старта – видео запускается синхронно во всех браузерах.
– Преподаватель слушает студентов онлайн и может сразу комментировать, а готовые тейки автоматически попадают в кабинеты.
Технологии
Бэкенд
Node.js
Интерфейс
React
Библиотека
Video.js
База данных
MongoDB
Инфраструктура
AWS
Результат
Мы совершенствовали Dubtrainer в течение года. Работали с ограниченным бюджетом, поэтому интерфейс получился аскетичным, однако все необходимое в нем есть. Само приложение отличается скоростью работы и доступностью – нужен только компьютер и микрофон.
Клиент пришел только с одной задачей – синхронизацией видео со звуком, – а получил полноценное веб-приложение для пользователей и админ-панель для преподавателей.
- Индивидуальные занятия занимают 70% всех сессий, основной формат – «студент и преподаватель». Групповые занятия – до четырех студентов одновременно плюс преподаватель.
- Обычный тейк в среднем занимает от 15 до 30 секунд, учебный отрывок – 1-2 минуты.
- Полное занятие, рассчитанное на 60 минут, включает около 20 дублей и время на обсуждение.
Клиент не планировал монетизировать проект, расценивая его скорее как вспомогательный бизнес-инструмент и способ расширить географию студентов. Кстати, со временем он открыл новый сегмент целевой аудитории – сегодня Dubtrainer пользуется популярностью у подкастеров.
студентов уже прошли курсы Dubtrainer за первый год.
Что происходит дальше:
Мы получаем запрос, обрабатываем его в течение 24 часов и связываемся по указанным вами e‑mail или телефону для уточнения деталей.
Подключаем аналитиков и разработчиков. Совместно они составляют проектное предложение с указанием объемов работ, сроков, стоимости и размера команды.
Договариваемся с вами о следующей встрече, чтобы согласовать предложение.
Когда все детали улажены, мы подписываем договор и сразу же приступаем к работе.