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