Diffs between ui3 and livestream?

[grottoman]

Hello BP-
Thanks for your great work on this ui3 interface.
I'm not an active developer (long ago I used to do some coding) as you can see.
So I've about hit my limit on understanding a behavior issue I'm seeing, and wanted to see if you might enlighten me.

It's really a 2 part question I've realized, only 1 of which is directly related to your ui3, but I suspect you could easily help me with the second as well...

Basic Goal

Build a public facing password protected website that can be turned on / off / customized which allows access to 2 separate sets of BlueIris cameras via the 2 installed versions of BI with ui3.

Basic use case:

allow authorized and/or all public viewers to see specific camera(s) through a local website.

Basic components

2 public static IPs at 2 sites, each with its own BI instance.
Wireguard site 2 site VPN between both sites
Reverse Proxy front end with nginx website delivered by Synology at 1 site

Issue 1- ui3.htm working in iframe, but livestream.htm is not

I have a website embedding 2 separate BI websites in it via iframes.
ui3.htm works as expected but livestream is spinning and throws errors.

So it seems like either a mime type or http(s) issue is biting me. I don't know if they are an issue because of my proxy (it's https but the backend BI websites are http), or maybe settings on my website or BI I can adjust, or ?

Thanks for laboring through all this, hope it at least laid out what I've stumbled over clearly.
Thanks for any feedback or thoughts!

Issue 2- if iframes is the way to go, proper reverse proxy model

My current model is using local LAN addresses in the iframe; but I think I need to enable the reverse proxy to hit both BI's as well. I think the nginx implementation (really the GUI) on the synology I'm using is limiting my ability to do that, so I probably need to adopt a raw nginx implementation in front of it...

I think in raw nginx, I would be able to put a rpnameURL/site1 and a rpnameURL/site2 which would pull data from those two instances. But I think maybe Synology’s gui is limited to the high level ‘1 site to 1 site’ proxy function (i.e., no subdomain / folder redirect)

In other words, if my external public dns name is xyz.com, maybe my actual mappings would be
xyz.com -> 192.168.2.10 (main webserver)
xyz.com/bi1 -> 192.168.1.5:8000 (BI Instance 1 ws)
xyz.com/bi2 -> 192.168.2.5:8000 (BI Instance 2 ws)
So if I stick with the iframes, it’d be all one external RP pointing at 3 different webservers based on the URL itself.

So this one I think I need to just keep working through, it just suddenly became clear that my internal LAN model wasn't going to work out to the browser, and if the issue #1 is proxy related, I suppose my proxy model might catch me again when I get it straightened out.

Thanks again for reading and any feedback!

Thanks for UI3, it's great!

[bp2008]

Issue 1 is an issue of http vs https.

Livestream.htm uses the HLS streaming protocol which works by having Blue Iris send "playlists" containing URLs for short video segments. Those playlists are generated by Blue Iris using "http://" URLs. The web browser therefore disables the video file requests because pages loaded in a "secure context" (https) are not allowed to load resources from an unsecure context ("http"). Blue Iris Settings > Web Server has a checkbox for telling it you're using an HTTPS reverse proxy server:

Ideally checking that box that would cause Blue Iris to write "https" URLs in the HLS playlists using the port number specified there. But it does not. You would need to contact Blue Iris support to see if they would make it happen so that HLS streaming can be done over HTTPS.

Issue 2
Yes, iframes is a reasonable way to do that. You should be able to use virtual directories (/bi1 and /bi2) in an nginx configuration as you described. Again there is a setting in Blue Iris Settings > Web Server > "Virtual" where you can enter a virtual directory path. You may not actually need to do that for UI3 to work, but maybe for livestream.htm to work. And once again it is likely that Blue Iris is not considering proxying at all when building HLS playlists. My preferred way to use reverse proxies is to dedicate an entirely different domain or subdomain to each backend website because there are fewer compatibility issues this way compared to using virtual directories. But last I checked, Blue Iris and UI3 could handle being hosted in vitual directories just fine.

[grottoman]

Thanks BP!
I think the BI option for the tunnel/https assumes it's on the same server (IP) as the BI server, unfortunately. If I try to make it aware of the reverse proxy on 192.168.2.10:8009 (the synology), it doesn't allow that- only that port on the same BI server (192.168.2.5)...
So I think I'd have to install a proxy on that same server it seems... That's a big upheaval / not the direction I wanted to go, but maybe I need to add that layer in front of the synology outward facing reverse proxy... Hmm.

Gotcha re the iframes- so maybe I'm better off having separate proxies as you describe- that's actually an easier model with the synology in the mix... Thanks!