I made a better remote-live-view page [OLD]

bp2008

bp2008

Staff member
IPCT+ Member
Mar 10, 2014
12,770
14,297
USA
This is the home of UI2, a custom web interface for Blue Iris.



As of 2018, UI2 is no longer being actively maintained. Existing UI2 users are encouraged to try UI3. UI3 is included with Blue Iris version 4.7.3 and newer. To get UI3, simply update Blue Iris. UI3 has a cleaner layout and better touchscreen support, in addition to much-improved audio and video playback capabilities.

Reminder: Some users may have assigned ui2.htm as the homepage for their Blue Iris user account(s), and this overrides Blue Iris's default behavior of redirecting to UI3.






If you still wish to download my custom web interface pages, including UI2, you can do so here:

Blue Iris VersionUI2 VersionDownload Link
4.7.3 or newer*0.20.0http://ipcamtalk.com/bp08/bp2008_bi_webserver_files_2018-05-11_v0.20.0.zip
3.60 through 4.7.2.40.19.2http://ipcamtalk.com/bp08/bp2008_bi_webserver_files_2017-12-29_v0.19.2.zip
older than 3.60**Nonehttp://ipcamtalk.com/bp08/bp2008_bi_webserver_files_pre_3.60.zip
* Blue Iris 4.7.3+ includes updated copies of login.htm, livestream.htm, and timeout.htm. Therefore UI2 no longer includes those files, starting with UI2 version 0.20.0. Besides that, 0.20.0 is the same as 0.19.2.

** Blue Iris 3.60 changed the camera layout algorithm, breaking old custom web interfaces. There was no UI2 back then, so the zip file for pre-3.60 only contains my first-generation custom interfaces (jpegpull2.htm for example) and they aren't very good.

Installation Instructions

The zip contains a lot of files. Simply extract all of these into the "www" folder in your Blue Iris install. For basic usage, load the "ui2.htm" page:

http://localhost/ui2.htm - You will probably need to modify the URL to point at your Blue Iris machine.

Press F11 to load full-screen mode, if desired.

Updates

UI2 version 0.9.5 (published Sept 29, 2015) and newer notify users if an update is available. The update check is performed only at the moment the page loads, no more than one time in a 12 hour period. I also reply to this thread to announce every update.

If you wish to disable update notifications globally for all users, you may find the option in the ui2-local-overrides-template.js file. This file is for advanced users only, and requires a technical mind to understand how to use it.

Features

The zip includes several older pages of my own design, but the recommended page is UI2.

UI2 is designed to surpass and replace all the other web interface pages.



  • Click a camera to maximize its size. Click again to go back.
  • Roll the mouse wheel to zoom in and out
  • Collapse the Clip list for full-screen live viewing (press F11 to full-screen your browser too)
  • Advanced clip and alert playback controls, similar to what you get in Blue Iris. This is an ongoing project and may not yet behave well for some users*.
  • Images are loaded at lower resolutions when appropriate to save bandwidth that would otherwise be wasted. Now has support for displays of non-standard DPI.
  • All clips and alerts are shown with thumbnails.
  • Get and set up to 20 presets (dependent on your PTZ cameras). Click to go to a preset. Long-click to set a preset.
  • Each preset that you assign with UI2 gets a thumbnail stored for it, to help you remember what each preset is.
  • html5 audio playback for camera audio. Currently only works with live video streams, and browser support varies.
  • Change the stoplight, profile, and schedule.
  • Trigger, restart, and toggle manual recording on cameras.
  • Some aspects of UI2 are configurable, with settings stored in your browser.
  • Live video can be streamed with H.264 encoding (see UI2 Settings > HTML5 Canvas)
  • Many more features planned.

*Open this spoiler for tips for getting the most out of the advanced clip playback tools, specifically the seek bar.
Tips:
* Using the seek bar automatically pauses video playback. However if you double-click the seek bar, playback will resume from the position you double-clicked.
* Try all the buttons. You can speed up playback, slow it down, play clips in reverse, and have the playback either stop or start over when finished.

