При інтеграції відеодзвінків на сайт за допомогою 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, кількості типів кімнат та інтеграції з іншими сервісами. Ми розраховуємо вартість індивідуально після аналізу вимог. Зв'яжіться з нами для точної оцінки.