Интеграция Twilio Video для видеозвонков на сайте

При интеграции видеозвонков на сайт с помощью Twilio Video команды упираются в сложность WebRTC или закрытые SDK. Интеграция видеозвонков требует правильной настройки серверной части, токенов и клиентского компонента. Однако многие разработчики допускают типичные ошибки: неверный TTL токена, игнорирование обработки переподключения, неоптимальный выбор типа комнаты. На практике мы столкнулись с кейсом, когда клиент терял до 30% сессий из-за слишком короткого TTL (5 минут вместо 3600). После внедрения рефреша и правильной обработки DisconnectedEvent отказоустойчивость выросла до 99.9%. Другой клиент — сервис телемедицины — терял до 20% звонков из-за неверной обработки переподключения. Мы реализовали механизм повторной попытки и корректную подписку на события, что повысило процент успешных звонков до 99.5%. Опыт интеграции — 5+ лет, более 20 проектов. Гарантируем стабильную работу и помощь на этапе разработки.

Почему Twilio Video лучше готовых решений?

В отличие от Zoom SDK или Jitsi, Twilio Video даёт полный контроль над интерфейсом и логикой. Вы не привязаны к стандартной сетке участников — можете реализовать собственную сетку, переключение между говорящими, эффекты или модерацию. Кроме того, Twilio экосистема позволяет объединить видео с телефонией и SMS, что удобно для сервисов телемедицины или консультаций. API интеграция с Twilio Video проста благодаря REST API и SDK. Twilio Video основан на WebRTC, что обеспечивает совместимость с большинством браузеров и мобильных устройств.

Как управлять участниками в комнате?

После подключения к комнате каждый участник представлен объектом RemoteParticipant. События participantConnected и participantDisconnected отслеживаются на уровне комнаты. Для каждого удалённого участника подписываемся на trackSubscribed и trackUnsubscribed, чтобы добавлять/удалять видеопотоки. Это позволяет динамически обновлять сетку. Важно обрабатывать случаи, когда участник переключает камеру — трек меняется, и нужно заново прикрепить его к DOM.

Интеграция Twilio Video в React-приложение

Интеграция состоит из нескольких шагов. Рассмотрим каждый на примере TypeScript и React 18.

1. Настройка сервера — создание комнат и генерация Access Token.
2. Разработка React-компонента — подключение к комнате и отображение потоков.
3. Обработка записи звонков — включение записи и получение ссылок.

Создание комнаты и Access Token на сервере

npm install twilio 

import twilio from 'twilio'; const AccessToken = twilio.jwt.AccessToken; const VideoGrant = AccessToken.VideoGrant; const client = twilio( process.env.TWILIO_ACCOUNT_SID!, process.env.TWILIO_AUTH_TOKEN! ); // Создать комнату async function createRoom(name: string) { const room = await client.video.v1.rooms.create({ uniqueName: name, type: 'group', // 'go' | 'peer-to-peer' | 'group' | 'group-small' maxParticipants: 10, recordParticipantsOnConnect: false, statusCallback: `${process.env.APP_URL}/api/webhooks/twilio-video`, statusCallbackMethod: 'POST', }); return room.sid; } // Выдать токен участнику function generateVideoToken(identity: string, roomName: string): string { const token = new AccessToken( process.env.TWILIO_ACCOUNT_SID!, process.env.TWILIO_API_KEY!, process.env.TWILIO_API_SECRET!, { identity, ttl: 3600 } ); const grant = new VideoGrant({ room: roomName }); token.addGrant(grant); return token.toJwt(); } // API endpoint app.post('/api/video/join', authenticate, async (req, res) => { const { roomName } = req.body; // Убедиться, что комната существует или создать try { await client.video.v1.rooms(roomName).fetch(); } catch { await createRoom(roomName); } const token = generateVideoToken(req.user.id, roomName); res.json({ token, roomName }); }); 

React компонент с Twilio Video JS SDK

npm install twilio-video 

