Интеграция 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 в свой проект уже сегодня.