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

Представьте: юридическая консультация онлайн — через месяц клиент оспаривает рекомендации. Без записи звонка доказать позицию невозможно. Мы внедряем запись видеозвонков с серверной фиксацией, которая сохраняется в 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%. Получите консультацию по вашему проекту.