Blue Iris version 3 is incapable of providing completely accurate information about the duration of clips. The inaccuracy is usually only a second or two, which is fairly insignificant. However if you are using Combine and Cut options to merge multiple alerts into one clip, then UI2 may believe your clips are minutes or hours longer than they really are, and the seek bar will be wildly inaccurate. If this affects you, I recommend viewing recordings through the Alerts list whenever possible as I believe it is only the Clips list that is subject to this large amount of inaccuracy. Blue Iris 4 does not have this problem.

login.htm


A replacement login page is included. It can remember your user name and password and log you in automatically. Blue Iris may overwrite this when it updates, so you may need to re-extract it regularly.

Legacy page information (jpegpull2, etc) is in this spoiler block:

jpegpull2.htm



  • Images are loaded at lower resolutions when appropriate to save bandwidth that would otherwise be wasted on a standard-DPI display.
  • Click a camera to full-screen it in full resolution. Click again to go back.
  • More efficient use of screen space.
  • Left menu is resizable.
  • Compatible with virtually any browser that supports javascript (like a smartphone).
  • More clip thumbnails shown (in a scrollable panel).


default2.htm



  • Same as jpegpull2.htm above, but using Blue Iris' ActiveX control for higher frame rates and lower bandwidth usage in Internet Explorer
  • Click-a-camera-to-full-screen is not supported on this page



allcams.htm



  • No menus, margins, or extra junk to get in the way. Just live camera views.
  • Click a camera to full-screen it in full resolution. Click again to go back.
  • Bandwidth-conservation mode: Enabled by adding a URL parameter named internetmode.

    Example:
    http://localhost/allcams.htm?internetmode=1000 - Enables internet mode with a delay of 1000 ms (one second) between image requests.

    Using this parameter enforces a configurable delay between finishing one image request and starting the next. Also, when this parameter is used, the image will automatically stop updating after 10 minutes and the user will be quietly instructed to refresh the page.


groups.htm



  • Same as allcams.htm above, except you can use the number keys and the + and - keys (or on-screen buttons) to navigate between your camera groups.
  • In order to use groups.htm, you will need to open groups.js and modify the Group and Camera Configuration section at the top. Simply replace the example group and camera IDs with your own, being careful to follow the same formatting practices that appear in the example configuration. It should be pretty self-explanatory, but there are a few notes in groups.js to help explain.


---------------------------------------------------------------------------------------------


Live viewing over LAN? Try the Java app.


Full-screened on a high-resolution monitor, it is more responsive than any of the web-based viewers. It is a bit more complex to set up, uses a lot of CPU and network resources compared to the web pages, but it provides a better experience if responsiveness is of higher concern than efficiency.

The Java app includes an optional Instant Replay feature which you can use to easily look back through recently downloaded images and re-watch something you missed.

More information can be found in this thread.

---------------------------------------------------------------------------------------------

People won't stop asking how to donate.

Nobody has to donate. UI2 and all my custom Blue Iris pages are and always will be free. Seriously folks, put your money toward more cameras or a CPU upgrade or something.

If you really can't help but give me some of your money, use this link:

Pay Brian Pearce using PayPal.Me
 
Last edited:
  • Like
Reactions: caddyman68, kejot, the.ptr and 54 others
Very nice!

I made some changes to the login screen, hope you dont mind. I just experiemented a bit and might do some more later :)
 

Attachments

  • newlogin.png
    newlogin.png
    11.5 KB · Views: 2,278
  • login.htm.zip
    login.htm.zip
    37.4 KB · Views: 1,077
  • Like
Reactions: Harrywho and Mike
I just published an update to the java app that makes the server password get encrypted when it is stored on disk (I thought it was doing this already but it was broken). Also you can now selectively hide individual cameras in case your server has more cameras on it than you want to show.
 
  • Like
