如何使用 Next.js 在没有扩展的情况下播放 IPTV 直播？

Question

我目前正在开发一个 Next.js 项目，我正在尝试创建一个视频播放器来流式传输实时 IPTV 源。我正在使用的流的 URL 没有扩展名，也不使用清单。

举个例子，典型的流 URL 如下所示：http://providerurl.com:80/00909434/0940934094/131362（末尾没有扩展名）。

我尝试过使用react-player、video.js、plyr 和 HLS.js 等多个库，但它们都无法播放这些类型的 URL。我怀疑这可能是因为流是 mp2t 格式。

因此，我决定使用 mux.js 将直播电视流转换为可读格式。为了检索流的最终 URL 并避免 CORS 问题，我使用 axios 创建了一个自定义代理来处理重定向。

这是我的代理代码的示例：

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' });
  }
}

接下来，我使用 React 和 mux.js 创建了一个视频播放器。这是我的视频播放器代码片段：

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;

但是，通过代理获取 URL 后，我在播放流时遇到困难。获取最终 URL 后，该过程似乎陷入困境，并且我没有收到任何指示可能出现问题的错误消息。

如何使用 mux.js（或任何其他适当的技术）在 Next.js 项目中播放此类 IPTV 流？任何有关改进我的代码架构的建议也将不胜感激。

非常感谢您的帮助。

Answer 1

你成功解决这个问题了吗？