При интеграции видеозвонков на сайт с помощью 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.
- Настройка сервера — создание комнат и генерация Access Token.
- Разработка React-компонента — подключение к комнате и отображение потоков.
- Обработка записи звонков — включение записи и получение ссылок.
Создание комнаты и 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 и включите запись.
Сравнение типов комнат
| Тип комнаты | Макс. участников | Задержка | Особенности |
|---|---|---|---|
| Peer-to-Peer | 2 | <150 мс | Низкая задержка, без серверной обработки |
| Group Small | 4 | <200 мс | Баланс производительности и числа участников |
| Group | 50 | <300 мс | Полноценные конференции, запись, трекинг |
Основные параметры конфигурации
| Параметр | Значение | Комментарий |
|---|---|---|
type |
peer-to-peer, group-small, group |
Тип комнаты определяет архитектуру |
maxParticipants |
2-50 | Максимум участников одновременно |
ttl |
3600 (сек) | Время жизни Access Token, рекомендуется 1 час |
recordParticipantsOnConnect |
true/false |
Автоматическая запись при подключении |
videoDimensions |
1280x720 | Разрешение видео, влияет на пропускную способность |
Что входит в работу по интеграции
- Настройка аккаунта 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