Reactions: Mike
Ok I must be the dummy here. All my pages are blank. No cam feed. The pages load just empty. :(

- - - Updated - - -

GOT It! WINRAR would not copy the java files.
 
bp2008 said:
Hi all.


I never particularly liked Blue Iris's live view pages. They work, but they lack the simplicity and ease-of-use that I wanted. So I made better ones, and I would like to share them with all of you.


Download custom Blue Iris web pages:


http://ipcamtalk.com/bp08/bp2008_bi_webserver_files.zip


Bandwidth-conservation mode

A bandwidth-conservation mode is available on allcams.htm and is activated by adding a URL parameter named internetmode.


Example:
http://localhost/allcams.htm?internetmode=1000 - Enables internet mode with a delay of 1000 ms (one second) between image requests.


Using this parameter enforces a configurable delay between finishing one image request and starting the next. Also, when this parameter is used, the image will automatically stop updating after 10 minutes and the user will be quietly instructed to refresh the page.



Apoligies in advance if this is too basic, but my BI server starts by executing the blueiris.exe file. How do make sure this .exe file uses your pages? Many thanks.
Click to expand...
 
Just follow the installation instructions. You only need to extract the files to the "www" folder which you will find in the same place as the .exe. The only file that will be overwritten is login.htm. This file is optional. The one I include has an option to remember your user name and password but otherwise it is the same as the default.

Anyway just load the blue iris interface normally, then you can change jpegpull.htm at the end of the address to jpegpull2.htm. Or default.htm to default2.htm. The versions with a 2 in the name are the ones I made.
 
bp2008 said:
Just follow the installation instructions. You only need to extract the files to the "www" folder which you will find in the same place as the .exe. The only file that will be overwritten is login.htm. This file is optional. The one I include has an option to remember your user name and password but otherwise it is the same as the default.

Anyway just load the blue iris interface normally, then you can change jpegpull.htm at the end of the address to jpegpull2.htm. Or default.htm to default2.htm. The versions with a 2 in the name are the ones I made.
Click to expand...

I did that and am using this address to login: http://[hostname]:10080/allcams.htm
I get a black screen with a little white box in the top left of the screen (copy attached). If I click on the screen, random camera images appear. Maybe a browser issue? I am using Firefox, but IE did the same thing.
 

Attachments

sprucecams said:
I did that and am using this address to login: http://[hostname]:10080/allcams.htm
I get a black screen with a little white box in the top left of the screen (copy attached). If I click on the screen, random camera images appear. Maybe a browser issue? I am using Firefox, but IE did the same thing.
Click to expand...

Thanks! I'll try that when I get home. I have been trying to use this with a login for a user with viewing limited to a designated "group" of cameras. Can this be accommodated somehow?
 
It could be accommodated, if I wasn't so lazy. Try jpegpull2.htm, which has the "accomodation" built in so it should work with the limited user account. If the side bar is in the way, you can drag the edge of it to resize it and almost completely remove it from view.

Otherwise, check out groups.htm which is briefly mentioned in the 1st post here. It can be configured with whatever camera group(s) you want, but it is a manual process to configure it.
 
I have updated the pages (allcams.htm, jpegpull2.htm, etc) to make click-to-fullscreen work with the new camera grids in Blue Iris 3.60.

@sprucecams

I also updated allcams.htm so it will show the first camera group a user has available, in case the all cameras group is not available. If you update, be sure you also update Blue Iris to the latest version.
 
Last edited by a moderator:
  • Like
Reactions: fenderman
Small bug - when I click clips it shows alerts, and when I click alerts it shows clips.
 
Ahh that makes sense. I was reading the screen to have the option to the right of the description so 'Clips x' 'Alerts x'.
 
First off bp I LOVE the look of jpegpull and allcams.htm if it wasn't for me finding this for Blue Iris I would not have now Chromecast in different rooms with BIris full screen.

I have a feature request i'm sure must be easy.. perhaps a cycle.htm
Since the release of "+All Camera Cycle" is it possible to turn the Camera Cycle frame into a full frame as allcams.htm does, so that way in full screen remotely users with Motion trigger to bring forward in cycle can have this full screen like it is in jpegpull.htm .
 
This should be possible already, with jpegpull2.htm or groups.htm.

For jpegpull2.htm, just choose the All Camera Cycle option, and then collapse the side bar all the way to the left. This does leave about 10 pixels unused on the left, where the edge of the side bar is, but it is nearly full screen.

If you can't use this due to having no mouse pointer on some device, you can configure groups.htm instead. Follow the normal groups.htm setup procedure, but the only thing you should add to groupConfig is
Code: 
	groupConfig.push(["@index"]);
Note also that my groups page has a enableGroupCamerasCycle option which is unrelated to your situation; keep it set to false.
 
  • Like
Reactions: timmmay
You must log in or register to reply here.
Top Bottom