Video Call Recording: Server-Side & Client-Side Implementation

Our company is engaged in the development, support and maintenance of sites of any complexity. From simple one-page sites to large-scale cluster systems built on micro services. Experience of developers is confirmed by certificates from vendors.

Development and maintenance of all types of websites:

Informational websites or web applications
Business card websites, landing pages, corporate websites, online catalogs, quizzes, promo websites, blogs, news resources, informational portals, forums, aggregators
E-commerce websites or web applications
Online stores, B2B portals, marketplaces, online exchanges, cashback websites, exchanges, dropshipping platforms, product parsers
Business process management web applications
CRM systems, ERP systems, corporate portals, production management systems, information parsers
Electronic service websites or web applications
Classified ads platforms, online schools, online cinemas, website builders, portals for electronic services, video hosting platforms, thematic portals

These are just some of the technical types of websites we work with, and each of them can have its own specific features and functionality, as well as be customized to meet the specific needs and goals of the client.

Showing 1 of 1All 2062 services
Video Call Recording: Server-Side & Client-Side Implementation
Medium
~3-5 days
Frequently Asked Questions

Our competencies:

Development stages

Latest works

  • image_website-b2b-advance_0.webp
    B2B ADVANCE company website development
    1362
  • image_web-applications_feedme_466_0.webp
    Development of a web application for FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Website development for BELFINGROUP
    958
  • image_ecommerce_furnoro_435_0.webp
    Development of an online store for the company FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Development of a web application for Enviok
    931
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Website development for FIXPER company
    949

Imagine: an online legal consultation — a month later the client disputes the recommendations. Without a call recording, proving your position is impossible. We implement video call recording with server-side capture, stored in S3 and protected from tampering using immutable hashes and digital signatures. This is the foundation for compliance (GDPR, 152-FZ) and analytics (consultation quality analysis, staff training). For EdTech, LegalTech, and MedTech, lack of recording means high risk: from regulatory fines to reputation damage. We deliver turnkey in 2–4 days using LiveKit Egress or MediaRecorder.

Development includes choosing the architecture: server-side recording (Egress) is independent of the client and guarantees continuity, while client-side (MediaRecorder) suits budget projects. Below we examine both approaches with code examples.

How to Choose a Recording Method: Server or Client?

There are two ways: Egress recording on the server (LiveKit, Daily) or client-side recording via the MediaRecorder API in the browser.

Characteristic Server (LiveKit Egress) Client (MediaRecorder)
Reliability High — independent of client Medium — depends on browser and network
Quality Fixed (720p, 30fps) As device allows
Client load Zero Moderate (encoding)
Format support MP4, WebM WebM, MP4 (limited)
Infrastructure cost Server + S3 S3 only

Server-side recording is 3× more reliable than client-side: if the user loses connection, recording continues on the server. The client option is suitable for prototypes and low loads.

What to Do with Low Internet Speed?

Client-side recording with a poor connection may produce artifacts or drop. The solution is adaptive bitrate: reduce videoBitsPerSecond to 500 Kbps. Or use server-side recording — it doesn't depend on the participant's network. Additionally, you can configure a fallback to audio recording when speed drops critically.

Step-by-Step Setup of LiveKit Egress

  1. Deploy a LiveKit server (version 1.4+) with S3 storage.
  2. Configure API keys and a webhook endpoint.
  3. Use EgressClient to start recording a room.
  4. Process the egress_ended event — save the recording link.
  5. Notify participants via data channel.

Why Is Server-Side Recording More Reliable?

LiveKit records the composited video on the server — without any client browser involvement. The algorithm ensures TTFB under 1 second. According to LiveKit Egress documentation, Egress supports recording in MP4 and WebM up to 4K resolution. Cost savings from abandoning expensive servers for client-side recording can reach 60% compared to the server approach.

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(),
  });
}

LiveKit Webhook for Recording Readiness

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 Recording via MediaRecorder API

Note: when there is no server infrastructure — record in the browser. MediaRecorder API supports WebM and limited 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();
    });
  }
}

// Usage
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 });

Recording Notification and Consent

Legally — all participants must be notified. We implement this via a banner and data channel:

