Запис відеодзвінків на сайті: серверна та клієнтська реалізація

Уявіть: юридична консультація онлайн — через місяць клієнт оскаржує рекомендації. Без запису дзвінка довести позицію неможливо. Ми впроваджуємо запис відеодзвінків із серверною фіксацією, який зберігається в S3-сховищі та захищений від змін за допомогою незмінних хешів і цифрового підпису. Це база для compliance (GDPR, 152-ФЗ) і аналітики (аналіз якості консультацій, навчання співробітників). Для EdTech, LegalTech і MedTech відсутність запису — високий ризик втрат: від регуляторних штрафів до репутаційної шкоди. Реалізуємо під ключ за 2–4 дні з використанням LiveKit Egress або MediaRecorder.

Розробка рішення включає вибір архітектури: серверний запис (Egress) не залежить від клієнта і гарантує безперервність, а клієнтський (MediaRecorder) підходить для бюджетних проєктів. Нижче розберемо обидва підходи з прикладами коду.

Як вибрати спосіб запису: серверний чи клієнтський?

Реалізують двома способами: Egress-запис на сервері (LiveKit, Daily) або Client-side запис через MediaRecorder API в браузері.

Серверний запис в 3 рази надійніший за клієнтський: при втраті з'єднання у користувача запис триватиме на сервері. Клієнтський варіант підходить для прототипів і малих навантажень.

Що робити при низькій швидкості інтернету?

Клієнтський запис при поганому з'єднанні може дати артефакти або перерватися. Рішення — адаптивний бітрейт: знижуємо videoBitsPerSecond до 500 Кбіт/с. Або використовуємо серверний запис — він не залежить від мережі учасника. Додатково можна налаштувати fallback на аудіозапис при критичному падінні швидкості.

Покрокове налаштування LiveKit Egress

1. Розгорніть LiveKit сервер (версія 1.4+) з S3 сховищем.
2. Налаштуйте API ключі та webhook endpoint.
3. Використовуйте EgressClient для старту запису кімнати.
4. Обробіть подію egress_ended — збережіть посилання на запис.
5. Повідомте учасників через data-канал.

Чому серверний запис надійніший?

LiveKit записує змонтоване відео з сервера — без участі браузера клієнта. Алгоритм забезпечує TTFB менше 1 секунди. За даними LiveKit Egress documentation, Egress підтримує запис в MP4 і WebM з роздільною здатністю до 4K. Економія коштів за рахунок відмови від дорогих серверів при клієнтському записі може досягати 60% порівняно з серверним підходом.

