Інтеграція Daily.co для відеодзвінків на сайті

Зауважимо: коли клієнт уперше попросив нас вбудувати відеодзвінки на сайт медичної консультації, ми зіткнулися з типовою проблемою: потрібно швидко, безпечно та без встановлення додатків. Проблема в тому, що приватність лікарського прийому критична — потрібне шифрування та контроль доступу, а також інтеграція з 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 виграє за швидкістю впровадження: на весь цикл йде 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.

Які етапи включає процес роботи?

1. Аналітика — вивчаємо навантаження, вимоги до приватності, чи потрібен запис.
2. Проектування — архітектура: бекенд (створення кімнат, токени), фронтенд (компонент), вебхуки.
3. Реалізація — пишемо код, налаштовуємо API-ключі, інтеграція з CRM/ERP.
4. Тестування — перевіряємо паралельні дзвінки, якість відео при 3G, відновлення після втрати мережі.
5. Деплой — розгортаємо на вашому сервері або хмарі, навчаємо команду.

Що входить у роботу

• Повний код інтеграції (бекенд + фронтенд) з коментарями
• Документація з API та налаштування вебхуків
• Доступи до тестового середовища
• Навчання вашого розробника (1 година)
• Місяць технічної підтримки після запуску

Терміни

Вартість розраховується індивідуально. Оцінимо ваш проект за один робочий день. Наш досвід — 5 років на ринку, 30+ проектів з WebRTC.

Зв'яжіться з нами для обговорення інтеграції. Отримайте консультацію — оцінимо ваш проект за один день.