Default Blue Iris web interface discussion

bp2008 · Apr 13, 2016

It has come to my attention that Ken is open to improving Blue Iris's web interface with 3rd-party help.

Many people have told me they think UI2 should be included with Blue Iris. I have never been in favor of that idea, so I never brought it up with Ken. My reasoning is this: I have enjoyed great freedom with UI2 being an addon like it is. I can change what I want, when I want, and distribute it on my own schedule without affecting Ken's business or requiring his approval. Besides those selfish reasons, UI2 has always been about providing lots of functionality and customization, even at the cost of simplicity and aesthetics. I think average users would be more appreciative of a prettier UI that doesn't have as many options to confuse them.

So I've been thinking. @ruppmeister started designing a new Blue Iris web UI a while ago and pretty much everyone who sees it wants it. I told everyone I would be willing to build this UI with his help. Maybe this could be the new web interface for Blue Iris. If Ken is receptive, maybe ruppmeister and I could actually make some money from our work.

Let me be clear. Regardless of the outcome of this, I intend to continue maintaining UI2 as a separate addon the way it has always been.

ruppmeister · Apr 14, 2016

I am in for the challenge. See where it can be taken I guess. Not sure how much help I will be on the coding side, but I can certainly pitch in on graphics and such.

bp2008 · Apr 14, 2016

Thanks. Though I know my way around most of the relevant tools, graphic design is not one of my strengths. You make it look so easy.

Rockford622 · Apr 14, 2016

The one thing that I like about the original interface over UI2 is I like smooth video playback. When I use UI2, it seems (probably because it is) that the display is just a series of jpeg images running around 3 fps. I have my cameras set to 20 fps because I like the smooth playback and the ActiveX plugin offers that.

Am I missing something, is that just the way it is?

Other than that, UI2 does have some very nice features.

bp2008 · Apr 14, 2016

Rockford622 said:
The one thing that I like about the original interface over UI2 is I like smooth video playback. When I use UI2, it seems (probably because it is) that the display is just a series of jpeg images running around 3 fps. I have my cameras set to 20 fps because I like the smooth playback and the ActiveX plugin offers that.

Am I missing something, is that just the way it is?

Other than that, UI2 does have some very nice features.

You are right of course. Browsers are terrible at receiving live video streams without plugins, so jpeg video is currently the only viable option. It would certainly be possible to integrate the ActiveX plugin into a page like UI2, but it would only work in Internet Explorer, which is losing popularity by the day. Microsoft's new Edge browser doesn't support ActiveX and neither does anything else.

I suspect it would be possible, with a lot of effort from Ken, to provide a compatible h264 stream through a web socket and play it with this Javascript h264 decoder: https://github.com/mbebenita/Broadway This could work in most modern browsers, even mobile ones. I don't know how well it would perform, how it would handle network interruptions, or what kind of video delay there might be, but it seems like it could be the best option at least for now.

bp2008 · Apr 14, 2016

Hmm. Things have improved since I last tried this. It turns out there are now a few free javascript libraries which can handle HLS streaming in just about any web browser, and Blue Iris happens to support HLS streaming. Win:win.

You can try it yourself by pasting the following in a new file such as "html5test.htm" in your Blue Iris www directory, then open the page in any browser. It will try to load the All Cameras grid by default, or you can include a camera name in a URL parameter: "html5test.htm?cam=shortname"

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Html5 Video Test - Blue Iris</title>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
	<script type="text/javascript">
		var UrlParameters =
		{
			loaded: false,
			parsed_url_params: {},
			Get: function (key)
			{
				if (!this.loaded)
				{
					var params = this.parsed_url_params;
					window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { params[key.toLowerCase()] = decodeURIComponent(value); })
					this.loaded = true;
				}
				if (typeof this.parsed_url_params[key.toLowerCase()] != 'undefined')
					return this.parsed_url_params[key.toLowerCase()];
				return "";
			}
		};
	</script>
</head>
<body>
	<div>
		<div id="player"></div>
	</div>
	<script type="text/javascript">
		var src = "/h264/" + (UrlParameters.Get("cam") == "" ? "index" : UrlParameters.Get("cam")) + "/temp.m3u8";
		var player = new Clappr.Player({ source: src, parentId: "#player", autoPlay: true, width: 1280, height: 720 });
	</script>
</body>
</html>

The video stream appears to use the Streaming 0 encoder profile that you can set up in Blue Iris Options > Web server, so if the quality sucks, increase it in the Streaming 0 profile.

Now as reliably as this works, it is not without its flaws. This streaming method works by sending little chunks of video data that are each a few seconds long. Blue Iris can't start sending one of these chunks until it has completed (I'm guessing). This means there is a few seconds of unavoidable delay in the video. In fact in my experience you end up with about 10 seconds of delay on average. For the same reason, it takes about 4 seconds for Blue Iris to prepare the first chunk for you to begin streaming a camera or a camera group. In contrast, the ActiveX plugin manages to stream with no visible delay at all (compared to any other viewing method). Also it fails to work with cameras that have audio enabled in their streams. Not sure why; it could be either Blue Iris' fault or the script's fault or both.

Also, it may be some setting I can't find, but Blue Iris doesn't seem to want to stream faster than about 7 or 10 FPS whether I'm using ActiveX or HLS.

norderredron · Apr 14, 2016

bp2008 said:
Also, it may be some setting I can't find, but Blue Iris doesn't seem to want to stream faster than about 7 or 10 FPS whether I'm using ActiveX or HLS.

