Web Interface (UI3)

The mobile apps (iOS / Android) and the web interface (UI3) provides remote access to cameras for users.
Post Reply
varghesesa
Posts: 90
Joined: Thu Jul 11, 2019 9:52 pm

Web Interface (UI3)

Post by varghesesa »

Introduction

This article documents UI details, mostly driven from tickets.

Webinar
The Web Interface webinar provides a great overview of the functionality and calls out many important tips and tricks.

Networking

Login

Gotcha 1: Using DDNS instead of port forwarding. Accessing the UI3 interface from the LAN using the DDNS URL is very slow.

We are not networking experts so users on the forum may have a better answer.
One possibility is the firewall settings are not set correctly.
Another possibility is usually when you use a DDNS url from within the same LAN, the traffic gets proxied through the router using a function called "NAT loopback" or "hairpin NAT". It could be that their router is bad at this. One workaround is to try the BI server's LAN IP address instead of the DDNS url when on the same LAN.


Gotcha 2: Login is slow. Live view fails to load or takes a minute to load.

I recommend checking CPU and memory usage on both server and client while remote viewing. Most computers these days are plenty good enough for UI3, but that isn't a guarantee. And also make security software exceptions (see Windows Tuning article), as such software can interfere with the web server connections. A poorly performing network could also cause such issues.

If CPU usage is high, consider unselecting "Require/decode all camera frames when streaming".
Gear icon in top right of Console.
ui3 gotcha_group stream.png
ui3 gotcha_group stream.png (22.6 KiB) Viewed 16342 times

Gotcha 3: Ad-blockers
See ad-blocker gotcha.


Live view

Gotcha 1: Orange Clock Warning

ui3-gotcha_clock.png
ui3-gotcha_clock.png (241.75 KiB) Viewed 16345 times

If you get the orange clock warning, either the fps is low for the stream or the endpoint is overloaded because the resolution (i.e. bitrate) is too high.
Run through the Windows Tuning article just to make sure Windows is not in conflict with BI.
Readjust the stream using Gear icon (bottom right).

ui3 gear icon.png
ui3 gear icon.png (89.19 KiB) Viewed 16345 times

FYI, the UI3 gear settings are just presets values in the web server encoder settings
ui3-vs-settings_optimized.png
ui3-vs-settings_optimized.png (90 KiB) Viewed 16345 times


Gotcha 2: Live view is choppy.
Symptom: Many frames are missing. The time overlay skips several seconds. The live view was delayed by several seconds.

ui3_fps.png
ui3_fps.png (4.38 KiB) Viewed 14613 times

Fix: Try increasing the fps for the group stream.

ui3-gotcha_group fps.png
ui3-gotcha_group fps.png (26.22 KiB) Viewed 15907 times

If the load on the network gets too much, in the UI3 interface, click on gear icon on bottom right and choose a higher/lower resolution to ease network congestion (Gotcha 1 above).

Engineering warning
This setting was at 10 at one time, but it used so much CPU, it caused a lot of tickets for that. It should be increased judiciously. 15 would be even worse.

Perhaps now that dual-streaming is the norm, this will not be as much of an issue.

Playback

Gotcha 1: Playback is slow or choppy for recordings. 1 - 5 fps

If the live view of the same camera is streaming just fine, then there is probably not an issue with CPU or network performance. The main difference between live and clip playback is the involvement of the storage device on the BI server. It may be having trouble seeking and reading an existing file if there is a lot of recording going on.

Some ideas:

1) Revisit Gotcha 1 above in the Live view section. Simplify the stream coming to BI using the gear icon.
2) Make sure playback in UI3 is set to 1x speed and not playing in reverse.
3) Try temporarily disabling recording on the BI server (set shield to red) to reduce disk load for testing purposes.
4) Make sure the recording format is BVR. I've had bad playback issues with MP4 before.
5) If hardware acceleration is used, look for the "Also BVR" checkbox in Blue Iris console > Camera Properties > Video tab. Toggle it on or off in case hardware acceleration is helping or hurting the playback somehow.

If still an issue, run through Remote device tests to rule out the server and network.



UI3 Settings

Gotcha 1: I set the UI3 timeout to 0 (i.e. never time out), but the browser still logs me out.

In General settings, users can set the UI3 idle timeout period.

ui3 timeout setting.png
ui3 timeout setting.png (29.29 KiB) Viewed 16344 times
Users state this setting is not being honored and UI3 still logs out. UI3 will let you know when a session disconnected because of a timeout.

ui3 time out message.png
ui3 time out message.png (16.36 KiB) Viewed 16345 times

If instead you received the login page, that means UI3 lost the session with BI which resulted in reloading the page which typically redirects to the login page.

It could be caused by anything that causes temporary connectivity loss, such as the network going down for 1 minute or longer, or even Blue Iris crashing. Or maybe even a session length limit applied to the Blue Iris user account. Although I think the user would realize if they had set this on all their BI systems. There certainly is not a session length limit by default.

The other possibility is the endpoint viewing UI3 is disconnecting. For example, if the endpoint is a laptop, power saving settings may have put the laptop to sleep or disconnected the laptop from the network.


ui3 login.png
ui3 login.png (59.06 KiB) Viewed 16345 times

Gotcha 2: Login credentials

The login page does not remember user credentials.

UI3_login credentials.png
UI3_login credentials.png (83.03 KiB) Viewed 16141 times

Like all other UI3 settings, the username, password, and "Log in automatically" checkbox state are saved in the browser's Local Storage. Local Storage can be inspected for troubleshooting purposes in the browser's developer tools. In Chrome, a person would open developer tools > Application tab > Storage > Local Storage > [address]. This will show all local storage items that exist for the selected web site. Look for the keys "bi_username", "bi_password", and "bi_rememberMe".

To make the saved credentials get lost, the browser may be clearing Local Storage regularly (such as when the tab is closed) due to security or privacy settings. Or perhaps a browser extension is responsible. Most browsers treat "Local Storage" the same as "Cookies" so most settings affecting Cookies would affect this as well.


Console view

Gotcha 1: Reduce margins between camera windows.
See Gotcha 7 in 5.5 Release notes.


Gotcha 2: Missing cameras

Below are settings that can prevent a camera from being visible on UI3.
  • A camera could be marked as hidden (BI Camera Properties > General), or its webcasting could be disabled (BI Camera Properties > Webcast).
  • Or the user could be logged in to the web server using a limited account that does not have permission to view all cameras.
  • Or it could be that he just needs to use the Current Group dropdown in UI3 to select All cameras.

Gotcha 3: Can I filter Alerts/Clips by camera like in the console?

Yes. Go to Clips tab -> Select a camera. Filter is automatically applied.

UI3_camera filter.png
UI3_camera filter.png (91.78 KiB) Viewed 14724 times

BI Server Settings

Gotcha 2: Ad blockers
See Ad blockers gotcha.


Gotcha 1: User permissions
Global settings -> Users tab
User Permissions may be restricting access
Global settings -> Users tab
The below settings restrict access to LAN and/or applies restrictions based on the schedule.
Help button in dialog has details.
UI3_server permissions.png
UI3_server permissions.png (15.09 KiB) Viewed 16142 times

The Global settings -> Web server tab -> Advanced button has other possible access restrictions.
Help button in dialog provides details.
Post Reply