🎙️ PodStudio

Professional Remote Video & Podcast Recording Studio in the Browser

Lossless multi-peer WebRTC recording, passwordless guest verification, dynamic canvas compositing, and automated cloud publishing.

---

🌟 Overview

PodStudio is a full-stack, browser-native recording studio inspired by Riverside.fm. It empowers creators to host high-fidelity remote recording sessions with guests across the globe without quality degradation or complex software setups.

With native Multi-Peer WebRTC Mesh signaling, lossless multi-track canvas compositing, passwordless Email OTP guest access, and automatic cloud archiving, PodStudio streamlines the entire lifecycle from live conversation to ready-to-publish media.

---

📸 Product Preview & Screenshots

1. 🚀 Landing Page & Guest Verification

Modern landing portal introducing PodStudio capabilities alongside a frictionless direct room-join interface.

2. 🔐 Authentication Experience

Secure authentication powered by Clerk and native JWT sessions with isolated security boundaries.

3. 📊 Studio Dashboard & Recording Library

Creator workspace to create instant studio rooms, manage invite links, and review uploaded sessions with duration and metadata.

4. 🎬 Live Studio Recording Room

High-definition live stage with targeted multi-peer video feeds, dynamic grid layouts (Solo, Split, PiP, Group), Web Audio mixing, and Post-Take Cloud Hub.

---

✨ Key Features

📡 Multi-Peer WebRTC Mesh

• Targeted Signaling: Room-wide broadcast cross-talk eliminated via targeted to/from socket routing.
• ICE Candidate Queuing: Early candidate arrivals before setRemoteDescription are buffered and automatically flushed, avoiding dropped connections.
• Dynamic Peer Maps: Tracks RTCPeerConnection instances per participant with isolated state updates.

✉️ Passwordless Guest Join (Email OTP)

• Zero-Account Access: Guests enter the room code, receive a time-limited 6-digit cryptographic OTP via email, and join the session directly without registration.
• Scoped Permissions: Guests enjoy full video/audio interaction while studio recording controls and cloud uploads remain securely host-gated.

🎥 Lossless Multi-Stream Compositing

• Real-Time Canvas Compositing: Composites local and all remote video tracks into an adaptive HD canvas grid (1-peer, 2-peer side-by-side, 4-peer 2x2 grid, 6-peer 3x2 grid).
• Web Audio Multi-Track Mixing: Automatically mixes Opus audio tracks from all connected peers into a single lossless output.
• Dual Export: Download local high-bitrate WebM or upload directly to your Cloudinary media library.

🛡️ Host Disconnect Grace & Auto-Save

• 15-Second Grace Timer: Protects studio sessions from accidental tab reloads, browser crashes, or transient network blips.
• Auto-Save on Termination: If a host leaves with an active recording take, the system finalizes and automatically uploads the session to cloud storage.

🌐 STUN & TURN Traversal

• Integrated Google & Twilio STUN fallback servers with configurable TURN relay support (VITE_TURN_URL) for seamless connections across symmetric corporate NATs and firewalls.

---

🏗️ Architecture

flowchart TD
    subgraph Client ["Client (React + Vite)"]
        UI[Studio Stage & Dock]
        WebRTC[useWebRTC Multi-Peer Hook]
        Rec[useRecording Canvas & Audio Mixer]
        Sock[useSocket Auth & Signaling]
    end

    subgraph Server ["Server (Node.js + Express)"]
        API[Express REST API]
        SIO[Socket.IO Signaling & Room Engine]
        Prisma[Prisma ORM Client]
        Mailer[Nodemailer / SMTP Email Service]
    end

    subgraph Cloud ["External Cloud Services"]
        PG[(PostgreSQL Database)]
        Cloudinary[(Cloudinary Media Storage)]
        STUN[Google / Twilio STUN & TURN]
    end

    UI --> WebRTC
    UI --> Rec
    UI --> Sock
    Sock <-->|Signaling & Room State| SIO
    WebRTC <-->|P2P Audio/Video Streams| WebRTC
    WebRTC -.->|NAT Traversal| STUN
    Rec -->|Upload Recording Blob| API
    API --> Prisma --> PG
    API --> Mailer
    API --> Cloudinary

Loading

---

🛠️ Tech Stack

Frontend

• Framework: React 19 + TypeScript + Vite
• Routing & State: React Router 7, TanStack React Query
• Styling & Motion: Vanilla CSS tokens, Framer Motion
• Media & Realtime: WebRTC (RTCPeerConnection), Web Audio API (AudioContext), Canvas API, socket.io-client
• Auth: Clerk SDK + Guest Session Tokens

