FluxyStream — Live Streaming & Broadcast

Panoramica

FluxyStream è il modulo di live broadcasting integrato in FluxyChat. Combina video streaming WebRTC/RTMP → Cloudflare Stream → HLS, chat in tempo reale, moderazione AI, e feature interattive per il pubblico.

Architettura

OBS / WebRTC camera → Cloudflare Stream (RTMP/WHIP ingest) → HLS adaptive bitrate
                                ↓
                    Cloudflare D1 (metadata, chat, viewers)
                                ↓
                    Next.js Dashboard (viewer + broadcaster UI)
                                ↓
                    FluxyChat SDK (interactive features)

File principali

Feature implementate

Feature base (ROADMAP)

Feature innovative (ROADMAP)

API endpoints

Eventi

• POST /api/live/events — Crea evento
• GET /api/live/events — Lista eventi
• GET /api/live/events/:id — Dettaglio evento
• PATCH /api/live/events/:id — Aggiorna evento (status, title, etc.)
• GET /api/live/stats — Stats globali

Cloudflare Stream

• POST /api/live/events/:id/provision — Crea live input (RTMP/WHIP)
• DELETE /api/live/events/:id/input — Elimina live input

Viewer

• POST /api/live/events/:id/join — Join (propaga auth.userId)
• POST /api/live/events/:id/leave — Leave
• GET /api/live/events/:id/viewers — Lista viewer attivi
• GET /api/live/events/:id/viewer-count — Count viewer attivi
• GET /api/live/events/:id/peak — Peak viewers
• POST /api/live/events/:id/peak — Aggiorna peak
• POST /api/live/events/:id/ban — Banna viewer
• POST /api/live/events/:id/mute — Mute/unmute viewer

Chat

• POST /api/live/events/:id/messages — Invia messaggio
• GET /api/live/events/:id/messages — Lista messaggi
• POST /api/live/events/:id/rules — Upsert chat rules
• GET /api/live/events/:id/rules — Get chat rules

Pinning

• POST /api/live/events/:id/pin — Pin messaggio
• POST /api/live/events/:id/unpin — Unpin
• GET /api/live/events/:id/pinned — Lista pinned

Analytics

• POST /api/live/events/:id/analytics — Registra bucket
• GET /api/live/events/:id/analytics — Query analytics

Multi-angle

• GET /api/live/events/:id/angles — Lista camera angles
• POST /api/live/events/:id/angles — Aggiungi angle

Highlights

• GET /api/live/events/:id/highlights — Lista highlights
• POST /api/live/events/:id/highlights — Crea highlight

Live Commerce

• GET /api/live/events/:id/products — Lista prodotti
• POST /api/live/events/:id/products — Aggiungi prodotto

Gifts

• GET /api/live/events/:id/gifts — Lista gifts inviati
• POST /api/live/events/:id/gifts — Invia gift

Sentiment

• GET /api/live/events/:id/sentiment — Query sentiment data

WebRTC

• GET /api/live/turn-credentials — Credenziali TURN ephemeral (TTL 1h)

Configurazione

Variabili ambiente Worker

# Cloudflare Stream
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_STREAM_API_TOKEN=your_api_token
CLOUDFLARE_STREAM_CUSTOMER_CODE=your_customer_code

# TURN relay (opzionale per dev, obbligatorio per produzione WebRTC)
TURN_SECRET=your_hmac_secret          # Coturn REST API pattern
TURN_SERVERS=turn:turn.example.com:3478,turns:turn.example.com:5349
# OR
TURN_API_URL=https://api.metered.live/api/turn  # Metered.ca
TURN_API_KEY=your_metered_api_key

Come modificare

Aggiungere un nuovo gift type

Modifica l'array giftsCatalog in packages/sdk/src/fluxy-stream.ts:

{ id: "g_new", type: "new", label: "New Gift", iconEmoji: "🎁", price: 1000, currency: "usd", animation: "burst", color: "#ff00ff" }

Cambiare colori degli status

Modifica statusColor() in apps/dashboard/app/stream/page.tsx.

Aggiungere una camera angle predefinita

Chiama stream.addAngle(label, streamUrl, isDefault) nel seed di stream/demo/page.tsx.

Cambiare il TURN provider

Imposta TURN_SECRET + TURN_SERVERS per Coturn, oppure TURN_API_URL + TURN_API_KEY per Metered.ca.