bp2008 / ui3

A powerful, modern HTML5 web interface for Blue Iris.

UI3

UI3 is a powerful, modern HTML5 web interface for Blue Iris. As of April 20, 2018, UI3 is Blue Iris's default web interface for non-IE browsers and is included with Blue Iris versions 4.7.3 and newer.

Discuss on ipcamtalk

UI3 has a dedicated thread on the ipcamtalk forum, here:

https://ipcamtalk.com/threads/blue-iris-ui3.23528/

Manual installation

Be aware that most UI3 releases are developed against the latest Blue Iris version at the time of UI3 release. Compatibility with older Blue Iris versions is not maintained, so any time you update UI3 without being on the latest version of Blue Iris, you risk encountering broken features and other bugs.

If you wish to manually install a UI3 update, you can get it from the releases tab: https://github.com/bp2008/ui3/releases

To install, just extract everything to Blue Iris's www directory and overwrite all files. The default path to this folder is C:\Program Files\Blue Iris 5\www.

Blue Iris 4.x Users

Blue Iris 4.8.6.3 shipped with UI3-70, but you can update to UI3-77 for a few improvements. Things will begin breaking if you update beyond UI3-77 on a Blue Iris 4.x installation.

ui3's Issues

Full screen Design/error ?

Did a quick screen shot on my phone to show you what is happening when a try to go full screen. Not sure if its by design or an error . My thought since i already touched the camera i wanted for full screen why does it give me another option to pick from my list of cameras to go full

This doesnt happen when using my desktop pc

link
https://photos.app.goo.gl/0lrn3P54pWXc51ql2

uI3

Excellent Job, on the Ui3

• Since many user don't have PTZ cameras would it be possible to have the ability to enable / disable PTZ view
• Add a frame around each camera
• When touching either live | alert | clips use another colour than blue as it clashes with the blue used on the system name

Support for Notificationon Alarm

Hello, first thank's for this great work!

is an update planned for a Notification / Toast Extension in Chrom after an alarm?

https://developers.google.com/web/fundamentals/push-notifications/display-a-notification

Samsung TV Browser throws ReferenceError

See attached image below for error message.

This is on a Samsung TV (Q9F) in its browser app. Everything works as expected until I hit the back button which opens the TV's menu. Looks like some kind of onUnfocus event doesn't know what to do on the TV's browser.

h264 not working in chrome

jpeg mode works great, but any of the h264 modes on chrome/windows does not operate correctly. I have the latest version of chrome, blueiris version 4.8.3.0 x64/UI3 version 61.

With h264 all I receive is a spinning arrow which never goes anywhere. Jpeg works but is really low performance. (5-6 fps)

New Update Isssue

Just updated to the latest push with H.264 player now getting pre-loaded in Chrome.

Issue
When i use chrome on my android phone i get this screen below is does not anything else , U2 works just fine just u3 having this issue in chrome app not desktop

https://photos.app.goo.gl/eyflY5C9OOdTzHTG2

Update
downloaded firefox app and same isssue
https://photos.app.goo.gl/133Pi6CusI992AlC3

If you need a link to the server just tell me

Option to change highlight color

I have a ui3 monitor running 24/7, and the red highlights for movement used to catch my eye late at night when I'm wanting to see movement on the monitor.

With bi5, the movement highlight color has changed to blue. If this is something that can be changed in ui3, would you please add an option to change it back to red.

Or alternatively, some other way of making movement highly visible on the monitor.

Allow user to change thumbnail size in IOS browser.

I love your UI, clean look and the extensive customization options.
I would really love it if you could find any kind of workaround/fix to allow context menu in IOS browsers. But if you can’t, could you at least let us change the alert/clip thumbnail size?
Thanks!
Tim

Add an option to replace Profile selection buttons with a dropdown list.

Profiles have names which can be useful to see them all laid out.

MakeFakeGroup method should copy the "audio" flag from the camera.

Note to self: Test to make sure that audio plays as expected when the user only has access to one camera (with audio).