Backend

• Runtime: Node.js 20+ & Express
• Realtime Engine: Socket.IO with JWT Handshake Auth
• Database & ORM: PostgreSQL + Prisma ORM
• Media Storage: Cloudinary SDK + Multer
• Email Service: Nodemailer (SMTP / Gmail / Resend)
• Security: bcryptjs for OTP hashing, isolated JWT scopes

---

🚀 Getting Started

Prerequisites

• Node.js: v20.x or higher
• npm: v10.x or higher
• PostgreSQL: Local instance or hosted (Supabase, Neon, Railway, Render)
• Cloudinary Account: For cloud recording storage

---

1. Clone the Repository

git clone https://github.com/Shivam000189/podstudio.git
cd Riverside

---

2. Configure Environment Variables

Server Configuration (server/.env)

Create server/.env based on server/.env.example:

PORT=4000
NODE_ENV=development

# PostgreSQL Database Connection URL
DATABASE_URL="postgresql://username:password@localhost:5432/podstudio?schema=public"

# JWT Secrets (min 32 chars)
JWT_SECRET="your-secure-random-jwt-secret-min-32-characters"
GUEST_JWT_SECRET="your-guest-jwt-secret-min-32-characters"

# Allowed Frontend Origins (Comma-separated)
CLIENT_URL="http://localhost:5173"

# Cloudinary Storage
CLOUDINARY_CLOUD_NAME="your_cloud_name"
CLOUDINARY_API_KEY="your_cloudinary_api_key"
CLOUDINARY_API_SECRET="your_cloudinary_api_secret"

# Optional Clerk Authentication Keys
CLERK_PUBLISHABLE_KEY="pk_test_your_clerk_key"
CLERK_SECRET_KEY="sk_test_your_clerk_secret_key"

# Email SMTP for Guest OTP (Leave empty to log OTPs to console in dev)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="your-email@gmail.com"
SMTP_PASS="your-app-password"
SMTP_FROM="PodStudio <noreply@podstudio.app>"

OTP_EXPIRY_MINUTES=5
OTP_MAX_ATTEMPTS=5

Client Configuration (client/.env)

Create client/.env based on client/.env.example:

# Backend API & Socket URLs
VITE_API_URL=http://localhost:4000/api
VITE_SOCKET_URL=http://localhost:4000

# Clerk Authentication Publishable Key
VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_clerk_key

# Optional WebRTC TURN Server (Metered.ca / Twilio / Xirsys)
VITE_TURN_URL=
VITE_TURN_USERNAME=
VITE_TURN_CREDENTIAL=

---

3. Install Dependencies & Initialize Database

# Install Server Dependencies & Generate Prisma Client
cd server
npm install
npx prisma generate
npx prisma db push

# Install Client Dependencies
cd ../client
npm install

---

4. Run Development Servers

Run backend and frontend in separate terminals:

# Terminal 1 — Start Backend API & Socket Server (Port 4000)
cd server
npm run dev

# Terminal 2 — Start Frontend Vite App (Port 5173)
cd client
npm run dev

Open http://localhost:5173 in your browser.

---

📦 Production Build & Deployment

Build for Production

# Build Client
npm run build --prefix client

# Build Server
npm run build --prefix server

Docker Deployment

Run the full-stack system locally via Docker Compose:

docker-compose up --build

---

📂 Project Structure

Riverside/
├── client/                     # Frontend Application (React + Vite)
│   ├── src/
│   │   ├── api/                # Axios API clients & upload endpoints
│   │   ├── components/         # VideoPlayer, Navigation, Modals
│   │   ├── hooks/              # useWebRTC, useRecording, useSocket, useAuth
│   │   ├── pages/              # Landing, Home Dashboard, Studio Room, Auth
│   │   └── services/           # Socket.IO connection factory
│   └── public/                 # Static assets & illustrations
│
├── server/                     # Backend API & Realtime Server
│   ├── prisma/                 # Prisma database schema & migrations
│   ├── src/
│   │   ├── controllers/        # Room, Recording, OTP, and Auth controllers
│   │   ├── middlewares/        # Auth, Guest, and Error middlewares
│   │   ├── routes/             # REST route declarations
│   │   ├── services/           # Email OTP, Cloudinary, Token services
│   │   └── server.ts           # Express setup, Socket.IO & WebRTC signaling
│
├── docs/
│   └── screenshots/            # UI screenshots & preview assets
├── docker-compose.yml          # Multi-container orchestration
└── DEPLOYMENT.md               # Step-by-step production deployment guide

---

📜 License

This project is licensed under the MIT License.

---

Built with ❤️ by Shivam