Интеграция 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