Skip to content

Multimedia Integrator (TV, Radio, YouTube)


About This Project

This dashboard is a livestream involving channels related to three areas of my personal and professional life. It uses a hybrid playback engine to aggregate global streams that are otherwise siloed across different platforms.

  • Science & Tech (Career): High-level engineering and data documentaries from NHK World Japan and ABC News, reflecting my work in Data Engineering and AI.
  • Atlanta, GA (Home): Real-time local news and weather from Fox 5 Atlanta.
  • The Philippines (Heritage): Trending Original Pilipino Music (OPM) from Wish 107.5.
  • Vassar College (Alma Mater): Independent campus radio from WVKR 91.3.

Technical Implementation

This is a serverless, client-side application that bridges the gap between modern web and legacy broadcast protocols.

1. Hybrid Streaming Architecture

The player dynamically switches between two distinct streaming protocols based on the source:

  • YouTube Interface: The player integrates with YouTube's embed interface to render modern web channels like ABC and Fox 5 livestreams directly. This ensures stability and offloads bandwidth to YouTube's infrastructure.
  • HTTP Live Streaming (HLS): The player integrates with hls.js to render legacy broadcast networks like PBS and NHK. This supports Chrome/Firefox users who might not be using browsers that natively supports .m3u8 like Safari.

2. Off-loading Resources from my Server to the Client

A major challenge in building a "Web TV" is the browser's Same-Origin Policy.

  • The Problem: Most TV stations block third-party sites (like this portfolio) from reading the video data, resulting in network errors.
  • The Solution: The channels selected here fit my personal interests and emit Permissive CORS Headers (Access-Control-Allow-Origin: *). This allows the stream to be rendered directly on the client side without requiring a proxy server or backend middleware.