Using HLS behind Nginx reverse proxy in Docker containers

[david-judge]

Question

Hi, I'm using Mediamtx in a Docker container on a Windows system.

I publish an RTSP feed (called camera1.stream) to Mediamtx and read HLS from Mediamtx and display in a browser using the built-in HLS player.

This all works perfectly if I open port 8888 on the Mediamtx docker container like this in the docker-compose.yml:

mediamtx:
build: ./mediamtx
ports:
- 8888:8888

In a browser, I go to http://localhost:8888/camera1.stream and the stream plays perfectly.

However, I have problems when trying to put Mediamtx behind an Nginx reverse proxy running in another container on a shared Docker bridge network. The steps I take are:

1. Close port 8888 to host from Mediamtx container by removing (commenting) two lines:

mediamtx:
build: ./mediamtx
# ports:
# - 8888:8888

2. In Nginx conf, setup Mediantx upstream server and proxy redirect for route "/webcam":

upstream mediamtx {
server mediamtx:8888;
}

server {
listen 80 default_server;
server_name localhost;
root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
  }

  location /webcam {
  
    proxy_pass http://mediamtx/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
  }

  error_page  404              /404.html;

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
  }

}

So I expect to navigate to http://localhost/webcam/camera1.stream to see the player but this does not work.

In the browser network log, the series of requests are:

http://localhost/webcam/camera1.stream GET 301 Moved Permanently
http://camera1.stream/ GET 307 Temporary Redirect
https://camera1.stream/ [Fails]

So the browser is being redirected to http://camera1.stream/ and https://camera1.stream/ which cannot be served by Nginx.

Any idea what I'm doing wrong or is there any documentation or examples of how to setup Mediamtx HLS behind a reverse proxy using Docker containers?

Thanks!

[RyanEwen]

Try adding a trailing slash: location /webcam/ {

I found this config works for me for WebRTC:

    location /mediamtx/ {
        proxy_pass              http://192.168.2.10:8889/;
        proxy_set_header        Host                    $host;
        proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
        proxy_set_header        Upgrade                 $http_upgrade;
        proxy_set_header        Connection              $connection_upgrade;
        proxy_redirect          off;
    }

Without trailing slashes I had issues.

[aler9]

Hello, basically you want to proxy the HLS server but you also want to add a prefix to all paths. The configuration posted by @RyanEwen works perfectly if you add a final slash to all your URLs (example: http://localhost/webcam/camera1.stream/). The only thing that is not covered is when you want to use URLs without final slashes (example: http://localhost/webcam/camera1.stream), since the server will reply with a 301, pointing to the path with the slash.

You can intercept and fix these requests this by adding a dedicated block inside Nginx:

    location /mediamtx/(.*)^/ {
        return 302 /mediamtx/$1/;
    }