I was able to reproduce this issue and attribute it to two things. Make certain in the webserver options that you uncheck "Limit Bitrate" for the encoding options for the stream you use (I unchecked all three). More than likely however you are talking about how the small live preview window for each camera seems slow (5-10 fps), I found if you click and enlarged the camera, either to full window or actual full screen, you will see the full streaming frame rate. I can only assume this is due to some resizing overhead or an intentional downgrade to accommodate viewing multiple cameras at once.

I just want to say I am completely behind a new Blue Iris web server interface and am looking forward to contributing.

bp2008 · Apr 14, 2016

Hmm. HLS streaming works with audio for one of my two cams with audio, but not for the other cam.

Also, I think I figured out why the frame rate was lower. I was trying to stream a 4MP camera. If I limit its resolution or if I stream a lower resolution camera, then the HLS stream has a higher frame rate. It seems it is just limited by the available processing power. If Ken makes it possible to do hardware-accelerated h264 encoding, that problem might go away.

bp2008 · Apr 14, 2016

norderredron said:
More than likely however you are talking about how the small live preview window for each camera seems slow (5-10 fps), I found if you click and enlarged the camera, either to full window or actual full screen, you will see the full streaming frame rate.

Yes, the multiple-camera grids have a lower frame rate; I'm used to that. I used to run my all cameras group at 3840x2160 resolution. Now that is a recipe for a low frame rate.

chaycock · Apr 15, 2016

Rockford622 said:
The one thing that I like about the original interface over UI2 is I like smooth video playback. When I use UI2, it seems (probably because it is) that the display is just a series of jpeg images running around 3 fps. I have my cameras set to 20 fps because I like the smooth playback and the ActiveX plugin offers that.

Am I missing something, is that just the way it is?

Other than that, UI2 does have some very nice features.

Agreed, I experience the same thing too, which is why I reverted back to using the stock BI web interface. Having said that, the UI2 is a very nice looking interface....it does seem to take quite a bit longer to load though....

bp2008 · Apr 15, 2016

chaycock said:
....it does seem to take quite a bit longer to load though....

Indeed, it can be slow to load if your connection is poor and/or nothing is cached yet. Or if you haven't updated in the months since I took the clip list out of the initial loading phase.

erkme73 · Apr 16, 2016

There isn't anything I dislike about UI2 except the fact that it doesn't handle low-bandwidth situations well (with the jpg push). As dated and cumbersome as the activex in the default page is, it allows me to view remote locations that have only 1mbps upload speeds - with reasonable clarity and fluidity. UI2 is like watching a slide show that advances to the next picture every 5-10 seconds. I understand this is beyond your control, bp, but it's really the only reason I haven' made UI2 exclusive.

On the flip side, it would be great if the default page had:

1) zoom/focus/IR controls
2) adjustable frames - to re-portion the various clip/alert lists more efficiently
3) live scrubber - moving the scrubber provides an unhelpful blue "connecting" status. Seeing where you are as you scrub would be loads easier
4) System stats - like UI2! CPU, disk info, FPS, system log...

lviperz · Apr 18, 2016

Just to throw it out there, I still prefer the line listing of alerts on the original BI web interface. While the live image view of UI2 is neat, I personally would like the choice to show a list or images. Maybe even a combination of both. Maybe show an image of the latest alert image from each cam but then show a text listing of the rest.

Just a thought.

bp2008 · May 9, 2016

I emailed Ken about this two weeks ago. No response.

norderredron · May 11, 2016

I'll throw another wet paper towel his way. I have been so busy recently I haven't had a chance to go over the web interface and offer suggestions.

bp2008 · May 11, 2016

At the risk of being a pest, I sent him the message again earlier today with a comment about how I hadn't received a response. I've heard of things being caught in his spam filter before.

droidvoider · Dec 7, 2016

bp2008 again thanks for UI2 and I am very aware you don't officially even work on default.htm.. But do you know a way to have the audio default ON instead of OFF? Additionally is there a way to set the AUTO refresh for clips to be always selected? Our boss is 72 years old and she is struggling to remember to check these items each morning.

problem:
When she loads the default.htm there is a line through the little speaker so no audio plays and I have to remind her everyday. also the auto refresh is always unchecked and it's impossible for her to remember to check the box.

Edit: I just remembered Java has this ondocument loaded <execute code> feature. I guess I can find the ID of those two items and just set their values when the html page is loaded.. If it works I will report back

bp2008 · Dec 7, 2016

It would be possible to write code to check the auto refresh box because that is just an HTML element, but the volume control in default.htm is in the activex plugin so you can't toggle that with javascript.

I think if you use the default2.htm page I made ages ago (it is included with ui2) then the auto refresh box will remember its state.

Search

Default Blue Iris web interface discussion

Do you think Blue Iris should include a new web interface?

(this answer is for robots so they don't skew the results)

I don't care (or wouldn't use it anyway)

No, the existing web interface is fine

Yes, a new web interface would be great

bp2008

ruppmeister

Getting the hang of it

bp2008

Rockford622

Getting the hang of it

bp2008

bp2008

norderredron

n3wb

bp2008

bp2008

chaycock

Getting the hang of it

bp2008

erkme73

BIT Beta Team

lviperz

Getting the hang of it

bp2008

norderredron

n3wb

bp2008

droidvoider

n3wb

bp2008