UI3 on Samsung Smart Fridge Browser

Reviewed potentially related issues and they're not the same issue: #14

Output from Samsung Smart Fridge browser details:
whatsmybrowser.org/b/KL2KWWV

Seeing as how its a limited browser and on Trizen OS i thought that the Web Interface of BI5 would be the best option. I was able to login, and see the all cameras dashboard. However when i attempted to view a live stream of a single camera it threw an Error that i was not able to screen grab. If there is web interface log files i can get to post i will but please tell me where those are.

id like to see if development can be made to view and play back cameras for this screen size and orientation.

Also if there are any other bits of info about the Fridge Browser you need i can get that too as long as it s a web page :)

Add option to sort by memo text

I am integrating blue iris with AITool and it can provide a memo text of detected objects, could you add a search field where I could search for all alerts containing the work "person", "truck", etc, in the memo text? If so would it be possible to search for multiple objects at a time, ex "person" and "truck" in the same alert? The memo text is semicolon separated, ex "Bicycle (93.91%); Person (99.94%)". Thanks!

Screenshots in help file are outdated

New screenshots in the help file based on refreshed UI3 styling and Blue Iris 5 would be appropriate.

MS detects trojan in loginScripts.js since Sep 30-2019 update

https://www.microsoft.com/en-us/wdsi/threats/malware-encyclopedia-description?Name=Trojan:JS/Denali&threatId=-2147223972

The file is included in BlueIris which is why I picked up the problem when updating.

I copied the code in the same file here into an editor and saved to a desktop file and this was immediately detected. Probably a false-positive but should try to have MS fix this, or adjust code so it no longer matches their signature.

thanks,

Ron

Problems when loading ui3 in Homeseer HStouch

When trying to open ui3 inside HSTouch in an android appliance, all "LOADING" lines show "BUSY" and it doesn't move from there.

Thanks for your help.

Vesrions:
UI3 version 93, Blue Iris version: 5.0.6.2
Homeseer 3.0.0.548
HSTouch Version 3.0.0.51
Mygica s905 running android 5.1.1

Dynamic Group for Active Triggers

Hi,

Great work on the UI!

I have a enhancement request. A page or group in the UI that dynamically shows the camera streams currently triggered. Your group views do a great job of arranging simultaneous streams on the page but they are statically defined in BI, I would love to see a dynamic group or page like "Active Triggers" that dynamically loads streams from cameras being triggered and then hides them when the trigger ends.

Fast triage flow

Hello,

I have made a private change for myself to add a Delete button onto the Alerts page, add support for Del keyboard shortcut and also option to disable Confirmations for deletion in order to allow me to quickly go through alerts and delete them.

Is this something you would be interested in merging to master? If so, I can clean up my change and send a PR. Let me know.

Thanks,
Jiri

Audio Issues

No audio under Firefox or IE11.
Many of us refuse to use Goggle Chrome for obvious privacy reasons. I'm a long time Blue Iris user. i would love if audio would work. Yes i have BI4 setup correctly to broadcast audio with most cameras, but they do not have sound under UI3. UI2's sound used to work for me under IE10 or IE11.

My browser most certainly supports H.264 streams and all online tests affirm this. If I open an HLS stream of a camera via the right-click interface of UI3 the stream works and I get sound, so I don't see any reason the sound can't work as it used to on the primary interface.

There is no option to watch clips with sound either. Is this true also when using UI3 in Google Chrome as well?

Not having instant sound seems completely unnecessary with such an important app, especially since there is no good alternative for monitoring on a remote Windows PC. Ideally, there would be a remote version of BI that would provide much the same interface as on the server it is running on.

Blue Iris is such a gem. Lacking a robust remote monitoring option is its ONLY negative quality. It does EVERYTHING else.

UX Improvement: Export clip flow

Great work adding in the export via MP4 functionality so quickly - I think this is a game changer!

I wanted to request an improvement to the flow if poss. Currently it takes minimum 5 clicks/taps to get a file downloaded onto the device.