import { connect, Room, LocalVideoTrack } from 'twilio-video'; import { useEffect, useRef, useState } from 'react'; function TwilioVideoRoom({ token, roomName }: { token: string; roomName: string }) { const [room, setRoom] = useState<Room | null>(null); const [participants, setParticipants] = useState<string[]>([]); const localVideoRef = useRef<HTMLVideoElement>(null); useEffect(() => { let connectedRoom: Room; connect(token, { name: roomName, audio: true, video: { width: 1280, height: 720 }, }).then((room) => { connectedRoom = room; setRoom(room); // Отображение локального видео const localTrack = [...room.localParticipant.videoTracks.values()][0]?.track; if (localTrack && localVideoRef.current) { localVideoRef.current.srcObject = new MediaStream([localTrack.mediaStreamTrack]); } // Обработка участников room.participants.forEach((p) => { setParticipants(prev => [...prev, p.identity]); }); room.on('participantConnected', (p) => { setParticipants(prev => [...prev, p.identity]); p.on('trackSubscribed', (track) => { if (track.kind === 'video') { const el = document.getElementById(`participant-${p.identity}`); if (el) track.attach(el as HTMLVideoElement); } }); }); room.on('participantDisconnected', (p) => { setParticipants(prev => prev.filter(id => id !== p.identity)); }); }); return () => { connectedRoom?.disconnect(); }; }, [token, roomName]); return ( <div className="grid grid-cols-2 gap-4"> <div className="relative"> <video ref={localVideoRef} autoPlay muted playsInline className="w-full rounded-xl" /> <span className="absolute bottom-2 left-2 text-white text-sm bg-black/50 px-2 py-1 rounded"> Вы </span> </div> {participants.map(identity => ( <div key={identity} className="relative"> <video id={`participant-${identity}`} autoPlay playsInline className="w-full rounded-xl" /> <span className="absolute bottom-2 left-2 text-white text-sm bg-black/50 px-2 py-1 rounded"> {identity} </span> </div> ))} </div> ); } 

Запись звонка

// Включить запись для комнаты async function enableRoomRecording(roomSid: string) { await client.video.v1.rooms(roomSid).recordings.create({ // Записывает всех участников }); } // Получить ссылку на запись после звонка async function getRoomRecordings(roomSid: string) { const recordings = await client.video.v1.rooms(roomSid).recordings.list(); return recordings.map(r => ({ sid: r.sid, duration: r.duration, url: `https://video.twilio.com/v1/Recordings/${r.sid}/Media`, })); } 

Как выбрать тип комнаты?

Выбор типа комнаты зависит от сценария. Peer-to-Peer (P2P) подходит для личных видеозвонков 1-на-1: задержка менее 150 мс, нет серверной обработки, но ограничение до 2 участников. Group Small поддерживает до 4 участников с умеренной задержкой. Group — до 50 участников, запись и трекинг, но задержка до 300 мс. Если планируются вебинары, используйте Group и включите запись.

Сравнение типов комнат

Основные параметры конфигурации

Что входит в работу по интеграции

• Настройка аккаунта Twilio и API-ключей
• Разработка серверных endpoints для создания комнат и генерации токенов
• Сборка React компонента с кастомным UI для отображения участников
• Интеграция записи звонков и webhooks для обработки событий
• Документация по развёртыванию и поддержке
• Обучение команды работе с SDK

Типичные ошибки и как их избежать

• Истечение токена во время звонка: устанавливайте ttl не менее 3600 секунд и реализуйте механизм рефреша через серверные события.
• N+1 запросы при получении списка записей: используйте Promise.all или пагинацию.
• Несинхронизированная видеосетка: подписывайтесь на trackSwitched для корректного обновления DOM.
• Игнорирование обработки потери соединения: используйте механизм повторной попытки с экспоненциальной задержкой. Если вы столкнулись с аналогичными проблемами, свяжитесь с нами — мы поможем их решить.

Сроки

Базовая интеграция Twilio Video + React компонент + Access Token — 2–3 дня. С управлением участниками, записью и webhooks — 4–5 дней. Закажите интеграцию Twilio Video — мы подготовим готовый модуль за 3 дня. Свяжитесь с нами для бесплатной консультации по архитектуре. Получите оценку вашего проекта.

Какие факторы влияют на стоимость?

Стоимость интеграции зависит от сложности кастомного UI, необходимости записи и webhooks, количества типов комнат и интеграции с другими сервисами. Мы рассчитываем стоимость индивидуально после анализа требований. Свяжитесь с нами для точной оценки.

Официальная документация Twilio Video: https://www.twilio.com/docs/video