Медиацентр: запись экрана, трансляции и звонки

Одно приложение покрывает три сценария прямо из браузера:

• Запись экрана в файл — локально объединяем системный звук, микрофон и камеру и отдаём готовый WEBM.
• Трансляция экрана по коду комнаты — ведущий получает ссылку, зрители смотрят через WebRTC без дополнительных плагинов.
• Комната видеозвонка — создаём ссылку, обмениваемся SDP и ICE через встроенный сигналинг, управляем микрофоном/камерой и переключаем камеры на устройствах.

Требования

• Node.js 20 или новее (сервер и сборка фронтенда тестировались на Node 20).
• npm 10.

Установка

npm install          # ставим бэкенд зависимости
npm --prefix frontend install  # ставим зависимости интерфейса

Конфигурация окружения

Фронтенд (Vite) читает переменную VITE_SIGNALING_URL, которая задаёт базовый WebSocket‑адрес для сигналинга.

• Для локальной разработки в репозитории уже есть frontend/.env.development со значением wss://localhost:8000, которое совпадает с адресом HTTPS‑сервера, поднимаемого npm start.
• Примеры конфигурации для production и разработки лежат в frontend/.env.example. Скопируйте нужный блок в .env.production, .env.local или другой файл окружения Vite и подставьте свои домены.
• Если переменная не задана, клиент автоматически использует протокол и хост текущей страницы, как и раньше.

Сценарии npm

Скрипт	Назначение
npm start	Соберёт фронтенд (если нужно) и запустит HTTPS‑сервер на https://localhost:8000.
npm run dev:client	Запустит Vite Dev Server (порт 5173) для разработки UI.
npm run lint	Линт серверного кода и фронтенда (ESLint + Prettier).
npm run build	Сборка интерфейса в каталог dist/, который раздаёт Express.

Сервер всегда стартует поверх HTTPS. Для production прокиньте SSL_KEY_PATH и SSL_CERT_PATH. В разработки используются само‑подписанные сертификаты из ./ssl.

Структура проекта

server.js             # Express + WebSocket сигналинг
frontend/             # Vite + React + Ant Design интерфейс
  ├── src/features    # Фичи: запись, трансляция, звонок
  ├── src/lib         # Переиспользуемые утилиты (WebRTC, микшеры и т.д.)
  └── dist/           # Результат сборки (создаётся командой build)

Журналирование

Сервер выводит подробные шаги в консоль (подключения, рассылка сигналов, управление комнатами), что облегчает разбор проблем в продакшене. В клиентском коде дополнительно заложены лог‑сообщения в ключевых местах (инициализация WebRTC, захват медиа, переключение устройств).

HTTPS

Для продакшена:

export SSL_KEY_PATH=/etc/letsencrypt/live/your-domain/privkey.pem
export SSL_CERT_PATH=/etc/letsencrypt/live/your-domain/fullchain.pem
npm run prod

Локально достаточно npm start — будут использованы сертификаты из ./ssl.

Тесты

Запустить автоматические проверки можно через npm-скрипты:

• npm run test:client — юнит-тесты фронтенда на Vitest (аналог npm run test внутри каталога frontend).
• npm run test:server — серверные тесты на Vitest с окружением Node.js.
• npm run test — оба набора тестов подряд, если нужно прогнать весь стек.

Поверх автоматизации по-прежнему полезно пройтись по ключевым пользовательским сценариям вручную:

1. Запись экрана: старт/стоп, наличие файла, работа микрофона и камеры.
2. Трансляция: ведущий + несколько зрителей в разных окнах/браузерах.
3. Звонок: два и более участников, переключение камер, отключение микрофона/видео.