Создание сайта для онлайн-школы музыки, где урок гитары или фортепиано идёт прямо в браузере: видео, чат, общая нотная доска и метроном, а рядом расписание и оплата. Сайт написал Евгений Росляков. Сайты и сервисы он пишет с 2016 года, работает самозанятым по договору, юрлицам даёт закрывающие документы. Находится в Москве, проекты берёт и удалённо.
Школа проводит уроки один на один. Раньше преподаватель и ученик встречались в стороннем видеосервисе, расписание лежало в таблице, оплата шла отдельной ссылкой. Ученик забывал, куда заходить, преподаватель искал, кто оплатил. Подводили и сами видеосервисы: звук отставал, а ноты можно было показать только экраном или фотографией.
Задача: личный кабинет, где ученик видит ближайший урок, нажимает одну кнопку и попадает в комнату урока.
Серверную часть написал на Nest.js, поверх Node.js. Nest делит приложение на модули: пользователи, расписание, оплаты, комнаты уроков. Каждый модуль можно менять отдельно. Для школы это важно, она добавляет возможности по ходу работы.
Видео и звук идут через WebRTC напрямую между браузерами преподавателя и ученика. Для двоих участников этого достаточно, задержка небольшая. Часть учеников сидит за корпоративными сетями и мобильным интернетом, где прямое соединение не устанавливается. Для них стоит TURN-сервер: он передаёт поток, когда напрямую связаться не получается. Звук настроил так, чтобы автоматическое шумоподавление не «резало» инструмент: гитара должна звучать как гитара, а не как голос в трубке. Эхо при этом остаётся проблемой, поэтому ученикам я советую наушники.
Общие элементы урока работают через Socket IO. Нотная доска: преподаватель отмечает такт, ученик сразу видит пометку. Метроном, у которого темп задаёт преподаватель и который звучит у обоих одновременно. Чат для ссылок и заметок. Socket IO сам переподключается при коротком обрыве, так что урок не прерывается на пустяке.
Старый API записи на уроки был написан на Express JS и уже работал с календарём школы. Переписывать его целиком не стал: Nest.js обращается к нему как к внешнему сервису, а запросы переносятся в новые модули по одному. Расписание не останавливалось ни на день.
После урока в кабинете остаются заметки преподавателя и задание на неделю.
Ученики заходят на урок со страницы школы, без сторонних приложений и ссылок в мессенджерах. Преподаватели видят график, оплаты и ноты в одном окне. Исчезла путаница «куда мне заходить» и «кто уже заплатил». Заметки и домашнее задание лежат в кабинете, и ученик перед следующим уроком видит, что делал в прошлый раз.
Старый API записи продолжает работать, а новые части подключаются рядом с ним без остановки школы. Когда все запросы переедут в Nest.js, Express JS можно будет выключить.
Ограничение известное для любой видеосвязи через браузер: играть вместе в одном темпе по сети нельзя, мешает задержка. Поэтому школа строит уроки как показ и повтор: преподаватель играет, ученик повторяет, метроном задаёт общий темп. Качество звука зависит от интернета ученика, хотя TURN-сервер спасает от обрывов в сложных сетях.
Дальше школа планирует запись урока для повторения дома и групповые занятия по теории.
Ведёте обучение онлайн и хотите сайт с видеоуроками, доской и кабинетом? Расскажите в сообщении на freelance.ru, как проходит ваше занятие. Подумаем, что нужно внутри.
