Интеграция LiveKit для видеоконференций на сайте с WebRTC

Интеграция LiveKit для видеоконференций на сайте

LiveKit — open-source WebRTC-сервер с архитектурой SFU, обеспечивающий низкую задержку и масштабирование до тысяч участников. Вы получаете полный контроль над данными и интерфейсом, без ограничений по числу участников и скрытых комиссий. Однако на реальных проектах мы сталкиваемся с типичными проблемами: неправильная настройка ICE-серверов, проблемы с NAT и выбор неоптимальной SFU-архитектуры, что приводит к росту задержек до 5–10 секунд. Наш опыт более 50 интеграций WebRTC показывает, что грамотная настройка LiveKit решает эти проблемы на уровне ядра.

Как снизить задержки видеозвонков с помощью LiveKit?

Архитектура SFU (Selective Forwarding Unit) обеспечивает задержку ниже 200 мс даже на слабых каналах. В отличие от Jitsi, LiveKit использует оптимизированные кодеки (VP9, H.264) и адаптивный битрейт. При 50 участниках разница в задержке достигает 3–5 раз в пользу LiveKit. Кроме того, вы не платите лицензионных отчислений: стоимость сервера для 1000 пользователей минимальна.

Как интегрировать LiveKit: кейс образовательной платформы

Недавно мы внедрили LiveKit для клиента — образовательной платформы с 5000 пользователей. Исходная архитектура использовала Jitsi, но после миграции на LiveKit задержка снизилась с 800 мс до 150 мс, а стоимость серверов упала на 40%. Использовали LiveKit Server 1.5 на Docker, бэкенд на Node.js (LiveKit SDK), фронтенд на React 18 с @livekit/components-react.

Установка LiveKit Server

# docker-compose.yml services: livekit: image: livekit/livekit-server:latest command: --dev ports: - "7880:7880" - "7881:7881" - "7882:7882/udp" environment: LIVEKIT_KEYS: "APIkey: APIsecret" 

Для продакшена используйте конфиг с внешним IP и TURN-серверами:

# livekit.yaml port: 7880 rtc: tcp_port: 7881 udp_port: 7882 use_external_ip: true keys: APIkey: APIsecret 

Как интегрировать LiveKit в React-приложение?

Бэкенд: генерация токенов

import { AccessToken, RoomServiceClient } from 'livekit-server-sdk';

const roomService = new RoomServiceClient(
  process.env.LIVEKIT_URL,
  process.env.LIVEKIT_API_KEY,
  process.env.LIVEKIT_API_SECRET
);

await roomService.createRoom({
  name: `room-${meetingId}`,
  maxParticipants: 50,
  emptyTimeout: 10 * 60
});

function generateToken(roomName: string, participant: Participant): string {
  const at = new AccessToken(
    process.env.LIVEKIT_API_KEY,
    process.env.LIVEKIT_API_SECRET,
    {
      identity: participant.id,
      name: participant.name,
      ttl: '2h'
    }
  );
  at.addGrant({
    roomJoin: true,
    room: roomName,
    canPublish: true,
    canSubscribe: true,
    canPublishData: true
  });
  return at.toJwt();
}

app.post('/api/meetings/:id/join', authenticate, async (req, res) => {
  const meeting = await meetingRepo.findById(req.params.id);
  if (!meeting) return res.status(404).json({ error: 'Meeting not found' });
  const token = generateToken(`room-${meeting.id}`, {
    id: req.user.id,
    name: req.user.displayName
  });
  res.json({ token, serverUrl: process.env.LIVEKIT_URL });
});

Клиент (React)

import { LiveKitRoom, VideoConference, RoomAudioRenderer } from '@livekit/components-react';

function VideoRoom({ roomId }) {
  const [token, setToken] = useState(null);
  const [serverUrl, setServerUrl] = useState('');

  useEffect(() => {
    fetch(`/api/meetings/${roomId}/join`, { method: 'POST' })
      .then(r => r.json())
      .then(({ token, serverUrl }) => {
        setToken(token);
        setServerUrl(serverUrl);
      });
  }, [roomId]);

  if (!token) return <div>Подключение...</div>;

  return (
    <LiveKitRoom token={token} serverUrl={serverUrl} connect video audio>
      <VideoConference />
      <RoomAudioRenderer />
    </LiveKitRoom>
  );
}

Это минимальный набор. Для кастомного интерфейса используйте useTracks и GridLayout.

Запись встреч

import { EgressClient, EncodedFileType } from 'livekit-server-sdk';

const egressClient = new EgressClient(
  process.env.LIVEKIT_URL,
  process.env.LIVEKIT_API_KEY,
  process.env.LIVEKIT_API_SECRET
);

const egress = await egressClient.startRoomCompositeEgress(
  `room-${meetingId}`,
  {
    file: {
      fileType: EncodedFileType.MP4,
      s3: {
        accessKey: process.env.AWS_ACCESS_KEY,
        secret: process.env.AWS_SECRET,
        bucket: 'recordings',
        key: `meetings/${meetingId}/${Date.now()}.mp4`
      }
    }
  }
);

Сравнение LiveKit с альтернативами

LiveKit в 3 раза быстрее Jitsi по задержке и не имеет скрытых затрат.

Как добиться стабильной работы при 1000 участников?

Для 1000+ участников используйте кластеризацию SFU. LiveKit поддерживает горизонтальное масштабирование через Redis и NATS. Настройте TURN-серверы (например, Coturn) для обхода NAT. Важно: выбирайте серверы в нескольких регионах для низкой задержки. Также включите адаптивный битрейт и используйте опцию AdaptiveStream в клиенте.

Возможности LiveKit: сравнение версий

Процесс работы

Что входит в интеграцию

• Настройка LiveKit Server на вашем или нашем сервере (Docker).
• Разработка бэкенд-модуля для генерации токенов и управления комнатами.
• Интеграция React-компонентов @livekit/components-react с кастомным UI (по желанию).
• Настройка записи через Egress API (S3, MinIO).
• Документация по использованию и поддержка 2 недели после сдачи.
• Гарантия на стабильную работу видеозвонков 30 дней.

Сроки

• Базовая интеграция (сервер + токены + React UI) — от 5 до 10 рабочих дней.
• Расширенная (кастомный UI, запись, админка) — от 15 до 25 рабочих дней.

LiveKit также поддерживает end-to-end шифрование и аутентификацию через JWT. В нашей интеграции мы настраиваем безопасность по умолчанию.

Как заказать интеграцию?

Свяжитесь с нами для оценки вашего проекта. Мы проанализируем требования и предложим оптимальное решение. Получите консультацию — напишите в телеграм или на почту. Внедрение LiveKit окупается за счёт снижения затрат на инфраструктуру уже в первый месяц. Закажите интеграцию LiveKit в свой проект уже сегодня.