I made a better remote-live-view page

Discussion in 'Customizing' started by bp2008, Mar 13, 2014.

Share This Page

  1. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    Hi all.

    I never particularly liked Blue Iris's remote view web 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.

    Feedback is very welcome. Just reply to this thread.

    NOTICE: If you have updated to Blue Iris 4.1.3.0, you also need to update UI2!

    Download custom Blue Iris web pages, including UI2:

    For Blue Iris 3.60, 4.x, and later: (always links to the latest version)
    http://ipcamtalk.com/bp08/bp2008_bi_webserver_files.zip

    For Blue Iris older than version 3.60 with the old camera grid layout:
    http://ipcamtalk.com/bp08/bp2008_bi_webserver_files_pre_3.60.zip


    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 will 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.

    [​IMG]

    • 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






    [​IMG] 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






    [​IMG]
    • 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






    [​IMG]
    • 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: Jul 10, 2017
    yeahman, technet, Jared and 47 others like this.
  2. Mike

    Mike Staff Member

    Joined:
    Mar 9, 2014
    Messages:
    1,455
    Likes Received:
    559
    Location:
    New York
    This is amazing, thank you so much for creating this and for sharing this with the community.

    Stickied.
     
  3. fenderman

    fenderman Staff Member

    Joined:
    Mar 9, 2014
    Messages:
    19,907
    Likes Received:
    4,143
    Thanks for posting this BP2008, looks awesome.
     
  4. deebee

    deebee n3wb

    Joined:
    Mar 16, 2014
    Messages:
    1
    Likes Received:
    1
    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 :)
     

    Attached Files:

    Mike likes this.
  5. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    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.
     
    Mike likes this.
  6. sniffy

    sniffy n3wb

    Joined:
    Mar 29, 2014
    Messages:
    2
    Likes Received:
    0
    Ok I must be the dummy here. All my pages are blank. No cam feed. The pages load just empty. :(
     
  7. sniffy

    sniffy n3wb

    Joined:
    Mar 29, 2014
    Messages:
    2
    Likes Received:
    0
    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.
     
  8. sprucecams

    sprucecams Getting the hang of it

    Joined:
    Aug 4, 2014
    Messages:
    133
    Likes Received:
    7
    Location:
    Chicagoland
     
  9. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    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.
     
  10. sprucecams

    sprucecams Getting the hang of it

    Joined:
    Aug 4, 2014
    Messages:
    133
    Likes Received:
    7
    Location:
    Chicagoland
    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.
     

    Attached Files:

  11. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    That happens when you log in with an account that doesn't have access to all the cameras. Check your account settings in Blue Iris.
     
  12. sprucecams

    sprucecams Getting the hang of it

    Joined:
    Aug 4, 2014
    Messages:
    133
    Likes Received:
    7
    Location:
    Chicagoland
    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?
     
  13. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    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.
     
  14. sprucecams

    sprucecams Getting the hang of it

    Joined:
    Aug 4, 2014
    Messages:
    133
    Likes Received:
    7
    Location:
    Chicagoland
    I will try that. Thanks!
     
  15. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    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: Nov 5, 2016
    fenderman likes this.
  16. Rollo

    Rollo n3wb

    Joined:
    Aug 4, 2014
    Messages:
    20
    Likes Received:
    4
    Small bug - when I click clips it shows alerts, and when I click alerts it shows clips.
     
  17. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    Are you sure? The text "Clips" on the left isn't a button. The options are Alerts, New+Stored, and Flagged.
     
  18. Rollo

    Rollo n3wb

    Joined:
    Aug 4, 2014
    Messages:
    20
    Likes Received:
    4
    Ahh that makes sense. I was reading the screen to have the option to the right of the description so 'Clips x' 'Alerts x'.
     
  19. Seth A Rios

    Seth A Rios n3wb

    Joined:
    Oct 25, 2014
    Messages:
    11
    Likes Received:
    0
    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 .
     
  20. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    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.
     
    timmmay likes this.
  21. timmmay

    timmmay n3wb

    Joined:
    Jul 6, 2014
    Messages:
    9
    Likes Received:
    0
    hi bp2008, thanks for creating this app! i hope this one is more agreeable to my system than the java version:). how do i edit this one to display on 2 monitors? is that what the groups setting is for?
     
  22. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    Yes, I believe you can use groups.htm for this.

    Here is what I recommend:

    1. First, go into Blue Iris and create two camera groups. One group for each of your monitors. Add the cameras you want on each monitor to the appropriate groups.
    2. Set up groups.htm with those two groups, following the normal groups.html setup procedure.
    3. Open groups.htm twice in separate windows, and switch to the second group in one of them.

    Notice that the main Blue Iris applicaiton has a dropdown list where you can select a camera group, then click the gear icon and you will have the option to change the image resolution for the group. If you set this to match your monitor resolutions, you will have better image quality.
     
    timmmay likes this.
  23. timmmay

    timmmay n3wb

    Joined:
    Jul 6, 2014
    Messages:
    9
    Likes Received:
    0
    thanks a lot bp! following your instructions, i got it setup now to display all my cameras on 2 monitors all cams style. for some reason though when i click a camera it doesn't go full screen? is that feature available on groups also, or did i miss something?
     
  24. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    Are you sure you configured groups correctly? The configuration should contain the "short names" for the group and each of your cameras in the group. If you only put in the group names then it would appear to have no click-to-fullscreen feature.
     
    timmmay likes this.
  25. timmmay

    timmmay n3wb

    Joined:
    Jul 6, 2014
    Messages:
    9
    Likes Received:
    0
    got it! i knew i missed something. works great now, thanks again bp! you could really tell the difference in image quality compared to your other viewer written in java. the image on that one is much better. click to full-screen image quality looks great but small screen(all cam view) looks degraded. since i'm only using this on lan, is there a way to improve the image quality when its on all cam view?
     
    Last edited by a moderator: Nov 4, 2014
  26. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    I have developed a new page which I call UI2.

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

    [​IMG]

    • Click a camera to maximize its size
    • 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)
    • 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.
    • Click a camera to full-screen it in full resolution. Click again to go back.
    • 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.
    • Some aspects of UI2 are configurable, with settings stored in your browser.
    • Many more features planned.

    Feedback is very welcome. Just reply to this thread.

    The download link is the normal link, back in the first post: http://www.ipcamtalk.com/showthread...emote-live-view-page&p=422&viewfull=1#post422
     
    Lebeter, fenderman and Mike like this.
  27. Mike

    Mike Staff Member

    Joined:
    Mar 9, 2014
    Messages:
    1,455
    Likes Received:
    559
    Location:
    New York
    Really like the new look, great job!
     
  28. Lebeter

    Lebeter Getting the hang of it

    Joined:
    May 6, 2014
    Messages:
    103
    Likes Received:
    16
    Great improvements, very useful now and the ability to zoom in/out with the scroll wheel is superb. Nice job on this.
     
  29. fenderman

    fenderman Staff Member

    Joined:
    Mar 9, 2014
    Messages:
    19,907
    Likes Received:
    4,143
    @bp2008, Looks very good but video is choppy compared to the activex viewer...is there something im missing or is this just a result of jpeg..
     
    Last edited by a moderator: Nov 5, 2016
  30. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    5,131
    Likes Received:
    1,998
    Choppy video is a result of the underlying jpeg refresh scheme, and is especially noticable if you view with a high latency connection and/or low bandwidth. If you haven't updated Blue Iris recently, there were some very nice web server buffer changes which make it a lot better than before.

    There are some alternative ways I could pull video, but none of them are ideal.

    Blue Iris can feed me mjpeg streams, which work better on high latency, high bandwidth connections than normal jpeg refreshing. But the underlying technology is still jpeg compression so it isn't "real" video and it is inefficient as heck.

    Blue Iris also has the option to pull a couple different formats of "real" video stream, which is what the activex viewer uses. If I wanted to introduce a dependency on a browser plugin, I could make this work similar to the activex viewer, minus the Internet Explorer requirement.

    What I'd really like is for Blue Iris to produce one of the html5 video formats. The "raw h.264 stream" output doesn't work, and neither do any of the other documented video formats Blue Iris supports.