Author Topic: I made a better remote-live-view page  (Read 17267 times)

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
I made a better remote-live-view page
« on: April 28, 2013, 02:39:18 am »
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:

For Blue Iris 3.60's new camera grid layout:
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

Features

Several new pages are included:

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.

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.

login.htm

  • A replacement login page that can remember your user name and password and optionally log you in automatically.
  • Blue Iris replaces this when it updates so you'll need to copy it back in every time if you want to keep it.

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 "jpegpull2.htm" page:

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

Press F11 to load full-screen mode.

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.

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

Live viewing over LAN?  Try the Java app.

Full-screened on a high-resolution monitor, it has much better image quality 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 above allcams.htm page, but it provides a much better experience if image quality and responsiveness is of higher concern than efficiency.

You can download it here:

https://blueirisview.codeplex.com/

   Usage

  • Extract and run BlueIrisViewer.jar on the computer you want to view cameras with.  If your system can't open this, ensure you have Java installed correctly.
  • Press the 'o' ("OH!") key on your keyboard to open the options menu.  If anything goes horribly wrong, which it shouldn't, you can delete BIVSettings.cfg from the directory where your BlueIrisViewer.jar is located and everything will be back to defaults.
« Last Edit: August 14, 2014, 12:48:13 am by bp2008 »

Offline rolandk10

  • Full Member
  • ***
  • Posts: 114
    • View Profile
    • Email
Re: I made a better remote-live-view page
« Reply #1 on: April 28, 2013, 03:17:47 am »
Looks nice. 


Only thing I notice is in the all cam view, the cameras are each 1:1 instead of 4:3.  It l;ooks like the over all display is 4:3 but my 12 cameras (4 across 3 down) are being forced in to that area.


Offline No5

  • Sr. Member
  • ****
  • Posts: 302
    • View Profile
Re: I made a better remote-live-view page
« Reply #2 on: April 28, 2013, 05:48:02 am »
Doesn't the camsonly.htm in the www folder do the same thing?
Or am I missing something?
;)
Axis (7) total cam solution, Intel i7 Dell XPS, Win7 Pro 64. Adding ACTi product line. Canada.

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #3 on: April 28, 2013, 06:12:10 am »
Looks nice. 


Only thing I notice is in the all cam view, the cameras are each 1:1 instead of 4:3.  It l;ooks like the over all display is 4:3 but my 12 cameras (4 across 3 down) are being forced in to that area.

That is strange.  My 16 camera 4x4 view is 16:9, and each camera has its aspect ratio preserved.  Is your Blue Iris perhaps an old version?

Doesn't the camsonly.htm in the www folder do the same thing? Or am I missing something?

Also if you use IE, you can double click on the cameras and the matrix goes full screen.

Not at all! :)

camsonly.htm doesn't full-screen a single camera when you click on it whereas my page does.  Further, camsonly is limited to IE and it has a top and bottom border which I don't like.  Especially the bottom, as it is white.  The closest functionality I have seen in the included pages is iphone.htm, but it has blue borders, a dropdown list at the top, doesn't scale correctly on a desktop browser, and clicking cameras loads the wrong camera(s) if you have groups set up.

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #4 on: April 28, 2013, 06:29:19 am »
Earlier I made a much less efficient page which looked and functioned basically the same, except it downloaded full resolution images from every camera all the time.  This had benefits like no delay after clicking and a sharper grid view.  But it was a bit glitchy, used an order of magnitude more bandwidth and CPU both on the browser machine and on the Blue Iris server, consumed hundreds of gigabytes of disk space per day (browser cache), and had a lower frame rate too.  The fact that it filled my SSD every day if I didn't remember to load the page in Incognito mode is why I created this new, more efficient page :)

Offline rolandk10

  • Full Member
  • ***
  • Posts: 114
    • View Profile
    • Email
Re: I made a better remote-live-view page
« Reply #5 on: April 28, 2013, 07:58:11 am »
No, I use the latest version.

