Разработка групповых видеоконференций на сайте: WebRTC, LiveKit, React

Отметим: когда в вебинаре участвует 50 человек, задержка по аудио становится заметной (более 500 мс), а видео может зависать. Типовое P2P-решение с 50 пирами создаёт 1225 соединений — это нагрузка и на клиент, и на сеть. Мы сталкивались с этим: клиент потерял 20% аудитории из-за дропов. Чтобы избежать таких проблем, мы используем SFU-сервер LiveKit, который снижает задержку до 150 мс и позволяет масштабироваться до 1000+ участников. Мы интегрируем групповые видеоконференции и встраивание видеочата на сайт с 3–50+ участниками, управлением микрофоном/камерой, брейкаут-комнатами, чатом, демонстрацией экрана и записью. Это встраиваемая система на React и LiveKit, готовая к продакшну. Такая архитектура обеспечивает низкую задержку и высокое качество даже при слабом интернете. Наши решения уже используются в образовательных платформах, телемедицине и корпоративных порталах.

LiveKit — открытая платформа с SFU-архитектурой, обеспечивающая задержку в 2 раза ниже по сравнению с Janus при одинаковой нагрузке.

Как масштабировать видеоконференцию с помощью SFU?

Выбор инфраструктуры зависит от числа одновременных участников. Сравним два подхода:

Для большинства проектов оптимален 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 шагов?

1. Установите серверные и клиентские пакеты:

npm install livekit-server-sdk # сервер npm install @livekit/components-react livekit-client # клиент 

2. Настройте сервер: создайте API-ключи и URL (например, wss://your-domain.com).
3. Создайте комнату через RoomServiceClient.createRoom().
4. Сгенерируйте токен для участника с нужными правами.
5. Подключите клиент: используйте 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 участников.

Сроки и стоимость

Базовая групповая конференция с LiveKit и React — от 1 недели. С брейкаут-комнатами, поднятием руки, записью и управлением — 2–3 недели. Стоимость рассчитывается индивидуально в зависимости от объёма работ и необходимых доработок. Экономия на полосе пропускания благодаря Simulcast достигает 40% по сравнению с обычным кодированием. Свяжитесь с нами — мы подберём оптимальное решение под ваш бюджет. Получите консультацию по внедрению.

Типичные ошибки и их решения

Мы имеем более 5 лет опыта в WebRTC-разработке и выполнили свыше 50 проектов для конференций и прямых эфиров. Обращайтесь — поможем встроить видеосвязь на ваш сайт.