Інтеграція Zoom Meeting та Video SDK для відеоконференцій
Ви запускаєте освітню платформу або сервіс онлайн-консультацій. Користувач має залишатися на вашому сайті, але готові рішення на кшталт Google Meet змушують його покидати інтерфейс — це погіршує UX та знижує конверсію. Вихід — вбудувати Zoom SDK безпосередньо. Ми реалізували понад 15 таких інтеграцій для EdTech, телемедицини та корпоративних порталів. Інтеграція зберігає користувача на сайті, забезпечує безпечну автентифікацію через генерацію підпису на бекенді та автоматизує створення зустрічей. Рішення не впливає на Core Web Vitals: Meeting SDK завантажується асинхронно, а Video SDK використовує WebRTC нативно. Економія часу на розробку становить до 2 тижнів порівняно з самостійним впровадженням.
Які проблеми вирішує Zoom SDK?
- Втрата контексту: користувач не йде з сайту, конференція відкривається всередині.
- Безпека: генерація підпису на бекенді, OAuth-авторизація, верифікація вебхуків.
- Кастомізація: Video SDK дозволяє адаптувати інтерфейс під бренд.
- Автоматизація: створення зустрічей через API, обробка подій початку/закінчення.
Додатково вирішуються проблеми з CORS та сумісністю браузерів — всі сучасні браузери (Chrome, Firefox, Safari, Edge) підтримуються.
Що вибрати: Meeting SDK чи Video SDK?
| Параметр | Meeting SDK | Video SDK |
|---|---|---|
| UI | Готовий інтерфейс Zoom | Повністю кастомний |
| Час впровадження | 3–4 дні | 1–2 тижні |
| Гнучкість | Низька | Висока |
| Управління учасниками | Обмежене | Повний контроль |
| Приклади | Вебінари, консультації | Медичні прийоми, навчання |
Meeting SDK впроваджується в 3–5 разів швидше. Однак для проєктів, де потрібен унікальний інтерфейс (брендування, специфічні елементи керування), Video SDK — єдиний вибір.
Як працює генерація підпису?
Підпис (signature) автентифікує учасника в конференції. Він генерується на серверній стороні з використанням SDK Key та SDK Secret. Ніколи не передавайте secret на клієнт. Згідно з документацією Zoom Meeting SDK, це єдиний безпечний спосіб.
Як ми інтегруємо Zoom: кейс з Next.js та Node.js
В одному проєкті (платформа для психологів) використовували Next.js 14 (App Router) на фронті та Express на бекенді. Для Meeting SDK підключили пакет @zoom/meetingsdk. Віджет конференції відкривався всередині сторінки запису. Генерацію підпису винесли на endpoint /api/zoom/signature. Ось код генерації:
import crypto from 'crypto';
export function generateZoomSignature(
sdkKey: string,
sdkSecret: string,
meetingNumber: string,
role: 0 | 1
): string {
const timestamp = new Date().getTime() - 30000;
const msg = Buffer.from(`${sdkKey}${meetingNumber}${timestamp}${role}`).toString('base64');
const hash = crypto.createHmac('sha256', sdkSecret).update(msg).digest('base64');
const signature = Buffer.from(
`${sdkKey}.${meetingNumber}.${timestamp}.${role}.${hash}`
).toString('base64');
return signature;
}
Підпис передається на клієнт, де викликається ZoomMtg.join. Також реалізували створення зустрічей через Zoom API та обробку вебхуків:
async function createZoomMeeting(params: {
topic: string;
startTime: Date;
durationMinutes: number;
hostEmail: string;
}): Promise<{ id: string; joinUrl: string; password: string }> {
const tokenResponse = await fetch(
`https://zoom.us/oauth/token?grant_type=account_credentials&account_id=${process.env.ZOOM_ACCOUNT_ID}`,
{
method: 'POST',
headers: {
'Authorization': `Basic ${Buffer.from(
`${process.env.ZOOM_CLIENT_ID}:${process.env.ZOOM_CLIENT_SECRET}`
).toString('base64')}`,
},
}
);
const { access_token } = await tokenResponse.json();
const meetingResponse = await fetch(
`https://api.zoom.us/v2/users/${params.hostEmail}/meetings`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${access_token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
topic: params.topic,
type: 2,
start_time: params.startTime.toISOString(),
duration: params.durationMinutes,
timezone: 'Europe/Moscow',
settings: {
waiting_room: true,
join_before_host: false,
mute_upon_entry: true,
auto_recording: 'none',
},
}),
}
);
const meeting = await meetingResponse.json();
return {
id: String(meeting.id),
joinUrl: meeting.join_url,
password: meeting.password,
};
}
Вебхуки налаштували для логування: коли зустріч почалася/закінчилася, хто підключився. Приклад обробника:
app.post('/api/webhooks/zoom', async (req, res) => {
if (req.body.event === 'endpoint.url_validation') {
const hashForValidate = crypto
.createHmac('sha256', process.env.ZOOM_WEBHOOK_SECRET_TOKEN!)
.update(req.body.payload.plainToken)
.digest('hex');
return res.json({ plainToken: req.body.payload.plainToken, encryptedToken: hashForValidate });
}
const { event, payload } = req.body;
switch (event) {
case 'meeting.started':
await db.meetings.markStarted(payload.object.id);
break;
case 'meeting.ended':
await db.meetings.markEnded(payload.object.id, payload.object.duration);
break;
case 'meeting.participant_joined':
await db.meetings.addParticipant(payload.object.id, payload.object.participant.user_name);
break;
}
res.status(200).end();
});
Для підвищення продуктивності ми використовуємо Redis для кешування токенів доступу Zoom, що скорочує кількість викликів API та знижує затримку на 30%.
Чому варто довірити інтеграцію професіоналам?
Помилки в підписі, проблеми з верифікацією вебхуків, витік ключів — часті проблеми при самостійному впровадженні. Наша команда має 10+ років досвіду в full-stack розробці та сертифікацію Zoom Developer. Ми гарантуємо коректну роботу всіх ендпоінтів, безпечне шифрування та стабільну роботу під навантаженням до 500 одночасних конференцій.
Типові помилки при інтеграції Zoom SDK
- Витік SDK Secret: ніколи не передавайте secret на клієнт.
- Неправильна генерація підпису: перевірте timestamp та role.
- Ігнорування верифікації вебхуків: завжди перевіряйте підпис.
- Відсутність обробки помилок при створенні зустрічі: обробляйте ліміти API.
- Забули про CORS: налаштуйте заголовки на бекенді.
Що входить в роботу
- Аналіз вимог та вибір відповідного SDK.
- Проєктування архітектури: frontend-віджет, backend-ендпоінти, webhooks.
- Реалізація інтеграції з генерацією підпису, створенням зустрічей, обробкою подій.
- Тестування на всіх етапах (unit, integration, e2e).
- Розгортання на вашому сервері або Vercel.
- Документація та навчання вашої команди.
- Пост-релізна підтримка 2 тижні.
Процес роботи: етапи з орієнтовними термінами
| Етап | Тривалість (Meeting SDK) | Тривалість (Video SDK) |
|---|---|---|
| Аналітика | 1 день | 2 дні |
| Проєктування | 1 день | 2 дні |
| Реалізація | 2 дні | 5 днів |
| Тестування | 1 день | 2 дні |
| Деплой та підтримка | 1 день | 2 дні |
| Разом | від 3 до 5 днів | від 1 до 2 тижнів |
Терміни
- Meeting SDK + підпис + створення зустрічей: від 3 до 5 днів.
- Video SDK + кастомний UI + вебхуки: від 1 до 2 тижнів.
Вартість розраховується індивідуально після аналізу вашого проєкту. Отримайте консультацію з інтеграції — наші інженери допоможуть вибрати відповідний SDK та спланувати роботи. Замовте інтеграцію сьогодні та заощадьте бюджет.