II tested in ie10 under win 8. I'll try it know a win7 box.

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #6 on: April 28, 2013, 08:54:51 pm »
I also built a java application designed to run on a wired LAN where bandwidth is not an issue.  It uses a lot more CPU too, and is a bit more complex to set up, but it is well worth the trouble if you want to take full advantage of a large display.  It is available for download in the first post.

Offline Brad-Pea

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: I made a better remote-live-view page
« Reply #7 on: April 30, 2013, 11:18:43 pm »
Got a question regarding the Java viewer ....

Is it possible to enter username and password into it ?

I have authentication enabled for both external and internal.

Cheers.

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #8 on: May 01, 2013, 04:28:58 am »
There is not; but with sufficient demand I could certainly make it detect the login page and ask for your login info.  Or it could go in the config file.  Which way would you prefer if I was to implement it?  Both ways perhaps?

Offline Bitwise

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: I made a better remote-live-view page
« Reply #9 on: May 01, 2013, 08:00:28 am »
Funny, I actually signed up 3 days ago to try and upload my new interface. However, the forum would not send me an activation email.

Not to hijack your thread....

This is also a fullscreen interface that works by combining parts of /jpegpull.htm and /iphone.htm and cleaning up the original javascript without the addition of jquery. I also added the BI logo (for fun) on the side.

I wanted to take the full screen thing a step further by making the browser appear in a popup window to reduce the chrome on the browser.  To do this, I added a URL parameter called ?pop=1.

Copy both files to the WWW directory.  Create a bookmark in your browser to http://yourhost/fullscreen.htm?pop=1, this will get you the popup window.  If you don't want the popup, just link to http://yourhost/fullscreen.htm

As an added bonus (and tribute), I added BP2008's slow refresh as well.  You can put ?refresh=1000 for 1 second and so on. You can also chain it with the popup window like a normal URL.

https://localhost/fullscreen.htm?refresh=5000&pop=1

http://ccgeek.com/full-screen.zip
« Last Edit: May 01, 2013, 09:20:06 am by Bitwise »

Offline Brad-Pea

  • Jr. Member
  • **
  • Posts: 95
    • View Profile
Re: I made a better remote-live-view page
« Reply #10 on: May 01, 2013, 08:01:21 am »
Yeh both ways would be good with me ... That way you can have a choice ?

I think myself personally would prefer it to detect the login page and ask for credentials.

That way you don't have a password saved in a plain text document ?

But maybe the config file could be easier ... And the view would open instantly that way.

Have always been after a blue iris viewer for the computer.

Haven't got round to testing your HTML page yet.

Cheers.

Offline ThinkFear

  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: I made a better remote-live-view page
« Reply #11 on: May 01, 2013, 02:34:56 pm »
This is great, bp. I was just looking for alternatives for the BI web interface. Allcams.htm is just what I'm looking for. My only thing is that there is no way to switch between camera groups. In the stock viewer they are listed above the cameras on the side as "+group1", "+group2", etc. Would you be willing to add either a dropdown or a button (Or even a keyboard shortcut ala F11 for fullscreen) to switch between groups to the page?

EDIT:

The aspect ratio distortion occurs for me in internet explorer, similar to roland. Chrome displays the page fine and it works great with Chrome's app shortcuts, too.  :)
« Last Edit: May 01, 2013, 03:29:37 pm by ThinkFear »

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #12 on: May 01, 2013, 04:33:22 pm »
Funny, I actually signed up 3 days ago to try and upload my new interface. However, the forum would not send me an activation email.

Not to hijack your thread....

This is also a fullscreen interface that works by combining parts of /jpegpull.htm and /iphone.htm and cleaning up the original javascript without the addition of jquery. I also added the BI logo (for fun) on the side.

I will definitely try this later when I am home, but from the look of it, this would make a nice alternative.  However at first glance it looks like you have ignored the existence of camera groups which, if present, will break your page.  Or maybe I missed the part of your javascript that handles it.

Yeh both ways would be good with me ... That way you can have a choice ?

I think myself personally would prefer it to detect the login page and ask for credentials.

