IPTV player not playing streams in React + HLS.js + Supabase setup

[syncstudiobr]

Trouble playing IPTV streams in React + HLS.js + Supabase

Hi everyone,

I’m building a live TV / IPTV web app with React + TypeScript + Supabase, and I’m having trouble getting some streams to play reliably in the browser.

Stack

Frontend

• React 18
• TypeScript
• Vite
• Tailwind CSS
• shadcn/ui
• React Router
• React Query
• HLS.js
• Framer Motion / Recharts

Backend

• Supabase Auth
• PostgreSQL
• Supabase Edge Functions
• RLS
• Realtime / Presence

Current setup

I currently use:

• an M3U parser
• a stream proxy
• a smart loader
• EPG fetch functions

Problem

Some streams simply won’t start playing in the web player.

What I’ve found so far:

• .ts playback is inconsistent in browsers
• my Supabase Edge Function proxy may be getting blocked by upstream servers
• direct playback from the browser sometimes works better than going through the proxy
• some failures may also be related to CORS or source-side restrictions

Questions

• Is HLS.js the right tool for this, or should I be using a different player?
• What is the best way to handle .ts streams in web apps?
• Is using Supabase Edge Functions as a stream proxy a bad idea for this use case?
• Would the best approach be:
  • try direct playback first
  • use proxy only as fallback
  • keep Supabase focused on auth, DB, and app logic?

What I need

I’d really appreciate advice from anyone who has built a similar live-stream / IPTV-style app.

At this point I’m trying to understand whether the main issue is:

• the player
• the stream format
• the proxy
• CORS
• or IP blocking from source servers

Any recommendations on player choice, architecture, or best practices would help a lot.

Thanks.

[freearhey]

Can you provide some examples of the links you use to test your app?