Code
·
67 lines
·
2578 bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67# Broadcast
A live video streaming application built with ASP.NET Core and vanilla JavaScript.
## What does it do?
Broadcast enables live video streaming to multiple viewers simultaneously through the browser:
- **Broadcaster:** Captures video and audio from the webcam/microphone and sends it to the server
- **Viewer:** Receives the live stream in real-time via Server-Sent Events (SSE) and plays it back
## Technology
- **Backend:** .NET 10.0 / ASP.NET Core Web API
- **Frontend:** Vanilla JavaScript (no frameworks)
- **Video:** WebM (VP8/VP9 + Opus audio), MediaRecorder API, Media Source Extensions (MSE)
- **Protocol:** HTTP + Server-Sent Events
## Project Structure
```
src/
├── Program.cs # Application entry point and configuration
├── Controllers/
│ └── StreamController.cs # API endpoints for broadcaster and viewers
├── Services/
│ └── BroadcastHub.cs # Central broadcast service (singleton)
├── Models/
│ └── VideoChunk.cs # Data model for video chunks
└── wwwroot/
└── index.html # Frontend UI
```
## API Endpoints
| Method | Endpoint | Description |
|--------|---------------------------|------------------------------------------|
| POST | `/api/stream/broadcast` | Sends a video chunk to the server |
| GET | `/api/stream/watch` | SSE stream for viewers |
| POST | `/api/stream/reset` | Resets the broadcast session |
| GET | `/api/stream/info` | MIME type and active status |
| GET | `/api/stream/status` | Broadcast status and viewer count |
## Architecture
### BroadcastHub (singleton)
- Manages the initialization segment (WebM EBML header) so late-joining viewers can start correctly
- Caches the most recent keyframe as a catch-up point for new viewers
- Gives each viewer their own bounded channel (max. 150 chunks ≈ 37 seconds buffer)
- Slow viewers skip frames instead of consuming unbounded memory (`DropOldest`)
### Frontend
- **Broadcaster side:** Manually parses WebM bytes to detect keyframes (EBML structure)
- **Viewer side:** Uses the Media Source Extensions API for smooth playback, manages the buffer automatically, and syncs to the live edge
## Running Locally
```bash
cd src
dotnet run
```
The application is available at:
- HTTPS: `https://localhost:57624`
- HTTP: `http://localhost:57625`
Open the URL in two browser tabs: one as broadcaster, one as viewer.