███████████████████████████████████████████████████████████████████████████████ █▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█ █▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓█ █▓▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▓█ █▓▒░╔══════╦════════════════════════════════════════════════════════════╦═╗░▒▓█ █▓▒░║ BACK ║ ╚═╣░▒▓█ █▓▒░╠══════╝ Directed ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░╠═══════════════════════════╦═════════════╦═══════════════════════════╣░▒▓█ █▓▒░║ │ Project URL │ ║░▒▓█ █▓▒░║ └─────────────┘ ║░▒▓█ █▓▒░║ https://github.com/zosko/directed ║░▒▓█ █▓▒░╠══════════════════════════════╦══════╦═══════════════════════════════╣░▒▓█ █▓▒░║ │ What │ ║░▒▓█ █▓▒░║ └──────┘ ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░║ A real-time, multi-camera live streaming application built with ║░▒▓█ █▓▒░║ WebRTC and Socket.IO. A Director manages multiple camera feeds, ║░▒▓█ █▓▒░║ selects which one is broadcast, and Viewers watch the selected ║░▒▓█ █▓▒░║ stream live in their browser. ║░▒▓█ █▓▒░╠═══════════════════════════╦══════════════╦══════════════════════════╣░▒▓█ █▓▒░║ │ How It Works │ ║░▒▓█ █▓▒░║ └──────────────┘ ║░▒▓█ █▓▒░║ Cameraman(s) → Director (selects feed) → Viewers ║░▒▓█ █▓▒░║ - Each Cameraman joins a room and streams their camera via WebRTC ║░▒▓█ █▓▒░║ peer connection to the Director. ║░▒▓█ █▓▒░║ - The Director sees all camera feeds simultaneously and clicks one ║░▒▓█ █▓▒░║ to select it as the active broadcast. ║░▒▓█ █▓▒░║ - Viewers connect to the room and receive whichever feed the ║░▒▓█ █▓▒░║ Director has selected. When the Director switches cameras, viewers ║░▒▓█ █▓▒░║ are automatically redirected to the new feed. ║░▒▓█ █▓▒░╠═════════════════════════╦═══════════════════╦═══════════════════════╣░▒▓█ █▓▒░║ │ Project Structure │ ║░▒▓█ █▓▒░║ └───────────────────┘ ║░▒▓█ █▓▒░║ public/ ║░▒▓█ █▓▒░║ ├── index.html # Viewer page ║░▒▓█ █▓▒░║ ├── index.css # Viewer styles ║░▒▓█ █▓▒░║ ├── index.js # Viewer logic (WebRTC + Socket.IO) ║░▒▓█ █▓▒░║ ├── director.html # Director control panel ║░▒▓█ █▓▒░║ ├── director.css # Director styles ║░▒▓█ █▓▒░║ ├── director.js # Director logic (WebRTC + Socket.IO) ║░▒▓█ █▓▒░║ ├── cameraman.html # Cameraman page ║░▒▓█ █▓▒░║ ├── cameraman.css # Cameraman styles ║░▒▓█ █▓▒░║ └── cameraman.js # Cameraman logic (WebRTC + Socket.IO) ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░║ A Node.js server (not included here) is required to serve the files ║░▒▓█ █▓▒░║ and handle Socket.IO signaling. ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░╠═══════════════════════════╦══════════╦══════════════════════════════╣░▒▓█ █▓▒░║ │ Features │ ║░▒▓█ █▓▒░║ └──────────┘ ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░║ - Multi-camera support — unlimited cameramen per room ║░▒▓█ █▓▒░║ - Instant camera switching — director switches feeds with ║░▒▓█ █▓▒░║ one click; viewers follow automatically ║░▒▓█ █▓▒░║ - Mobile-first cameraman UI — front/back camera toggle, ║░▒▓█ █▓▒░║ wake lock, 1:1 crop preview ║░▒▓█ █▓▒░║ - Resilient connections — automatic reconnection with exponential ║░▒▓█ █▓▒░║ backoff, TURN fallback ║░▒▓█ █▓▒░║ - Live room discovery — viewers see all active rooms without ║░▒▓█ █▓▒░║ needing a room code ║░▒▓█ █▓▒░║ - Real-time stats — director sees connected cameraman and viewer ║░▒▓█ █▓▒░║ counts live ║░▒▓█ █▓▒░║ ║░▒▓█ █▓▒░╚═════════════════════════════════════════════════════════════════════╝░▒▓█ █▓▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▒▓█ █▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓█ █▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█ ███████████████████████████████████████████████████████████████████████████████