Інтеграція 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 | Jitsi | Daily.co |
|---|---|---|---|
| Ліцензія | Open-source (Apache 2.0) | Apache 2.0 | Пропрієтарна |
| Макс. учасників | 1000+ | 50–100 | 50 (безкоштовно) |
| Затримка (50 учасників) | < 200 мс | 300–600 мс | 200–400 мс |
| Self-hosted | Так | Так | Ні |
| Вартість масштабування | Open-source + сервер | Open-source + сервер | Пропрієтарна |
LiveKit у 3 рази швидший за Jitsi за затримкою і не має прихованих витрат.
Як досягти стабільної роботи при 1000 учасників?
Для 1000+ учасників використовуйте кластеризацію SFU. LiveKit підтримує горизонтальне масштабування через Redis та NATS. Налаштуйте TURN-сервери (наприклад, Coturn) для обходу NAT. Важно: вибирайте сервери в кількох регіонах для низької затримки. Також увімкніть адаптивний бітрейт та використовуйте опцію AdaptiveStream у клієнті.
Можливості LiveKit: порівняння версій
| Функція | Open Source | Cloud (Enterprise) |
|---|---|---|
| Запис (Egress) | Так | Так (вбудована) |
| Трансляції (RTMP/WHIP) | Так | Так |
| Чат та обмін файлами | Через WebSocket | Вбудовані |
| Віртуальні фони | Потрібна обробка | Вбудовано |
| Аналітика | Метрики Prometheus | Дашборд |
| Підтримка | Спільнота | 24/7 |
Процес роботи
Етапи інтеграції
- Аналітика — оцінка поточної інфраструктури, кількості користувачів, вимог до запису та UI.
- Проектування — вибір архітектури (один SFU або кластер), налаштування TURN-серверів, план бекапів.
- Реалізація — розробка бекенду (аутентифікація, управління кімнатами), інтеграція React-компонентів.
- Тестування — навантажувальні тести до 500 учасників, перевірка затримок, якості звуку.
- Деплой — розгортання на сервері, налаштування моніторингу, навантажувальне тестування.
Що входить в інтеграцію
- Налаштування 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 у свій проект вже сьогодні.