🎥

Livestreaming

WebRTC + HLS fallback, state machine, Socket.IO realtime events, consent logging en creator tools

Fastify 5 API PostgreSQL 16 + Drizzle ORM WebRTC + HLS Socket.IO Realtime React 19 + TanStack Query v5

🛠️ Tech Stack

⚡

Backend

Fastify 5 — stream lifecycle routes, Lucia Auth middleware

🗄️

Database

PostgreSQL 16 + Drizzle ORM — streams, consent, viewer events

📡

Transport

WebRTC primair (<1s latency) · HLS fallback voor viewers (3–5s buffer)

🔌

Realtime

Socket.IO — viewer count, chat, tips, gift events tijdens stream

📡 Stream Protocol

TeezU gebruikt WebRTC als primair protocol voor minimale latency. Bij browserincompatibiliteit of viewer-only modus schakelt het systeem automatisch over op HLS.

🔵

WebRTC

Primair
  • ✓ <1 seconde latency
  • ✓ Peer-to-peer via STUN/TURN
  • ✓ Adaptive bitrate (300kbps–8Mbps)
  • ✓ Bidirectioneel (creator + co-host)
  • ✓ MediaStream API voor camera/mic
🟠

HLS Fallback

Viewer fallback
  • ✓ 3–5 seconden buffer
  • ✓ Universeel browsercompatibel
  • ✓ CDN-distributie via edge nodes
  • ✓ Auto-quality switching
  • ✓ RTMP → HLS transcodering via FFmpeg

Video Kwaliteitsinstellingen

📺
720p
1.5–3 Mbps · HD
Standaard
🖥️
1080p
3–6 Mbps · Full HD
Aanbevolen
✨
4K
15–25 Mbps · Ultra HD
Creator+ only

🔄 Stream State Machine

Elke stream doorloopt een formele state machine. Overgangen worden gevalideerd op de Fastify 5 backend — ongeldige overgangen retourneren HTTP 422. Alle Freeze & Panic events worden ook gelogd in de consent-tabel.

⚪ idle
→
🟢 live
→
🔵 frozen
→
🔴 panic
→
⚫ ended
⚪

idle

Stream aangemaakt, nog niet live. Creator kan instellingen aanpassen.

🟢

live

Stream actief. Viewers kunnen joinen, chatten, tippen.

🔵

frozen

Video gepauzeerd (Freeze & Reveal). Gelogd in consent_log.

🔴

panic

Noodstop. Stream direct offline, moderator alert, consent gelogd.

⚫

ended

Stream beëindigd. Recording verwerkt, statistieken opgeslagen.

🛡️ Consent Logging

Alle Freeze & Reveal acties worden onveranderlijk gelogd naar de consent_log tabel in PostgreSQL 16. Dit is een compliance-vereiste.

export const consentLog = pgTable('consent_log', {
  id: uuid().primaryKey().defaultRandom(),
  streamId: uuid().references(() => streams.id),
  creatorId: uuid().references(() => users.id),
  action: text(), // 'freeze' | 'reveal' | 'panic'
  triggeredAt: timestamp().defaultNow(),
  ipHash: text(), // geanonimiseerd IP-hash
  metadata: jsonb(),
});

✨ Features

🎬 Creator Features

▶️
Start / Stop

One-click stream starten en stoppen. Bevestigingsdialoog bij stoppen.

🎥
Kwaliteitsinstellingen

720p / 1080p / 4K — instelbaar vóór en tijdens stream

📅
Stream Plannen

Scheduled streams — volgers krijgen automatisch een notificatie

⏺️
Recording

Automatische opname — beschikbaar als VOD na afloop

❄️
Freeze & Reveal

Beeld bevriezen voor tip-incentive. Consent gelogd. Zone 5 Creator Tools.

🚨
Panic Knop

Noodstop met bevestigingsmodal. Stream direct offline + moderator alert.

👁️ Viewer Features

▶️
Kijken

WebRTC <1s join — geen buffering. HLS fallback beschikbaar.

💎
Tippen

Token tips sturen — verschijnt real-time als stream overlay

🎁
Gifts sturen

Animated gifts met audio — Rose (10t), Diamond (50t), Crown (100t), Rocket (500t)

💬
Live Chat

Socket.IO realtime chat — emoji reactions, pinned berichten

🎭
Emoji Reactions

Floating emoji overlay — gebroadcast naar alle viewers via Socket.IO

🔓
Content Unlocken

Betaal tokens om vergrendeld stream-content vrij te spelen (Freeze & Reveal)

🔌 Socket.IO Realtime Events

Socket.IO verzorgt alle realtime communicatie tijdens een stream. De Fastify 5 server host de Socket.IO instantie via @fastify/socket-io.

Server → Client events

stream:viewer_count

Bijgewerkt viewer-aantal elke 5 seconden

stream:chat_message

Nieuw chatbericht van een viewer

stream:tip_received

Tip event — overlay animatie triggeren

stream:gift_sent

Animated gift broadcast naar alle viewers

stream:state_changed

State machine overgang (live → frozen → panic)

Client → Server events

stream:join

Viewer joint de stream — WebRTC offer sturen

stream:send_chat

Chatbericht sturen (rate-limited: 3/sec)

stream:react

Emoji reaction sturen

stream:leave

Viewer verlaat de stream — viewer count bijwerken

🔌 Fastify 5 API Endpoints

Alle routes zijn beveiligd via Lucia Auth sessie middleware. Database operaties via Drizzle ORM op PostgreSQL 16.

POST /streams creator role

Maak een nieuwe stream aan (state: idle). Geeft stream-ID en WebRTC signaling tokens terug.

// Request body
{ "title": "Zaterdag Evening Live", "quality": "1080p", "scheduledAt": null }

// Response 201
{ "streamId": "strm_abc123", "state": "idle", "rtcToken": "eyJ...", "hlsUrl": "https://cdn.teezu.com/strm_abc123/index.m3u8" }
PATCH /streams/:id/state creator role

Verander de staat van de stream. Invalide overgangen worden geblokkeerd (HTTP 422). Freeze/Panic wordt gelogd in consent_log.

// Request body — start stream
{ "state": "live" }

// Request body — freeze (Freeze & Reveal)
{ "state": "frozen", "revealThreshold": 500 } // tokens needed

// Response 200
{ "streamId": "strm_abc123", "state": "frozen", "consentLogId": "clg_xyz" }
GET /streams/:id/viewers

Haal de actieve viewer-lijst en statistieken op voor een stream.

// Response 200
{
  "viewerCount": 243,
  "peakViewers": 312,
  "viewers": [{ "userId": "usr_1", "joinedAt": "2026-04-05T20:12:00Z", "isSubscriber": true }],
  "totalTipsEarned": 4820 // tokens
}