Інтеграція 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.

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