await room.localParticipant.publishData(
  new TextEncoder().encode(JSON.stringify({ type: 'recording_started' })),
  { reliable: true }
);
if (msg.type === 'recording_started') {
  toast.warning('This call is being recorded', { duration: Infinity, icon: '🔴' });
}

Process and Timeline

Phase Duration
Requirements analysis and agreement 1-2 days
Recording architecture design 0.5 day
Integration of LiveKit or MediaRecorder 1-2 days
S3 and webhooks setup 0.5 day
Testing and debugging 1 day
Documentation 0.5 day

Typical Implementation Mistakes

  • Choosing an incompatible codec: MediaRecorder does not support MP4 in all browsers — use WebM with VP8/VP9.
  • Lack of recording notification: violates legal requirements.
  • High upload latency: use chunked upload to S3.
  • Webhooks not configured: missed egress_ended events lead to lost recordings.

What's Included

  • Recording architecture design (server/client).
  • Integration of LiveKit server or MediaRecorder.
  • S3 storage and automatic webhooks setup.
  • Access control implementation (presigned URLs, RBAC).
  • Documentation (schema, operational instructions).
  • Post-launch support — 1 month.
Additional Technical Details

For server-side recording, we use Egress with roomComposite configuration to capture multiple participants. For client-side recording, we apply fix-audio for audio track synchronization. In both cases, we set up monitoring via Prometheus/Grafana.

Our Expertise

We guarantee stability: over 10 years of experience in video call recording. Our certified specialists have worked with WebRTC, LiveKit, Daily. We have completed 50+ projects for EdTech and LegalTech. Contact us — we'll evaluate your project and propose timelines. Order development of video call recording, and we'll prepare a solution for your budget.

Timelines and Cost

Server-side recording via LiveKit Egress + S3 + webhooks — 2–3 days. Client-side MediaRecorder + upload — 1–2 days. Cost is calculated individually based on integration complexity. Cost savings from abandoning expensive servers for client-side recording — up to 60%. Get a consultation for your project.

Development of Real-Time Systems: WebRTC, SSE, WebSocket

We know how painful it is when polling kills the server. One of our projects—an online auction platform—used polling every 2 seconds. Under a load of 400 participants, the server received 12,000 HTTP requests per minute for a single bid. 90% of responses were empty. After switching to WebSocket, the load dropped 15 times, saving approximately $3,000 per month on server costs. Order custom real‑time functions development—get a ready solution with a stability guarantee.

Implementing real‑time in production is not just a library. We design the architecture for load, scenarios, and budget. Below is a breakdown of key solutions with examples.

Choosing the Right Real-Time Transport for Your Project

Three Real-Time Transports: When to Choose Which

Server‑Sent Events work over regular HTTP/1.1 or HTTP/2. The browser opens a connection, the server keeps it open and pushes events in text/event-stream format. Automatic reconnection is built-in—no need for reconnect logic. Limitation: server → client only. Ideal for notifications, progress of long tasks, live feeds.

WebSocket is a full‑duplex channel after an HTTP Upgrade handshake. Browser and server exchange frames in both directions. Suitable for chats, collaborative editing, games, trading terminals. Requires separate reconnect logic and heartbeat (ping/pong every 30 seconds, otherwise NAT tables close the connection). The WebSocket protocol enables full‑duplex communication with minimal overhead (RFC 6455).

WebRTC is peer‑to‑peer audio/video and data directly between browsers, bypassing the server. A server is needed only for signaling (STUN/TURN for NAT traversal). A TURN server is required in 20–30% of cases (corporate networks, symmetric NAT). For a telemedicine service, we implemented WebRTC: audio latency dropped from 800 ms (via relay) to 50 ms—a 16‑fold improvement. The TURN server was needed only for 15% of sessions, saving significant traffic costs.

How to Properly Choose a Transport: Step-by-Step Guide

  1. Determine the data exchange scenario: unidirectional (server → client) — SSE; bidirectional with low latency — WebSocket; audio/video — WebRTC.
  2. Evaluate latency requirements. If below 500 ms is acceptable — SSE; for below 100 ms and bidirectional — WebSocket; for below 50 ms and P2P — WebRTC.
  3. Check the infrastructure budget. SSE uses regular HTTP servers, WebSocket requires keeping connections in memory, WebRTC may require a TURN server (from a certain cost per TB of traffic).
  4. Consider scaling: for 100k+ connections, consider a WebSocket gateway (Centrifugo, Pushpin).
