Add stream_baseurl to view webcontrol page with previews behind a reverse proxy

[pawciobiel]

0. Reviewed guide and contributing documents? (Yes/No): Yes
1. version [x.y.z, hash, other]: 4.3.1
2. installed as a package or compiled from sources [deb, rpm, git, other]: source
3. standalone or part of third party [motion, MotionEyeOS, other]: motion
4. video stream source [V4L (card or USB), net cam (mjpeg, rtsp, other), mmal]: rtsp
5. hardware [x86, ARM, other]: x86
6. operating system [16.04, Stretch, etc, FreeBSD, other]: OpenBSD 6.7

Add stream_baseurl config option. It appears to be needed by webui if motion is behind proxy.

I was thinking about changing https://github.com/Motion-Project/motion/blob/master/src/webu_html.c#L663
So the logic would be:
if there stream_baseurl is set use it
else strm_info.proto, webui->hostname, strm_info.port to build url.

(This obviously would not be used if stream port is set in camera configs.)

[tosiara]

Can you provide more details what is the issue?

[pawciobiel]

If motion web control and stream server is behind a firewall and reverse proxy, the proxy for stream is configured with custom url /your-motion-streams, the images for streams are not displayed in web control UI page.

[tosiara]

And what exact error does the browser log in the console?

[pawciobiel]

When browsing http://server1.some.net/motion/
the cameras stream under "All Cameras" are not displayed.
I can see an error in chromium dev console:
http://server1.some.net:8988/2/stream net:ERR_CONNECTION_REFUSED.

stream_baseurl would allow motion web ui to display images/streams with correct url
(the one that is configured in proxy, eg
/motion-stream/ proxy_pass to http://motion-serv-inside-dmz.lan/8988/2/stream).

[tosiara]

have you tried setting stream_cors_header?
https://motion-project.github.io/motion_config.html#stream_cors_header

[tosiara]

If what you are talking about is not a CORS issue, but because the internal port 8988 is not available from the outside, you could configure port forwarding on your reverse proxy to pass frontend:8988 -> backend:8988. Or if you prefer hosting everything on the same port 80, you can do ProxyPass /live/ http://motion:8988/1/stream and create custom HTML page with all the streams, like:
img src="http://http://server1.some.net/live/"

[pawciobiel]

@tosiara sure, but it would save a lot of hassle if built-in webcontrol web ui page could do it out of the box.

[mikeperalta1]

+1 I came here hoping for a quick easy config option to specify either a custom hostname or path prefix for stream URLs. I'm also running motion behind an apache reverse proxy and only able to get the web controls working thus far.

Here, the web control area is mapped to https://cameras.home but motion seems to be mapping the first camera stream to http://localhost:22814/101/stream for some reason, preventing it from working. If there were a stream_baseurl option, I could set it to https://cameras.home/stream/ or even https://streams.cameras.home and the reverse proxy would work easily (I think).

[gnikandrov]

Just FYI, I've managed to solve it (I am using nginx as reverse proxy) with the following configuration. Requires ngx_http_sub_module.
Although I like the solution proposed in the original post much more.

location /motion/ {
        proxy_pass http://127.0.0.1:8082/;
        sub_filter_once off;
        sub_filter_types text/html;
        sub_filter "http://127.0.0.1:8082/" "https://$host/motion/";
        sub_filter "http://127.0.0.1:8083/" "https://$host/motion/stream/";
}
location /motion/stream/ {
        proxy_pass http://127.0.0.1:8083/;
        proxy_read_timeout 86400;
}

[beimoe]

+1 I would also prefer to use this requested feature.

[nzasch]

+1 a simple string in the conf can save so much work

[Mr-Dave]

See poll. (As well as Motionplus)

[konomikitten]

Here is something for apache users, it's probably not perfect but it's something. If the camera has a different name it'll need adjusting, if anyone has a better conf please share it.

<Location "/motion/">
        ProxyPass "http://localhost:8080/"
        ProxyHTMLEnable On
        ProxyHTMLExtended On
        ProxyHTMLURLMap "http://localhost:8080/" "/motion/"
        ProxyHTMLURLMap "http://localhost:8081/" "/motion/"
</Location>

<Location "/motion/0/stream">
        ProxyPass "http://localhost:8081/" timeout=5
</Location>

[konomikitten]

I'm recently trying nginx here is my take on a configuration for it:

location /motion/ {
        proxy_pass http://localhost:8080/;
        sub_filter_once off;
        sub_filter_types text/html;
        sub_filter "http://localhost:8080/" "/motion/";
        sub_filter "http://localhost:8081/" "/motion/";
}
location /motion/0/stream {
        proxy_pass http://localhost:8081/;
        proxy_read_timeout 5;
}