My assumption is that the export settings are unlikely to change on a per export basis. Could we look to move that out to the main settings page or similar? Thus saving a step here.

If the API gives back that exported file, then perhaps we could even skip the list of exported clips screen - if not then having the export list open automatically when complete would also be a welcomed improvement.

Thoughts?

Control-less page for embedding

Hey,

Great work on the UI.

I am embedding the UI in a Dashboard as an iframe for display on a TV.

I hacked the HTML to remove all the controls on the left. I would assume that's a common enough use case we could probably add that as a feature. Or maybe I missed something that already exists.

Let me know your thoughts on that one.

Thanks

"Vulnerable" version of jQuery

A business I do work for uses Blue Iris with UI3. Recently they've had to do some PCI compliance testing. The tests fail because of what the testing company says is

vulnerable jQuery version: 1.11.3

Risk: High (3)
Port: 8888/tcp
Protocol: tcp
Threat ID: web_lib_jquery

Details: Two vulnerabilities fixed in jQuery 3.0.0
01/23/18
CVE 2015-9251
CVE 2016-10707

Is there any plan to use a newer version of jQuery or is there a way that it could be cobbled in?

Improve video layout user experience

Hello,

Is there a way to adjust how the video windows are shown in ui3? I dedicate half of a monitor to displaying a 5 cameras, but the video windows are so small that it's difficult to see what is going on in the video. However there is a lot of unused space. Is there any way to take advantage of this unused space?

I see that the 5 video windows are actually one video tag. If they were separate I'd take a stab at some css changes... 🤔
<video id="html5MseVideoEle" muted="" draggable="false" unselectable="on" src="blob:http://192.168.1.134:81/34f57589-81a9-4140-8ecd-1f40eb47235f"></video>

Thanks,
Tony

Issue hosting Blue Iris under a virtual directory

I followed your instructions on hosting Blue Iris under a virtual directory and I am unable to get it to work. I an able to access Blue Iris if I use a subdomain but I would really like to us a directory instead. I added a screenshot of the error I am seeing below.

Auto cycle in full screen via url

How can I cycle in full screen between different cameras with a direct url at UI3?

PTZ Movement issue

Hi

I have issue with PTZ on multiply cameras on the new ui3 version.

When I move the camera with the arrow keys in the UI3, the UI controls stops responding and the camera constantly moves. No way to stop it.
If I use blue Iris itself, I have no issue.
See video for example: https://streamable.com/petyb

I cannot move in one direction.

It worked fine in previous version.

Thank you and keep up the good work.
cheers

Feature request: newly organised settings page

I love the UI except for the settings page. It's fantastic that there are so many options but its now jsut out of control. Please add at least a really simple tabbed interface which would be super fast to implement.

Splitting up the content over windows to hopefully eliminate the scrollbar element within the layout would be very useful. Right now its just overwhelming and hard to find what you want.

Add memo text to alert list when available

https://ipcamtalk.com/threads/blue-iris-ui3.23528/page-131#post-455864

Put real world clock time over export start/end markers, when available

Put real world clock time over export start/end markers, when available. Otherwise perhaps a note saying [clock time not available] or something.

NaCl player draws bottom or right edge corrupted at some resolutions

The pNaCl player option in Chrome draws the bottom or right edge corrupted at some resolutions. I'm not going to fix this since pNaCl is deprecated and was scheduled to be removed from Chrome 6 months ago. Just documenting the bug here.

Fails to run on WebOS

This interface was running using the web browser on a webOS tv (LG). It seems one of the updates in the last month or two has caused some incompatibility.

I now get an error

Uncaught SyntaxError: Unexpected token,
at http://..../ui3/uis.js?v=101-5.0.9.1
[20352:69]
Mozilla/5.0 (Linux: NetCast: U) AppleWebKit/537.31 (KHTML like Gecko) Chrome/38.0.2125.122 Safari/537.31 SmartTV/7.5

This is after the login screen, and after the above error the webpage stays on the loading dialog screen you see before the camera views appear.