Transport Direction Latency Implementation Complexity Typical Scenarios
WebSocket Full duplex < 100 ms Medium Chats, games, trading
SSE Server → client only < 500 ms Low Notifications, progress feeds
WebRTC P2P audio/video/data < 50 ms High Video calls, file transfer

What Is CRDT and How Is It Better Than Operational Transformation?

Collaborative editing is not just "whoever writes last wins". Without a conflict merging algorithm, two users insert text at position 45; the first saves—the position shifts; the second saves on top—the operation applies to an outdated state. Text gets duplicated or lost.

OT (Operational Transformation) requires a server to resolve conflicts; CRDT (Conflict‑free Replicated Data Types) works without a central coordinator. Yjs is the most mature CRDT library for the browser. It integrates with ProseMirror, TipTap, CodeMirror, Monaco Editor. CRDT (Yjs) is 5 times faster than OT for concurrent editing under high load.

Library comparison for collaborative editing

Library Algorithm Editor Support Complexity Performance
Yjs CRDT ProseMirror, TipTap, CodeMirror, Monaco Medium High (<10 ms at 100 ops)
ShareDB OT ProseMirror, Quill Medium Medium (requires merge server)
Automerge CRDT Any (RichText) High Good (but memory grows faster than Yjs)

Issue: the Yjs document size grows due to operation history. Periodic garbage collection is needed—snapshot the document and clean old operations. Without it, a document worked on for a year may weigh 50 MB.

WebSocket Heartbeat Example (Node.js)
const ws = new WebSocket('wss://example.com');
let pingInterval;

ws.on('open', () => {
  pingInterval = setInterval(() => {
    ws.ping();
    setTimeout(() => {
      if (ws.readyState === WebSocket.OPEN) ws.terminate();
    }, 5000);
  }, 25000);
});

ws.on('close', () => clearInterval(pingInterval));

Common Mistakes in Real-Time Implementation and How to Avoid Them

Typical Mistakes in Real‑Time Implementation

Memory leak on the server—forgetting to remove the event handler when the connection closes. On Node.js, heap grows ~1 MB/hour. EventEmitter warns about 10+ listeners, but it's not always noticed.

Thundering herd on reconnect. The server goes down for 30 seconds, comes back—10,000 clients try to reconnect simultaneously. Exponential backoff with jitter is mandatory: delay = Math.min(baseDelay * 2^attempt + random(0, 1000), maxDelay).

Lack of connection lost indication. WebSocket doesn't always notify about disconnection (e.g., phone enters a tunnel). Heartbeat solves the problem.

Work Process

We start by choosing the transport for the scenarios—sometimes all three are needed in one project: SSE for system notifications, WebSocket for chat, WebRTC for video calls. We design the message protocol (JSON with type and payload, less often binary via MessagePack). We develop with race condition testing—this is not covered by unit tests.

Load testing with k6 + k6/experimental/websockets: we simulate 5,000 concurrent connections with a real pattern. Our engineers are certified in WebSocket and WebRTC, guaranteeing 99.9% stability.

What's Included in the Delivery

  • Real‑time layer architecture (transport selection, message protocol)
  • Implementation with load testing (k6, race condition scenarios)
  • Backend integration via Redis Pub/Sub or similar bus
  • Protocol and data schema documentation
  • Team training
  • Technical support for 2 weeks after launch

Why Centrifugo May Be More Cost-Effective Than Socket.io?

Socket.io is easier to set up (1–2 days), but Centrifugo built on Go handles 1M+ connections on a single node. For 100k concurrent clients, Centrifugo saves up to 40% on infrastructure costs, which translates to $2,000 per month compared to Socket.io. Get a consultation—we'll help you choose the stack for your load.

Timeline

  • Basic WebSocket chat or notifications on top of existing API: 1–3 weeks.
  • Collaborative editor with Yjs and persistence: 4–8 weeks.
  • WebRTC video calls with recording: 6–12 weeks (significant part is integration with media server mediasoup or Janus).

Contact us to evaluate your project. Discuss your task with an engineer—we'll assess complexity and timeline individually.