Реализация записи видеозвонков на сайте

Запись видеозвонков на сайте

Запись звонков нужна для обучающих платформ, юридически значимых консультаций, корпоративных встреч. Реализуют двумя способами: Egress-запись на сервере (LiveKit, Daily) или Client-side запись через MediaRecorder API в браузере.

Серверная запись через LiveKit Egress

LiveKit записывает смонтированное видео с сервера — без участия браузера клиента, независимо от качества связи.

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 для записи
    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;  // s3://bucket/recordings/...

    // Сохранить URL записи
    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();
});

Client-side запись через MediaRecorder

Когда нет серверной инфраструктуры — записываем в браузере:

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,  // 2.5 Mbps
      audioBitsPerSecond: 128_000,
    });

    this.mediaRecorder.ondataavailable = (e) => {
      if (e.data.size > 0) this.chunks.push(e.data);
    };

    this.mediaRecorder.start(1000);  // chunk каждую секунду
  }

  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);  // stream с камерой + экраном

// После звонка — сохранить на сервер
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 message:

// Ведущий начинает запись — уведомить всех
await room.localParticipant.publishData(
  new TextEncoder().encode(JSON.stringify({ type: 'recording_started' })),
  { reliable: true }
);

// У других участников
if (msg.type === 'recording_started') {
  toast.warning('Этот звонок записывается', { duration: Infinity, icon: '🔴' });
}

Сроки

Серверная запись через LiveKit Egress + S3 + webhooks — 2–3 дня. Client-side MediaRecorder + загрузка — 1–2 дня.