Real-Time Match Streaming & Replay Platform

Indoor football venues wanted to offer a broadcast-style match experience without building a broadcast team around every game. The challenge was not just to stream video, but to synchronize live scoring, match state, overlays, replays, and mobile playback on inexpensive hardware, while keeping the system reliable enough to run during real matches.

I designed and built Sportbak as a distributed real-time platform that turns an IP camera feed and a scorer interface into a live match broadcast with dynamic overlays, WebRTC playback, and automatic replay generation.

What It Does

Sportbak lets operators run a match from a dedicated scoring interface while viewers watch a live stream directly from mobile browsers. Goals, periods, pauses, timers, team names, and match events are propagated across the system in real time and rendered directly into the video stream.

When a goal is recorded, the platform can automatically extract the relevant moment as a replay clip, removing the need for manual post-production.

Key Outcomes

• Delivered sub-second synchronization between the scorer interface, video stream, and viewer devices
• Rendered live score, team, and clock overlays directly into a 1080p video pipeline
• Enabled browser-based low-latency playback through WebRTC
• Generated replay clips automatically from match events and timestamps
• Ran on commodity hardware using IP cameras and embedded devices
• Isolated video, orchestration, and broadcast services so failures could be recovered without taking the whole match system down

Architecture

Sportbak is built as a set of loosely coupled services around a shared match state model.

Video Pipeline

A Python and GStreamer service captures the camera feed, performs hardware-accelerated encoding with VAAPI, and renders match overlays directly into the video stream. Overlay state is updated live through bindings driven by match events.

Match Orchestration

A Node.js service owns the match lifecycle: periods, goals, timer state, pauses, and event timestamps. It acts as the source of truth for match progression and broadcasts state changes to the rest of the system.

Real-Time Broadcast Layer

Redis, MongoDB, WebSockets, and Socket.io distribute match state and metadata across operator devices, viewer clients, and backend services.

Client Applications

Angular, Ionic, and Capacitor power both the scoring interface and the viewer experience. Operators can control matches in real time, while viewers receive synchronized metadata and WebRTC playback in the browser.

Technical Highlights

• Designed the service boundaries for a real-time video and scoring system
• Built a cross-service WebSocket protocol between Python and Node.js components
• Implemented live overlay rendering inside a GStreamer pipeline
• Built the WebRTC signaling flow using SDP and ICE over WebSocket
• Connected match events to automatic replay extraction
• Designed the system so capture, orchestration, and client delivery could fail independently

My Role

I owned the system end to end: architecture, video pipeline, streaming stack, real-time communication, match orchestration, and both operator and viewer applications.