Opening alerts sometimes does not open the correct timestamp in the clip

I haven't got a configuration that allows this issue to be reproduced, but here are the details: https://ipcamtalk.com/threads/blue-iris-ui3.23528/page-143#post-497567

Max Bit Rate ignored at playback speed higher than 1x

1440p profile, limit Bit Rate set to "Yes Limit", Max Bit Rate set to "6144", Playback speed set to 2x = Video Bit Rate in "Stats for nerds" bumps up to >10 Mbps. My VPN connection can do only 10-12 Mbps, so frames are getting dropped, fps goes down to 4-5 fps at higher playback speed.

Mobile log in for chrome

Hi,

I am having an issue on chrome mobile when I am trying to log into UI3.
I write my user name and password and press log on, the page refreshes and I go back into the login page. This happens also if I mark "auto login".

I tried this on two mobile phones and the same issue.

If I go into an incognito mode in chrome, everything works fine as it should be.

Video of the problem: https://streamable.com/un4xb

Thank you for awesome UI, I use it a lot.

Cheers

Feature request. Quick forward and backward navigation during play

Are you able to implement a method to quickly skip forward and back in the video? Especially with touch control.

Eg scrub forward or back by press and drag. Or the multi click to left or right like on YouTube ( is that patented?)

Just something to make it easier to navigate within the stream, especially on mobile.

Free memory reports as 'undefined' in resources tooltip

Just saw this when mouse hovering over the stats in the UI3 interface. I'm running the latest version of BI.

Yo!

Hey dude. Ive got no audio on UI3. When I click "get stats for nerds" it shows no streaming audio. Should it? Do I have a problem with UI3 or should I talk to Blue Iris support? I get audio fine locally on the server, just not on the web server.

Thanks! Im on b23.

Add ui3.htm resources to login.htm

Can you add the icons and manifest to the login.htm page so when it's added to the home screen it pulls in the correct icon and runs as "standalone" instead of as a shortcut?

Add URL parameter to play a recording at startup, identified by database ID.

The clipstats command supports sending it an alert ID, but that doesn't return the alert's offset. It just returns the data for the alert's clip.

Start offset should be a second URL parameter.

Feature Request: Chromecast support

Chromecast support is the only reason why I use the mobile app over ui3 anymore; it's extremely useful to be able to cast a video feed to one of my devices (Google Home display, or smart TV). Not sure how difficult this would be or if this is exposed in the BI API that you hook into.

Frame rate drops after camera reloaded server-side

When changes are made to the camera configuration on the Blue Iris server, causing the camera to reload, while the camera is being viewed in the ui3 interface, when ui3 reconnects to the camera the frame rate is very low until you reload ui3 using the browser's reload button. In my case, my camera normally runs around 30 fps; changing the camera config causes ui3 to drop to <5 fps until the ui is reloaded in the browser.

UI3 version 70, Blue Iris 4.8.6.3. Google Chrome 73.0.3683.86 on macOS 10.14.4 (18E226). Also occurs with earlier versions.

Issue is consistently repeatable.

Steps to reproduce:

1. Open live view of camera in web browser. Streaming quality doesn't seem to matter, but I'm using 1440p. Observe normal FPS in the 30fps range.
2. On Blue Iris server, open the camera's properties.
3. Make some change that will require the camera to reload, such as altering the motion-detection settings.
4. Close the camera properties dialog(s) saving changes, such that the camera view on the Blue Iris console displays color bars momentarily. Observe loss-of-connection message in UI3 session.
5. Wait for UI3 to auto-reconnect.
6. Observe FPS of 1-5 fps.
7. Click browser's Reload button. If necessary, "click anywhere" to enable stream. Observe normal FPS restored.

Bug: UI3 doesn't seem to understand the BI folder setting 'do NOT monitor free space'

It seems that UI3 doesn't understand the "do NOT monitor free space" option that can be checked in the setup of a folder within BI.

If that is checked, if you go to "Disk usage" within UI3 it will display the yellow warning box "Reported disk info is invalid msg...".

