# How to Vibe Code Your Own Whereby (and Stop Paying for It)

> Secure, customizable & reliable WebRTC Video Calls

- Site: https://whereby.com
- Category: Video Conferencing & Developer APIs
- Platforms: Web app
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

You can build a personal clone of Whereby's room management and embedded video interface by leaning on an open-source or managed WebRTC layer, though building the SFU media routing from scratch is impractical.

Writing a custom SFU in C++ or Go to handle multi-participant WebRTC routing, simulcast, and packet loss is a massive multi-month engineering hurdle. However, a solo developer using an established media infrastructure provider like LiveKit combined with Next.js can successfully construct a fully working video room platform and developer API wrapper in a couple of weeks. The primary friction points are ICE/TURN server configuration behind corporate firewalls and multi-stream grid state management on mobile browsers.

### What you can't replicate

- Global multi-region proprietary video routing mesh with guaranteed 99.9% uptime
- Pre-existing HIPAA and ISO 27001 compliance standing
- Enterprise developer ecosystem and large-scale customer trust

## What it does

Whereby provides browser-based video conferencing and developer video call APIs for embedded web apps without required downloads or guest logins.

### Core features

- Instant video call room generation
- WebRTC peer and SFU group media routing
- Participant grid layout and active speaker detection
- Screen sharing and stream management
- Real-time text chat alongside video
- Device permission checks (mic/cam toggles)
- Developer API for programmatic room creation
- Embeddable video UI component / SDK

## The business

### Pricing

- Free: $0/mo
- Pro: $10.99/mo
- Business: $13.99/mo per host

### Funding

$12M raised.
- Series A
Investors: SaaStr Fund, Point Nine, Telenor

Founded 2013.
Team size: 48-55.

## The hard parts

- Implementing or managing a production WebRTC Selective Forwarding Unit (SFU) for multi-participant sync
- Handling global UDP packet routing, jitter buffers, and NAT traversal across strict firewalls
- Synchronizing real-time presence, chat messages, and participant state without race conditions
- Managing media track constraints, background audio cancellation, and hardware encoder limits across mobile browsers

## How to vibe code Whereby

### Prerequisites

- Node.js (free): Required for running the Next.js full-stack framework and building developer tools.
- GitHub (free): Source control and seamless deployments.
- LiveKit Cloud account (free tier available): Managed WebRTC infrastructure to handle SFU video routing without building custom media servers.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding full-stack features, managing WebRTC client hooks, and debugging state synchronization.
- Cursor: IDE workflow for fine-tuning video grid layouts, tailwind styles, and React component UI states.

### Stack

- Frontend: Next.js
- Backend: Next.js API Routes / Server Actions
- Database: Turso
- Auth: better-auth
- Payments: none
- Other: LiveKit WebRTC SDK, Tailwind CSS, Lucide React

### Hosting

- Vercel (Hosting the Next.js frontend and API server routes): $0/mo
- Turso (Serverless SQLite database for rooms, users, and API tokens): $0/mo

### Build guide

1. **Project Scaffolding & Database Setup** — Initialize the Next.js project with Tailwind CSS, configure Turso database schema for rooms, hosts, and embedded API tokens, and establish better-auth.

```
Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Configure better-auth with email/password authentication. Set up a Turso SQLite database client supporting tables for users, rooms (with unique slugs, host_id, created_at, settings JSON), and embedded API keys (key_id, secret, user_id). Create a clean dashboard landing page with light/dark styling using Lucide icons. Ensure all environment variables are documented in a .env.example file.
```

2. **Room Management & Instant Link Generation** — Build the host dashboard to create permanent and instant room URLs, configure room settings, and view active room links.

```
Build a dashboard page in the Next.js app where authenticated hosts can create, list, and delete custom room URLs (e.g., /room/custom-name). Implement API endpoints for generating room tokens and storing room metadata in Turso. Include a modal for room settings (waiting room toggle, chat enabled, max participants). Add a clean clipboard-copy interaction for sharing room URLs with guests who need to join without logging in.
```

3. **WebRTC Integration with LiveKit** — Integrate the LiveKit WebRTC SDK to generate connection tokens server-side and build the core video room interface.

```
Implement a server-side API route that generates LiveKit room access tokens given a room name and participant identity. Create the video room view page at app/room/[slug]/page.tsx. Use LiveKit client SDK hooks to connect to the room, handle local video/audio publication, track remote participants joining and leaving, and render participant tiles in a responsive grid layout.
```

4. **Call Controls & Media Management** — Add interactive video call controls for muting audio, turning off video, sharing screens, and opening the real-time chat drawer.

```
Enhance the video room UI with an interactive floating control bar at the bottom: microphone mute/unmute toggle, camera on/off toggle, screen sharing toggle using browser screen capture APIs, and a participants list drawer. Add a real-time text chat sidebar panel using LiveKit data channels or internal websocket events so participants can send text messages to everyone in the room without page reloads.
```

5. **Embedded API & SDK Wrapper** — Create an API endpoint and a reusable iframe/web component wrapper allowing third-party apps to programmatically create rooms and embed the call interface.

```
Build a developer API section in the dashboard where users can generate API keys. Create a public API endpoint /api/v1/rooms that accepts POST requests authenticated via API key headers to programmatically create rooms and return join URLs. Build an embeddable React component wrapper (<WherebyEmbed roomUrl={...} />) that renders the video call interface inside an iframe with postMessage bridge support for custom branding configuration.
```

6. **Polish, Error States & Deployment** — Handle browser media permission denial edge cases, loading spinners, mobile responsive tweaks, and deploy to Vercel.

```
Audit all video room and dashboard components for robust error handling. Handle browser media permission denial gracefully with clear user instructions. Add loading skeletons for dashboard lists and smooth transitions for modal dialogs. Verify mobile browser compatibility for WebRTC streams. Prepare the codebase for deployment on Vercel and verify environment variable bindings for Turso and LiveKit.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain name: $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby Hosting: $0/mo
- Turso Database Free Tier: $0/mo
- LiveKit Cloud Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $10.99/mo (Pro) or usage-based Embedded
- Build time: 35-50 hours
- AI tool credits: $20/mo (Claude Pro / Cursor)
- Break-even: Free forever for personal use

## Sources

- [Whereby Official Website](https://whereby.com)
- [Whereby Embedded Pricing](https://whereby.com/information/embedded-pricing)
- [Whereby Meetings Pricing](https://whereby.com/information/meetings-pricing)
- [Tracxn Whereby Profile](https://tracxn.com/d/companies/whereby)