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

Запис відеозвонків на веб-сайті

Запис звонків потрібен для навчальних платформ, юридично значущих консультацій, корпоративних зустрічей. Реалізуються двома способами: 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: '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();
});

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,
      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 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 дні.