rtmps-hls-server Problem with reverse proxy

I have set up my stream, its accessible on http://192.168.1.22:9090/hls/thisisatest.m3u8, when I go to my webserver at http://192.168.1.23 the video plays fine on the webpage.

I use Nginx Proxy Manager to proxy > live.mydomain.com, however this doesn't play, i get an error that HLS playlist error at url http://192.168.1.22:9090/hls/thisisatest.m3u8.

I am using the following in NPM advanced settings

location /hls/ {
    proxy_pass http://192.168.1.22:9090/hls/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Is there something obvious I'm missing? Stream works locally, and in VLC just not when RP'd

Thanks for the help in advance.

Jan 29 '25 02:01 jl94x4

I have tested this and reverse proxy through NPM appears to work as expected with a "normal" config. (where the RTMP container is set as the proxy host) in this case, live.yourdomain.com should automatically redirect to live.yourdomain.com/players and will default to the HLS player.

Passing specific sub paths should be done using the "Custom Location" option as shown below which i have confirmed works:

Jan 30 '25 17:01 JamiePhonic

Sorry, I am not sure if we are on the same page.

I have a webserver setup, that contains a html page with the embedded link to the stream on, this is as follows;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Stream</title>
    <link href="https://cdn.jsdelivr.net/npm/video.js/dist/video-js.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #121212;
            color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .video-container {
            width: 80%;
            max-width: 960px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            overflow: hidden;
        }

        .video-js {
            width: 100%;
            height: auto;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 2rem;
            margin: 0;
            color: #f5f5f5;
        }

    </style>
</head>
<body>
    <div class="header">
    </div>
    <div class="video-container">
        <video id="liveStream" class="video-js vjs-default-skin" controls preload="auto" autoplay>
            <source src="http://185.210.171.66:9090/hls/thisisatest.m3u8" type="application/x-mpegURL">
            Your browser does not support HLS streaming.
        </video>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/video.js/dist/video.min.js"></script>
    <script>
        var player = videojs('liveStream', {
            fluid: true,
            liveui: true,
            responsive: true,
        });
    </script>
</body>
</html>

Its a pretty simple html page that has a video player on it, when I access this page via http://192.168.1.23 (the webserver url) locally, it works fine.

When I access this page through the proxy, which is set using NPM, I get the HLS playlist error at url http://192.168.1.22:9090/hls/thisisatest.m3u8. error

Jan 30 '25 22:01 jl94x4

Your video source should be relative to the web page if served by the same proxy <source src="http://live.mydomain.com/hls/thisisatest.m3u8" type="application/x-mpegURL">

Jan 31 '25 09:01 JamiePhonic