Зауважимо: коли клієнт уперше попросив нас вбудувати відеодзвінки на сайт медичної консультації, ми зіткнулися з типовою проблемою: потрібно швидко, безпечно та без встановлення додатків. Проблема в тому, що приватність лікарського прийому критична — потрібне шифрування та контроль доступу, а також інтеграція з CRM для запису сесій. Вибрали Daily.co — хмарну WebRTC-платформу з простим JavaScript SDK. Daily.co виділяється на ринку готовою інфраструктурою: не потрібно піднімати STUN/TURN-сервери, а просте API дозволяє створити кімнату за один запит. Інтеграція з Daily.co у 3–4 рази швидша, ніж з Twilio Video, а вартість перших 10 000 хвилин на місяць — безкоштовно. Для стартапів це вирішальний фактор. Згідно з документацією Daily.co, створення кімнати займає один API-запит. Безкоштовний ліміт у 10 000 хвилин економить до 500 доларів на місяць порівняно з орендою власних серверів. Платформа гарантує 99.9% uptime, що забезпечує стабільність відеозв'язку.
Які проблеми вирішуємо
Приватність консультацій. За замовчуванням кімната відкрита всім, хто знає URL. Вирішили через meeting token: кожен учасник отримує персональний токен, який генерується на бекенді та діє лише на час сесії.
Кастомізація UI. Daily Prebuilt не вписувався в дизайн сайту — кнопки, кольори, розташування. Створили власний React-компонент на @daily-co/daily-js, який вписується в будь-яку верстку.
Масштабування. Навантаження зростало: від 10 до 100 паралельних кімнат. Daily.co бере на себе WebRTC-інфраструктуру, ми лише стежимо за лімітами — 50 учасників на кімнату в базовому плані, до 200 в enterprise.
Як вирішити проблему приватності відеодзвінків?
Для приватних кімнат створюйте meeting token через POST /v1/meeting-tokens. Токен прив'язується до імені учасника та кімнати; можна задати права (власник, запис). Без токена кімнатою може скористатися будь-хто, хто знає URL. Генерація токена на бекенді та передача клієнту через API — стандартний патерн.
Як кастомізувати інтерфейс відеодзвінка?
Daily.co дозволяє вбудувати iframe з власним CSS або використовувати Daily Prebuilt з налаштуваннями кнопок. Для повного контролю над UI використовуйте @daily-co/daily-js та створюйте власні елементи керування. Ми реалізували React-компонент, який підміняє стандартні елементи та інтегрується з дизайн-системою.
Чому Daily.co, а не Twilio Video або Zoom Embed?
| Критерій | Daily.co | Twilio Video | Zoom Embed |
|---|---|---|---|
| Складність інтеграції | Низька — один SDK | Середня — потрібно розуміти WebRTC | Висока — OAuth, SDK під кожну мову |
| Кастомізація UI | Повна через @daily-co/daily-js | Обмежена через Layout | Закрита — тільки Zoom UI |
| Пасивний запис | З коробки | Через окремий API | Доступна в Enterprise |
| Ціна | Безкоштовно до 10 000 хвилин на місяць | Безкоштовно до 1 000 хвилин | Платний тариф |
Daily.co виграє за швидкістю впровадження: на весь цикл йде 3–4 дні проти 1–2 тижнів у конкурентів.
Як ми це робимо?
Стек: React 18, Node.js (Nest.js), PostgreSQL для зберігання сесій. Бекенд керує кімнатами через Daily.co REST API, фронтенд використовує @daily-co/daily-js для відображення.
Створення кімнати — через POST /v1/rooms з ключем у заголовку. Приклад на TypeScript:
const DAILY_API_KEY = process.env.DAILY_API_KEY;
async function createRoom(options: {
name?: string;
expiresInMinutes?: number;
maxParticipants?: number;
}): Promise<{ url: string; name: string }> {
const response = await fetch('https://api.daily.co/v1/rooms', {
method: 'POST',
headers: {
'Authorization': `Bearer ${DAILY_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: options.name ?? `room-${Date.now()}`,
properties: {
exp: Math.floor(Date.now() / 1000) + (options.expiresInMinutes ?? 60) * 60,
max_participants: options.maxParticipants ?? 10,
enable_screenshare: true,
enable_chat: true,
enable_recording: false,
start_video_off: false,
start_audio_off: false,
},
}),
});
const room = await response.json();
return { url: room.url, name: room.name };
}
// API для створення сесії
app.post('/api/video/room', authenticate, async (req, res) => {
const { consultationId } = req.body;
const room = await createRoom({
name: `consultation-${consultationId}`,
expiresInMinutes: 90,
maxParticipants: 2,
});
await db.consultations.update(consultationId, { roomUrl: room.url });
res.json({ url: room.url });
});
Токен учасника — обов'язковий для приватних кімнат. Генеруємо на бекенді та передаємо клієнту через API:
async function createMeetingToken(roomName: string, participantName: string, isOwner = false) {
const response = await fetch('https://api.daily.co/v1/meeting-tokens', {
method: 'POST',
headers: {
'Authorization': `Bearer ${DAILY_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
properties: {
room_name: roomName,
user_name: participantName,
is_owner: isOwner,
exp: Math.floor(Date.now() / 1000) + 90 * 60,
enable_recording: isOwner,
},
}),
});
const { token } = await response.json();
return token;
}
Додаткове налаштування токенів
Ви можете задавати права на запис, модерацію та тривалість сесії. Токени закінчуються автоматично, що підвищує безпеку.
React-компонент з Daily JS SDK
npm install @daily-co/daily-js
import DailyIframe from '@daily-co/daily-js';
import { useEffect, useRef, useState } from 'react';
interface VideoCallProps {
roomUrl: string;
token: string;
userName: string;
onLeave?: () => void;
}
function VideoCall({ roomUrl, token, userName, onLeave }: VideoCallProps) {
const callRef = useRef<ReturnType<typeof DailyIframe.createFrame> | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [status, setStatus] = useState<'idle' | 'joining' | 'joined' | 'left'>('idle');
useEffect(() => {
if (!containerRef.current) return;
const call = DailyIframe.createFrame(containerRef.current, {
showLeaveButton: true,
showFullscreenButton: true,
iframeStyle: { width: '100%', height: '100%', border: 'none', borderRadius: '12px' },
});
callRef.current = call;
call.on('joining-meeting', () => setStatus('joining'));
call.on('joined-meeting', () => setStatus('joined'));
call.on('left-meeting', () => {
setStatus('left');
onLeave?.();
});
call.on('error', (err) => console.error('Daily error:', err));
call.join({ url: roomUrl, token, userName });
return () => {
call.destroy();
};
}, [roomUrl, token]);
return (
<div className="relative" style={{ height: 600 }}>
{status === 'joining' && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-xl z-10">
<p className="text-white">Підключення...</p>
</div>
)}
{status === 'left' && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-xl z-10">
<p className="text-white text-lg">Дзвінок завершено</p>
</div>
)}
<div ref={containerRef} className="w-full h-full" />
</div>
);
}
Як налаштувати вебхуки?
Daily.co надсилає події на ваш сервер — статус кімнати, підключення учасників, тривалість дзвінка:
app.post('/api/webhooks/daily', async (req, res) => {
const { event_type, payload } = req.body;
switch (event_type) {
case 'meeting.started':
await db.videoSessions.markStarted(payload.room.name);
break;
case 'meeting.ended':
await db.videoSessions.markEnded(payload.room.name, {
duration: payload.meeting_duration,
});
break;
case 'participant.joined':
await db.videoSessions.addParticipant(payload.room.name, payload.participant.user_name);
break;
}
res.status(200).end();
});
Посилання на WebRTC API.
Які етапи включає процес роботи?
- Аналітика — вивчаємо навантаження, вимоги до приватності, чи потрібен запис.
- Проектування — архітектура: бекенд (створення кімнат, токени), фронтенд (компонент), вебхуки.
- Реалізація — пишемо код, налаштовуємо API-ключі, інтеграція з CRM/ERP.
- Тестування — перевіряємо паралельні дзвінки, якість відео при 3G, відновлення після втрати мережі.
- Деплой — розгортаємо на вашому сервері або хмарі, навчаємо команду.
Що входить у роботу
- Повний код інтеграції (бекенд + фронтенд) з коментарями
- Документація з API та налаштування вебхуків
- Доступи до тестового середовища
- Навчання вашого розробника (1 година)
- Місяць технічної підтримки після запуску
Терміни
| Рівень інтеграції | Термін |
|---|---|
| Базова (кімната + iframe) | 1–2 дні |
| Середня (+ токени, вебхуки) | 3–4 дні |
| Повна (+ запис, кастомний UI) | 5–7 днів |
Вартість розраховується індивідуально. Оцінимо ваш проект за один робочий день. Наш досвід — 5 років на ринку, 30+ проектів з WebRTC.
Зв'яжіться з нами для обговорення інтеграції. Отримайте консультацію — оцінимо ваш проект за один день.