How to play an IPTV live stream without an extension using Next.js?

Question

I'm currently working on a Next.js project where I'm trying to create a video player to stream live IPTV feeds. The URLs of the streams I'm working with don't have an extension and don't use a manifest.

As an example, a typical stream URL looks like this: http://providerurl.com:80/00909434/0940934094/131362 (no extension at the end).

I've tried using several libraries like react-player, video.js, plyr, and HLS.js, but none of them have been able to play these types of URLs. I suspect this could be because the streams are in the mp2t format.

Therefore, I've decided to use mux.js to transmux the live TV stream into a readable format. To retrieve the final URL of the stream and avoid CORS issues, I've created a custom proxy using axios to handle the redirection.

Here's an example of my proxy code:

import axios from 'axios';

export default async function handler(req, res) {
  const response = await axios.get(req.query.url, {
    maxRedirects: 0, // Do not automatically follow redirects
    validateStatus: function (status) {
      return status === 302; // Only resolve promises for 302 redirects
    },
  });

  if (response.status === 302) {
    res.status(200).json({ url: response.headers.location });
  } else {
    res.status(400).json({ error: 'No redirect found' });
  }
}

Next, I've created a video player using React and mux.js. Here's a snippet of my video player code:

const VideoPlayer = () => {
  const { isLoading, itemPlayed } = useContext(AppContext);
  const videoRef = useRef(null);
  const [transmuxer, setTransmuxer] = useState(null);

  // ...

  useEffect(() => {
    if (itemPlayed && videoRef) {
      const loadStream = async () => {
        try {
          console.log('Loading stream...');

          const { data } = await axios.get(
            `/api/redirect?url=${encodeURIComponent(itemPlayed.url)}`
          );
          console.log('Redirect response:', data);

          const finalUrl = data.url;
          console.log('Final URL:', finalUrl);

          const mediaSource = new MediaSource();
          const newTransmuxer = new muxjs.mp4.Transmuxer({ remux: false });
          setTransmuxer(newTransmuxer);

          // ...

        } catch (error) {
          console.error('Error loading stream:', error);
        }
      };

      loadStream();
    }

    // Cleanup function when component unmounts
    return () => {
      if (transmuxer) {
        transmuxer.dispose();
        setTransmuxer(null);
      }
    };
  }, [itemPlayed, videoRef]);

  return <video ref={videoRef} controls />;
};

export default VideoPlayer;

However, I'm facing difficulties in playing the stream after obtaining the URL through my proxy. The process seems to be getting stuck after getting the final URL, and I'm not receiving any error messages indicating what might be the issue.

How can I use mux.js (or any other appropriate technology) to play this type of IPTV stream in a Next.js project? Any suggestions for improving the architecture of my code would also be appreciated.

A big thanks for your help.