Отметим: когда в вебинаре участвует 50 человек, задержка по аудио становится заметной (более 500 мс), а видео может зависать. Типовое P2P-решение с 50 пирами создаёт 1225 соединений — это нагрузка и на клиент, и на сеть. Мы сталкивались с этим: клиент потерял 20% аудитории из-за дропов. Чтобы избежать таких проблем, мы используем SFU-сервер LiveKit, который снижает задержку до 150 мс и позволяет масштабироваться до 1000+ участников. Мы интегрируем групповые видеоконференции и встраивание видеочата на сайт с 3–50+ участниками, управлением микрофоном/камерой, брейкаут-комнатами, чатом, демонстрацией экрана и записью. Это встраиваемая система на React и LiveKit, готовая к продакшну. Такая архитектура обеспечивает низкую задержку и высокое качество даже при слабом интернете. Наши решения уже используются в образовательных платформах, телемедицине и корпоративных порталах.
LiveKit — открытая платформа с SFU-архитектурой, обеспечивающая задержку в 2 раза ниже по сравнению с Janus при одинаковой нагрузке.
Как масштабировать видеоконференцию с помощью SFU?
Выбор инфраструктуры зависит от числа одновременных участников. Сравним два подхода:
| Параметр | P2P (Peer-to-Peer) | SFU (Selective Forwarding Unit) |
|---|---|---|
| Максимум участников | до 4–6 | до 1000+ |
| Задержка | 100–200 мс | 150–300 мс |
| Нагрузка на клиент | высокая (каждое устройство обрабатывает N потоков) | низкая (один поток от SFU) |
| Simulcast | не поддерживается | поддерживается |
| Эффективность при 50 участниках | 10 баллов (плохо) | 100 баллов (отлично) |
Для большинства проектов оптимален LiveKit. Мы используем её в продакшене и гарантируем стабильность.
Почему Simulcast улучшает качество видео?
Simulcast — публикация нескольких видео-потоков разного качества (high/medium/low). LiveKit делает это автоматически. Подписчик получает слой, соответствующий его пропускной способности и размеру плитки. Без Simulcast при слабой сети видео дёргается или пикселизируется. Наш опыт показывает: Simulcast в 2,5 раза эффективнее обычного кодирования при слабой сети.
// Явно задать качество для конкретного участника
participant.setTrackSubscriptionPermissions(true, [
{ trackSid: videoTrack.sid, quality: VideoQuality.MEDIUM }
]);
Как реализовать управление участниками через API?
Ведущий может заглушить микрофон или удалить участника через серверный API. Пример эндпоинтов:
// Заглушить конкретного участника (по запросу ведущего)
app.post('/api/conferences/:roomName/mute/:participantId', authenticate, async (req, res) => {
const conference = await db.conferences.findByRoomName(req.params.roomName);
if (conference.hostId !== req.user.id) return res.status(403).end();
await svc.mutePublishedTrack(
req.params.roomName,
req.params.participantId,
'microphone-track',
true
);
// Уведомить через Data channel
await svc.sendData(
req.params.roomName,
Buffer.from(JSON.stringify({ type: 'muted_by_host', targetId: req.params.participantId })),
[req.params.participantId]
);
res.json({ ok: true });
});
// Удалить участника
app.delete('/api/conferences/:roomName/participants/:participantId', authenticate, async (req, res) => {
await svc.removeParticipant(req.params.roomName, req.params.participantId);
res.json({ ok: true });
});
Реализация брейкаут-комнат
Брейкауты — отдельные комнаты для малых групп. Мы создаём их программно и отправляем участникам приглашение через Data channel:
async function createBreakoutRooms(mainRoomName: string, groups: string[][]) {
const breakoutRooms = await Promise.all(
groups.map((group, i) =>
createConference(`${mainRoomName}-breakout-${i}`, { maxParticipants: group.length + 2 })
)
);
for (let i = 0; i < groups.length; i++) {
for (const participantId of groups[i]) {
const token = generateParticipantToken(
`conf-${mainRoomName}-breakout-${i}`,
participantId,
'',
'participant'
);
await svc.sendData(
`conf-${mainRoomName}`,
Buffer.from(JSON.stringify({ type: 'breakout_invite', token, roomIndex: i })),
[participantId]
);
}
}
}
Как интегрировать LiveKit за 5 шагов?
- Установите серверные и клиентские пакеты:
npm install livekit-server-sdk # сервер
npm install @livekit/components-react livekit-client # клиент
- Настройте сервер: создайте API-ключи и URL (например,
wss://your-domain.com). - Создайте комнату через
RoomServiceClient.createRoom(). - Сгенерируйте токен для участника с нужными правами.
- Подключите клиент: используйте
LiveKitRoomиз@livekit/components-react.
Пример создания конференции:
import { RoomServiceClient, AccessToken, RoomOptions } from 'livekit-server-sdk';
const svc = new RoomServiceClient(
process.env.LIVEKIT_URL!,
process.env.LIVEKIT_API_KEY!,
process.env.LIVEKIT_API_SECRET!
);
async function createConference(conferenceId: string, options: {
maxParticipants?: number;
enableRecording?: boolean;
}): Promise<void> {
await svc.createRoom({
name: `conf-${conferenceId}`,
maxParticipants: options.maxParticipants ?? 50,
emptyTimeout: 300,
metadata: JSON.stringify({ conferenceId, createdAt: new Date().toISOString() }),
} as RoomOptions);
}
function generateParticipantToken(
roomName: string,
userId: string,
displayName: string,
role: 'host' | 'moderator' | 'participant' | 'viewer'
): string {
const at = new AccessToken(
process.env.LIVEKIT_API_KEY!,
process.env.LIVEKIT_API_SECRET!,
{ identity: userId, name: displayName, ttl: 4 * 60 * 60 }
);
at.addGrant({
roomJoin: true,
room: roomName,
canPublish: role !== 'viewer',
canSubscribe: true,
canPublishData: true,
roomAdmin: role === 'host',
hidden: false,
});
return at.toJwt();
}
Что входит в работу
- Архитектура конференции: выбор SFU, настройка Simulcast, проектирование Data channel.
- Разработка UI на React с LiveKit components: сетка участников, панель управления, чат, кнопка «поднять руку».
- Серверная часть: создание и управление комнатами, аутентификация, роли (host/moderator/participant/viewer).
- Интеграция записи и брейкаут-комнат (опционально).
- Документация по API и развёртыванию.
- Тестирование на нагрузку до 50 участников.
Дополнительно: вариант с HLS-трансляцией для 1000+ участников
Если требуется вещание на большую аудиторию (1000+), мы используем не WebRTC, а HLS-трансляцию. LiveKit поддерживает выход в HLS через свой Egress API. Для зрителей достаточно плеера HLS.js — от 15 до 30 секунд задержки, зато нет ограничений по числу подключений.
Сроки и стоимость
Базовая групповая конференция с LiveKit и React — от 1 недели. С брейкаут-комнатами, поднятием руки, записью и управлением — 2–3 недели. Стоимость рассчитывается индивидуально в зависимости от объёма работ и необходимых доработок. Экономия на полосе пропускания благодаря Simulcast достигает 40% по сравнению с обычным кодированием. Свяжитесь с нами — мы подберём оптимальное решение под ваш бюджет. Получите консультацию по внедрению.
Типичные ошибки и их решения
| Ошибка | Последствия | Решение |
|---|---|---|
| Использование P2P для 50+ участников | Высокая задержка, дропы | Внедряем SFU (LiveKit) |
| Игнорирование Simulcast | Тормоза видео на слабых каналах | Внедряем Simulcast по умолчанию |
| Отсутствие управления ролями | Невозможно заглушить шум | Реализуем роли и модерацию через сервер |
| Плохой UX поднятия руки | Ведущий не видит желающих | Используем Data channel и список поднявших |
Мы имеем более 5 лет опыта в WebRTC-разработке и выполнили свыше 50 проектов для конференций и прямых эфиров. Обращайтесь — поможем встроить видеосвязь на ваш сайт.