That way you don't have a password saved in a plain text document ?

But maybe the config file could be easier ... And the view would open instantly that way.

Have always been after a blue iris viewer for the computer.

Haven't got round to testing your HTML page yet.

Cheers.

Sure.  I think I will implement it so that it will try stored credentials first (if there are any) and if that fails or if there were none stored, it will ask.

This is great, bp. I was just looking for alternatives for the BI web interface. Allcams.htm is just what I'm looking for. My only thing is that there is no way to switch between camera groups. In the stock viewer they are listed above the cameras on the side as "+group1", "+group2", etc. Would you be willing to add either a dropdown or a button (Or even a keyboard shortcut ala F11 for fullscreen) to switch between groups to the page?

EDIT:

The aspect ratio distortion occurs for me in internet explorer, similar to roland. Chrome displays the page fine and it works great with Chrome's app shortcuts, too.  :)

Ah, I see!  IE 7 and 8 both do this wrong, but IE 9+ works correctly.  I'm going to stubbornly refuse to fix this one to encourage people to stop using IE.  (you wouldn't believe how much time web developers waste making their sites look right in all the different versions of IE)

Also, I am not sure exactly what you are wanting regarding switching camera groups, but it gets complicated when you want to deal with image groups.  Thumbnails of the groups aren't included in the grid image that Blue Iris generates.  Also, Blue Iris doesn't tell its remote pages which cameras belong to which groups, so it is impossible to enable clicking a thumbnail in an image group to load a particular camera.

Offline ThinkFear

  • Newbie
  • *
  • Posts: 39
    • View Profile
Re: I made a better remote-live-view page
« Reply #13 on: May 01, 2013, 04:47:24 pm »
I feel you on IE. I only keep the older version around for compatibility.

RE: groups - I really want the ability to only display cameras from certain groups and switch between the groups. I have around 25 cameras in BI, so I prefer to have specific sets of 9, 4 etc that I can choose between. I definitely appreciate that it isn't always as simple as it seems. I'd be willing to putting a bounty on the feature, if you're willing to take a crack at it. The groups don't have to be defined in BI, if thats an issue. I'm ok with them being defined in a separate config file.
« Last Edit: May 01, 2013, 04:49:06 pm by ThinkFear »

Offline bp2008

  • Hero Member
  • *****
  • Posts: 1147
    • View Profile
Re: I made a better remote-live-view page
« Reply #14 on: May 01, 2013, 10:10:34 pm »
I feel you on IE. I only keep the older version around for compatibility.

RE: groups - I really want the ability to only display cameras from certain groups and switch between the groups. I have around 25 cameras in BI, so I prefer to have specific sets of 9, 4 etc that I can choose between. I definitely appreciate that it isn't always as simple as it seems. I'd be willing to putting a bounty on the feature, if you're willing to take a crack at it. The groups don't have to be defined in BI, if thats an issue. I'm ok with them being defined in a separate config file.

Ah, well it is probably not exactly what you are looking for, but with a little configuration my Java application is capable of letting you define whatever camera grids you want.  Each cell of the camera grid can contain:

* a single camera
* a camera group image (containing thumbnails of each camera in the group)
* the index image (containing thumbnails of all cameras)

First, follow the instructions in the 1st post to get the java application running with the "default" camera grid, then in the config file change "allcams=true" to "allcams=false" as described under Advanced configuration.  You can then modify the automatically generated camera list however you see fit and the application will use that.  To insert a camera group, insert the group ID string that you entered when creating the group in Blue Iris.  To insert all cameras into a single cell, you can use the word index.

You can also make copies of the application folder and run it multiple times if you like, with each instance running different cameras.

Edit: You can't actually nest a clickable camera grid inside another, however, in case that is what you were hoping for.  Such a thing would not be worthwhile for me to program.

Edit 2: If you like the functionality of the java application, I also have a web-page-based version of the same thing but it is less smooth to use so I haven't published it anywhere.
« Last Edit: May 01, 2013, 10:14:51 pm by bp2008 »

 

Mobile Theme