Як створити кастомізований відеочат з LiveKit

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт! Мене звати Олег, я розробник у продуктовій компанії Bidscube. У вільний час працюю над власним проєктом, і одним із ключових завдань було реалізувати відеозв’язок між користувачами — щось на кшталт Slack або Teams, але максимально кастомізоване під наші потреби.

На перший погляд завдання здавалось складним: WebRTC, сигналінг, STUN/TURN сервери і так далі. Але завдяки LiveKit весь процес зайняв лише тиждень замість місяців розробки. У цій статті поділюся досвідом та покажу, як побудувати власний відеочат використовуючи JavaScript(Angular) та Node.js.

Чому власний відеочат, а не готове рішення?

Перед початком розробки я розглядав різні варіанти:

• Jitsi Meet — безкоштовно, але складно інтегрувати у власний UI
• Agora — хороший API, але ціна кусається при масштабуванні
• LiveKit — opensource, гнучкий, з можливістю self-hosting
• OpenVidu — opensource, побудований на базі LiveKit і повністю сумісний з ним

Власне рішення дає:

• Повний контроль над UI/UX — інтерфейс точно під ваш продукт
• Інтеграція з бізнес-логікою — записи дзвінків, аналітика, CRM
• Контроль над даними — особливо важливо для B2B
• Економія на довгій дистанції — немає per-minute оплати

Кому це може бути корисно

З мого досвіду, власний відеочат особливо актуальний для:

• EdTech проєктів — онлайн-школи, репетиторські платформи. Потрібна інтеграція з розкладом, домашніми завданнями, білою дошкою.
• Медичних додатків — телемедицина вимагає особливої безпеки та інтеграції з медичними картками.
• HR/CRM систем — внутрішні комунікації з записом дзвінків, інтеграцією з контактами.
• Дейтингових платформ — відеознайомства з модерацією та спеціальною логікою.
• B2B продуктів — консультації, демо, технічна підтримка з screen sharing.

Архітектура рішення

• JavaScript (Angular) — UI, робота з LiveKit SDK
• Node.js (Express) — бекенд для генерації токенів
• LiveKit — сервер WebRTC-зв’язку (локально або в cloud)

Що таке LiveKit

LiveKit — це платформа з відкритим кодом для розробників, які створюють медіа-додатки в реальному часі. Вона спрощує інтеграцію аудіо, відео, тексту, даних та моделей штучного інтелекту, пропонуючи масштабовану інфраструктуру реального часу, побудовану на базі WebRTC.

LiveKit сервер ви можете розгорнути у себе локально (self-hosted) або скористатись LiveKit Cloud — тоді сервер не потрібен зовсім. LiveKit Cloud має безкоштовний план, який включає інформатиний дешборд, 50Гб трафіку і 5000 хвилин, що є достатньо для початку.

Коротко про технологію WebRTC

За допомогою WebRTC ви можете додати можливості зв’язку в режимі реального часу до вашої програми, яка працює на основі відкритого стандарту. Він підтримує відео, голос та загальні дані для передачі між вузлами, що дозволяє розробникам створювати потужні рішення для голосового та відеозв’язку. Технологія доступна у всіх сучасних браузерах, а також на нативних клієнтах для всіх основних платформ. Технології, що лежать в основі WebRTC, реалізовані як відкритий веб-стандарт і доступні як звичайні API JavaScript у всіх основних браузерах. — докладніше

Встановлення LiveKit

Приклад встановлення локально для Ubuntu:

curl -sSL https://get.livekit.io | bash
livekit-server --dev

Після запуску сервер буде доступний на ws://localhost:7880. У .env або livekit.yaml можна вказати API ключі, порти, TLS тощо. Докладніше — у документації.

Або просто використайте безкоштовний LiveKit Cloud

1. Реєструйтесь на cloud.livekit.io
2. Отримуєте:
   — API Key
   — API Secret
   — WSS URL — типу wss://your-app.livekit.cloud
3. Переглядаєте метрики за допомогою інформативного дешборду

Javascript реалізація

Може бути повністю адаптовано під будь який JS фреймворк. Не забудьте замінити wsURL і token своїми даними. token має бути згенерованим на бекенді. Готовий Angular приклад тут.

// install NPM package
npm install livekit-client --save

// Change url and token with your values
import { Room } from 'livekit-client';
const wsURL = 'wss://tslen-sihva4bl.livekit.cloud';
const token = 'k3Mjc2NzksImlzcyI6IkFQSXhnUDlUc2lYc0I3dSIsIm5iZiI6MTc0OTcyMDQ3OSwic3ViIjoicXVpY2tzdGFydCB1c2VyIGo0Mjk3cSIsInZpZGVvIjp7ImNhblB1Ymxpc2giOnRydWUsImNhblB1Ymxpc2hEYXRhIjp0cnVlLCJjYW5TdWJzY3JpYmUiOnRydWUsInJvb20iOiJxdWlja3N0YXJ0IHJvb20iLCJyb29tSm9pbiI6dHJ1ZX19.2wwYFHtZxI8OPnAq7Bn40ZnhDpgv6xmrGhDQMVob7I8';
const room = new Room();
await room.connect(wsURL, token);
console.log('connected to room', room.name);
// Publish local camera and mic tracks
await room.localParticipant.enableCameraAndMicrophone();

</code> <h2>Node.js реалізація</h2> Бекенд потрібен для генерації токена, який необхідно вставити на стороні фронтенда. Не забудьте замінити  <code>LIVEKIT_API_KEY і LIVEKIT_API_SECRET своїми даними. Можна також розглянути беззсерверні рішення (наприклад, Firebase functions). Готовий Node.js приклад тут.

# yarn:
yarn add livekit-server-sdk

# npm:
npm install livekit-server-sdk --save

// server.js
import express from 'express';
import { AccessToken } from 'livekit-server-sdk';
const createToken = async () => {
  // If this room doesn't exist, it'll be automatically created when the first
  // participant joins
  const roomName = 'quickstart-room';
  // Identifier to be used for participant.
  // It's available as LocalParticipant.identity with livekit-client SDK
  const participantName = 'quickstart-username';
  const at = new AccessToken(process.env.LIVEKIT_API_KEY, process.env.LIVEKIT_API_SECRET, {
    identity: participantName,
    // Token to expire after 10 minutes
    ttl: '10m',
  });
  at.addGrant({ roomJoin: true, room: roomName });
  return await at.toJwt();
};
const app = express();
const port = 3000;
app.get('/getToken', async (req, res) => {
  res.send(await createToken());
});
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Висновки

Створити власний відеочат виявилось набагато простіше, ніж я спочатку думав — LiveKit дозволяє реалізувати базовий функціонал буквально за день-два. Особливо вражає можливість вибору між cloud-рішенням для швидкого старту та self-hosted варіантом для повного контролю над даними.

Завдяки відкритому коду та чудовій документації, навіть складні кастомізації стають доступними без глибокого занурення у WebRTC. Рекомендую починати з LiveKit Cloud для прототипування, а потім поступово додавати власні фічі — такий підхід дає змогу швидко отримати MVP і масштабувати проект під конкретні потреби бізнесу.

Корисні посилання

• GitHub репозиторій демо проекту
• Демо
• LiveKit документація
• LiveKit Cloud
• OpenVidu документація