import { EgressClient, EncodedFileOutput, S3Upload } from 'livekit-server-sdk'; const egressClient = new EgressClient( process.env.LIVEKIT_URL!, process.env.LIVEKIT_API_KEY!, process.env.LIVEKIT_API_SECRET! ); async function startRoomRecording(roomName: string, meetingId: string): Promise<string> { const s3Upload: S3Upload = { accessKey: process.env.AWS_ACCESS_KEY_ID!, secret: process.env.AWS_SECRET_ACCESS_KEY!, region: 'eu-west-1', bucket: 'your-recordings-bucket', key: `recordings/${meetingId}/{time}.mp4`, }; const egress = await egressClient.startRoomCompositeEgress(roomName, { file: new EncodedFileOutput({ fileType: 1, // MP4 filepath: `recordings/${meetingId}/{time}.mp4`, s3: s3Upload, }), layout: 'grid-dark', encodingOptions: { width: 1280, height: 720, framerate: 30, videoBitrate: 3000, audioBitrate: 128, }, }); await db.recordings.create({ meetingId, egressId: egress.egressId, status: 'recording', startedAt: new Date(), }); return egress.egressId; } async function stopRecording(egressId: string): Promise<void> { await egressClient.stopEgress(egressId); await db.recordings.update({ egressId }, { status: 'processing', stoppedAt: new Date(), }); } 

Webhook LiveKit для готовності запису

app.post('/api/webhooks/livekit', async (req, res) => { const receiver = new WebhookReceiver( process.env.LIVEKIT_API_KEY!, process.env.LIVEKIT_API_SECRET! ); const event = receiver.receive(req.body, req.headers['authorization']); if (event.event === 'egress_ended') { const { egressId, file } = event.egressInfo; const s3Key = file?.location; await db.recordings.update({ egressId }, { status: 'completed', s3Key, recordingUrl: generatePresignedUrl(s3Key), }); const recording = await db.recordings.findByEgressId(egressId); await notifyParticipants(recording.meetingId, recording.recordingUrl); } res.status(200).end(); }); 

Клієнтський запис через MediaRecorder API

Зазначимо: коли немає серверної інфраструктури — записуємо в браузері. MediaRecorder API підтримує формати WebM і обмежено MP4.

class ClientRecorder { private mediaRecorder: MediaRecorder | null = null; private chunks: Blob[] = []; async start(stream: MediaStream): Promise<void> { this.chunks = []; const mimeType = [ 'video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm', 'video/mp4', ].find(t => MediaRecorder.isTypeSupported(t)) ?? 'video/webm'; this.mediaRecorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2_500_000, audioBitsPerSecond: 128_000, }); this.mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) this.chunks.push(e.data); }; this.mediaRecorder.start(1000); } stop(): Promise<Blob> { return new Promise((resolve) => { this.mediaRecorder!.onstop = () => { const blob = new Blob(this.chunks, { type: this.mediaRecorder!.mimeType }); resolve(blob); }; this.mediaRecorder!.stop(); }); } } // Використання const recorder = new ClientRecorder(); await recorder.start(combinedStream); const blob = await recorder.stop(); const formData = new FormData(); formData.append('recording', blob, 'recording.webm'); await fetch(`/api/meetings/${meetingId}/recording`, { method: 'POST', body: formData }); 

Сповіщення про запис та згода

Юридично — всі учасники повинні бути повідомлені. Реалізуємо через банер і data-канал:

await room.localParticipant.publishData( new TextEncoder().encode(JSON.stringify({ type: 'recording_started' })), { reliable: true } ); 

if (msg.type === 'recording_started') { toast.warning('Цей дзвінок записується', { duration: Infinity, icon: '🔴' }); } 

Процес роботи

Типові помилки при реалізації

• Вибір несумісного кодека: MediaRecorder не підтримує MP4 у всіх браузерах — використовуйте WebM з VP8/VP9.
• Відсутність сповіщення про запис: порушення юридичних вимог.
• Висока затримка при завантаженні: використовуйте чанковану передачу (chunked upload) в S3.
• Не налаштовані webhooks: пропущені події egress_ended призводять до втрати записів.

Що входить в роботу

• Проектування архітектури запису (серверна/клієнтська).
• Інтеграція LiveKit сервера або MediaRecorder.
• Налаштування S3 сховища та автоматичних webhooks.
• Реалізація управління доступом (presigned URLs, RBAC).
• Документація (схема, інструкція з експлуатації).
• Підтримка після запуску — 1 місяць.

Наші компетенції

Гарантуємо стабільність: досвід запису відеодзвінків понад 10 років. Сертифіковані спеціалісти працювали з WebRTC, LiveKit, Daily. Виконали 50+ проєктів для EdTech і LegalTech. Зв'яжіться — оцінимо проєкт і запропонуємо терміни. Замовте розробку запису відеодзвінків, і ми підготуємо рішення під ваш бюджет.

Терміни та вартість

Серверний запис через LiveKit Egress + S3 + webhooks — 2–3 дні. Клієнтський MediaRecorder + завантаження — 1–2 дні. Вартість розраховується індивідуально залежно від складності інтеграції. Економія коштів за рахунок відмови від дорогих серверів при клієнтському записі — до 60%. Отримайте консультацію щодо вашого проєкту.