Интеграция 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. Получите оценку вашего проекта — закажите консультацию.

Свяжитесь с нами для обсуждения интеграции. Получите консультацию — оценим ваш проект за один день.