It also reports in red "Overallocated" when its not for that drive above the pie graph (which is also displaying incorrect info).

Vertical layout

Hi,

Is there a way to get the cameras on top of each others (vertical layout) instead of next to each others (horizontal layout)?

Awesome UI so far. Thanks.

Uncaught SyntaxError: Unexpected token <

Hi,
Sorry because the language is not my native language.
Before, I would like to congratulate you for the excellent work. I'm a fan of UI3 and I always recommend BI because of it.
I have had problems with UI3 for a long time. Many versions of BlueIris have been updated since version 4.x, always with the same error.
The problem occurs with my 4G mobile connection on my Samsung S8 Android 9. When I connect via my home Wi-Fi network, everything is fine.
However, if I connect Windows 10 to my phone via wifi tethering (using the bridge with the 4G connection), the error also occurs on IE, Edge and Chrome on the PC.
Apparently some proxy problem or something else on the mobile operator.
However I would like to ask you to look at the debug, as there may be a solution for my case and for these other users that I found here:
https://ipcamtalk.com/threads/uncaught-syntaxerror.40164/
I have already updated to version 123 of UI3, but my latest version of BI is 5.2.4.4.
The errors shown are below:

_

"An unexpected error has occured in /ui3.htm (v 123 / 5.2.4.4) ...
Uncaught SyntaxError: Unexpected token '<' at http: //censored_hostname/ui3/ui3-local-overrides.js? V = 123-5.2.4.4 [1: 1]"
"This Session is invalid"

_

I already thank you for reading this far and if possible an answer.

Best regards,

Feature Request -landscape mode

Feature request
when viewing an individual camera in landscape mode can you allow the camera feed use up the entire real estate of the phone . and not have the PTZ control, PTZ presets and server status as seen on link below

https://photos.app.goo.gl/IPXiWnVU8a7GKkHo2

Feature Request: 2FA

Hi,

Can we get 2FA added to UI3?

Either a txt message via SMS or preferably via Authenticator App.

Clip/camera resolution mismatch causes badly scaled clip playback.

This happens when the resolution of a camera changes and no longer matches the resolution of previously recorded clips. It is most noticeable when the aspect ratio changes.

Seek bar quickly becomes inaccurate in clips that are still being recorded to

This issue has been around as long as UI3, and every time I think I've fixed it, something changes to break it again. It is caused by UI3 and Blue Iris getting out of sync in their knowledge of the clip length. Possibly the key to fixing this once and for all is to use the new frame timestamps in H.264 streams as opposed to the 0-10000 seek bar offset.

Once fixed for H.264 streaming, verify that it is also okay when Jpeg streaming.

Problems when loading ui3 in Homeseer HStouch

Hello after v45 i can not open ui3 using HStouch on my android phone but i can open it with chrome on the phone. when i try to open it in the HStouch app it hangs up loading H.264 player. If i replace ui3.js file with v45 it works fine. see below. if you have need any more info on this please let me know.

https://forums.homeseer.com/forum/3rd-party-plug-ins-scripts/plug-ins-by-author/click-here-for-list-of-author-forums/highpeak-plug-ins/blue-iris-plug-in/110093-hstouch-blueiris?p=1238434#post1238434

Feature Request: Two Way Audio

Do you plan on allowing for two way audio between UI3 and a camera using a computer/phone microphone? I assume the biggest limitation would be with the Blue Iris API but I haven't dug into that in a long time so maybe it has been updated to allow for that.

Thanks for the great work you have done with this!

H.264 alert/Clips

I notice with the latest update of UI3 re H.264 module, when viewing realtime the stream quality starts off poorly then after a few seconds it get better when viewing from my desktop. However when on my phone this doesn't happen which is perfect . The only issue is when i am reviewing alerts on my desktop or phone which are typically 10 sec the quality is poor due to the H.264

Its it possible then viewing alert or clips its set to view in jpeg mode
(i hope i am making sense)
Mavrin