Userbag.co.uk

The aim of this blog post is to run through an easy and cost effective way to get any existing BNC / Analogue CCTV cameras you may have hooked up and working again with Blue Iris.

I put this blog post together primarily because I was unable to find a similar one that already existed. Although you could figure this all out on your own with a few hours of forum/blog trawling and a fair bit of tinkering – I suspect most people would rather save themselves an evening & avoid some of the guess work in terms of what equipment to order.

To be clear – If you’re setting up a new CCTV install, I’d strongly recommend just buying some IP cameras instead as the resolution & clarity will be much higher. The hookup has great reviews on some decent POE IP Cameras. https://www.youtube.com/watch?v=xg3krwlX4jk

On the other hand if you have a load of already wired up and connected old school CCTV cameras that you’d like to bring back to life, either for convenience, or just because. Read on.

What I’m working with…

• I have a blue Iris 5 setup on a windows PC, already connected up with a few IP Cameras.
• I have 4 “swpro-735cam” cameras mounted around the outside of the house, relics from an old installation before I moved here.
• The BNC/Power cables for the cameras are all sat in my hall and easily accessable.

My Goal.

Get the existing 4 Swann cameras working again and have them visible in Blue Iris without spending too much money.

My plan of attack to solve this is to use a cheap DVR, and get that to stream the footage straight up to Blue Iris. Although specific RTSP/BNC video encoders etc exist, all the ones I came across were massively more expensive than a cheap DVR.

The DVR.

In my case I bought a “ANNKE CCTV DVR” (this one to be exact). So far as I can tell most other models appear to be almost identical – at least on the hardware side – so my choice of going with Annke was mostly just because I recognised the brand name.

The exact model I ended up with was a  DN41R which set me back around £40.

The setup was fairly straight forward. I attached a temporary VGA monitor, the mouse included in the box then power it up and connected the 4 BNC cables to the back (ensuring the cameras were all powered). You will have to run through a quick setup wizard, involving setting up some passwords and secret questions for the DVR. After that you should hopefully see your cameras on the screen assuming they all work.

If it asks, its also worth telling it you don’t want to run the wizard on startup, as the camera streams appear to hang when this is open & I don’t plan on leaving a screen attached.

It is also worth just pointing out, you don’t need a harddrive in the DVR for any of this to work, so mine remains empty.

Getting the DVR streams working.

The next step is to get the DVR outputting some the RTSP streams that we want to feed in to Blue IRIS.

1. First off, I connected the Annke DVR to my network with the ethernet cable.
2. Step 2 was to open up my router control panel & grab the DVR’s IP. (This was pretty painless as it supports DHCP).
3. Browsing to the IP, you can then login to the web control panel – which is surprisingly nice looking despite the cameras not working in it (I wasn’t willing to install the plugin, but you don’t need them to set this up).

As an optional extra, I also added the DVR to my firewall list along with my other IP cameras to block it accessing the internet directly.

With luck, you should now see something along the lines of the above. If you want to have a quick test of the streams, you can actually access them straight away via RTSP using your admin credentials – although I’d recommend setting up a “Media user” and connecting with that instead for the proper set up.

For now you can poke the below in to VLC (via Open network stream) and check it works.

rtsp://username:password@{dvr-ip-address}/h264/ch1/main/av_stream

To add the Media User, head in to the configuration tab, open up Network, Advanced settings and on the final tab on the right “Integration protocols”.

On this page you can create your media user (with access level media user), then tick the enable ONVIF button. After saving this the DVR will want a reboot. Not 100% what enabling ONVIF actually does apart from opening up another rtsp stream at :

rtsp://username:password@{dvr-ip-address}/Streaming/Channels/101

Although this is the stream I’ve chosen to use in my Blue IRIS setup. While you are in here it may also be worth turning off platform access & https if you don’t intend to use them.

Before we start adding the streams to Blue IRIS it is also probably worth tweaking the configuration of the camera’s themselves a little.

On mine (As seen above) I enabled WD1 (which is the 960H resolution), selected to only stream Video rather than audio as well. I also lowered my frame rate to 15 (optional) and checked h.264+ on.

At this point I’d suggest using the “Copy to” button to set all the camera’s up the same way, then hit save. It may want to reboot again after this.

Available Streams.

The DVR appears to support two differnt RTSP stream urls, although the feeds coming from both appear to be much the same.

rtsp://username:password@{dvripaddress}:554/h264/ch1/main/av_stream

Breaks down in to /{codec}/ch{camera-id}/{stream}/av_stream

• Format (so far as i can tell it ignores this)
• Channel (ch1 – ch4 or more if you brought a DVR that supports more cameras)
• Stream (main, sub)

See the official support article for more info https://help.annke.com/hc/en-us/articles/360000252622-How-to-view-the-camera-on-VLC-player-by-RTSP- 

rtsp://username:password@{dvripaddress}:554/Streaming/Channels/101

Which breaks down in to /Streaming/Channels/{camera-id}0{stream-id}

Ie. the sub stream for camera 4 would be /Streaming/Channels/403

Blue IRIS.

After all that, we can finally start adding the cameras to Blue IRIS itself, which is fortunately really easy.

• Open the new camera dialog.
• Add the IP and the media users username & password in the boxes then hit “Find/inspect…” to check it’s happy. It should select the Generic/Onvif setup for you.
• In main stream, add the RTSP path to the camera you want to add, ie. “/Streaming/Channels/101” 
• Untick “Send RTSP keep-alives” (See troubleshooting)
• Then hit okay and you should have your camera working! 

While your here its also likely worth setting the Direct to disk & hardware encoder options if you have these available.

You should now just run through the above steps for each camera you want to add (just incrementing the camera-id number as you go).

Success

With a bit of luck, you should now be done and happily viewing your old BNC connected cameras in Blue IRIS (Even if the quality is sadly pretty potato compared with newer IP cams).

If you are still having issues with the camera feeds, I’ve documented a few of the key problems I encountered getting everything running smoothly. The above instructions with luck will have prevented you ending up with any of them, but on the off chance they haven’t, I’ll detail them below as well as what ended up solving them for me. I suspect of the time spent setting this all up, 90% went in to debugging the below “fun”.

The Cameras keep dropping out & resetting?

Initially i thought this was due to the DVR being under-powered and wasted a ton of time trying different media encoding, frame rates and settings. 

As it turns out for some reason the DVR really does not like RTSP keep-alives. Having this enabled resulted in the cameras stopping after 5 or so seconds, then getting rebooted by watchdog. Since I turned this off they have been running fine.

Error: 80002745 (Socket error: 10053) 0

This is a weird one and only seemed to pop up when I was using the none H264+ encoding. I originally thought it was a Blue IRIS issue with the stream (as VLC worked fine on my desktop). Turns out some odd authentication hi-jinx were at play – as I eventually noticed VLC also didn’t work if I attempted to open the stream on the PC running Blue IRIS. 

Oddly it started working again as soon as I logged in to the web admin panel for the DVR from that PC – although often dropped out again not long after.

After disabling the keep alives, switching to h264+ I’ve not seen this happen. Although while attempting to work this out I did end up making a number of other changes. I don’t think any of these were what solved the issue, but on the offchance one of them was, the other things i attempted were;

• Disabling timeout on login (done from within the DVR’s local UI)
• Upgrading the DVR firmware.

If you need to upgrade your firmware, you can grab it from here: https://help.annke.com/hc/en-us/articles/900000011006-Firmware-upgrade (Just load it on to a USB, then use the built in upgrade function under Maintenance on the local UI – the web version appeared broken for me).

If your DVR is the same as mine you will need to upgrade to the 20190401 version, rather than the latest 20190505 – as this version is apparently too large for the DVR and thus won’t allow itself to be installed.

The DVR camera page, the 960×576 isn’t an option.

Its possible that your camera doesn’t support it, but in a lot of cases it may just be that the UI hasn’t correctly refreshed the options in the drop down. I found that by swapping to “camera 2” in the drop down at the top, then back to camera 1, the correct values got populated.

Also ensure that W10 is enabled and has been saved + you have refreshed the page after doing so.

As the first major bit of work I’ve done on PJAX-Standalone (Pushstate AJAX) in quite some time (aside from the occasional bug fix), version 0.6.0 of PJAX-Standalone includes a totally overhauled demo site (saving future PJAX uses from the horror of encountering my design skills), in addition to the bug fixes, code tweaks and features I was initially planning.

Key changes include:

• Updated docs & demo
• Options to enable/disable autoAnalytics and returnToTop
• Universal Analytics support
• Access to request information in callbacks via event.data
• Fixes for title handling & control click not working

A fuller list of changes found in the new version can be found in this github pull request.

The new and improved PJAX-standalone sample site is also now live.

While working on a little side project of mine, I came across the need for a really simple method of performing HTML templating within JavaScript. Since JQuerys method had been deprecated, and seeing as I had no real requirement for any fancy functionality, I decided to quickly throw together my own implementation, which can be grabbed below.

 /**
 * TPL provides an ultra light weight, super simple method for quickly doing HTML templating in javascript.
 * @author Carl Saggs
 * @version 0.2
 * @source https://github.com/thybag/base.js
 */
 (function(){

	/**
	 * template
	 * Template a HTML string by replacing {attributes} with the corisponding value in a js Object.
	 * @param String (Raw HTML or ID of template node)
	 * @param JS Object
	 * @return NodeList|Node
	 */
	this.template = function(tpl, data){
		//Find out if ID was provided by attempting to find template node by ID  
		var el = document.getElementById(tpl);
		// If result is null, assume was passwed raw HTML template
		if(el !== null) tpl = el.innerHTML;
		//transform result in to DOM node(s)
		var tmp = document.createElement("div");
		tmp.innerHTML = replaceAttr(tpl,data);
		var results = tmp.children;
		//if only one node, return as individual result
		if(tmp.children.length===1)results = tmp.children[0];
		return results;
	}

	/**
	 * replaceAttr
	 * Replace all {attribute} with the corisponding value in a js Object.
	 * @param String (raw HTML)
	 * @return String (raw HTML)
	 * @scope private
	 */
	var replaceAttr = function(tpl, data, prefix){
		//Foreach data value
		for(var i in data){
			//Used for higher depth items
			var accessor = i;
			if(typeof prefix !== 'undefined') i = prefix+'.'+i
			//If object, recusivly call self, else template value.
			if(typeof data[i] === 'object'){
				tpl = this.replaceAttr(tpl, data[i], i);
			}else{
				tpl = tpl.replace(new RegExp('{'+i+'}','g'), data[accessor]);
			}
		}
		//return templated HTML
		return tpl;
	}

	//Add tpl to global scope
	window.tpl = this;
}).call({});

Essentially the code just provides a simple way of passing in some arbitrary HTML markup, then swapping out any contained {bla} tags with the values stored in the associated JavaScript object.
Say for example we had a array of people objects and we wanted to apply a simple template to them, before appending them in to our document. To do this you could use code similar to the following:

var test = [
	{"name":"Dave","age":22},
	{"name":"James","age":42},
	{"name":"Tim","age":27}
];
test.forEach(function(personObj){
	var el = tpl.template("<div class='person'><strong>{name}</strong><span class='right'>{age}</span></div>",personObj);
	document.body.appendChild(el);
});

Alternately if you had some more complex markup, or just wanted to separate the templates from the general script a little more, you can specify your template HTML in script tags (or any other elements) and reference them by id. For the example above you would just have something like this within your html document

<script id='myTemplate' type='text'>
	<div class='person'>
		<strong>{name}</strong>
		<span class='right'>{age}</span>
	</div>
</script>

Which could then be utilised in the following manner.

var el = tpl.template("myTemplate", personObj);

The script will also happily support passing in multidimensional objects which can be used in the templates as obj.attr.anotherattr etc.

As with most code I write, the source is on github and may be updated periodically with bug fixes and new features. Currently my templating method is incredibly basic and has almost no features compared to pretty much all others out there. That said, it does what I need it to, so its not all bad 🙂

Thanks for reading,
Carl

A new version of my PHP SharePoint Lists API has now been released; the new version includes multiple bug fixes, optimisations and a number of new features.

The most notable new feature of the PHP SharePoint Lists API is the query method. The query function allows users to run complex query’s against sharepoint lists using an easy to follow and expressive SQL like syntax.

For example, using the query feature you can easily query a list of pets to return all items relating to dogs under 5, ordered by age.

$sp->query('list of pets')
   ->where('type','=','dog')
   ->and_where('age','<','5')
   ->sort('age','ASC')
   ->get();

“OR” querys can also be used, for example, if you wanted to return a list of 10 pets that were either cats or dogs, you might write:

$sp->query('list of pets')
   ->where('type','=','cat')
   ->or_where('type','=','dog')
   ->limit(10)
   ->get();

The PHP SharePoint Lists API is available on Github and can be used for free in any projects you may wish (under the terms of the MIT Licence). You can download it directly by clicking here.

PJAX or Pushstate AJAX is a fairly new twist on the traditional AJAX page loading idea, although unlike its predecessors PJAX takes advantage of the new Pushstate history API’s in order to provide it with real permalinks and history as opposed the the document.hash based hacks which the former has had to make do with.

The result is that its now possible to gain the performance boosts that AJAX page loading makes possible, across the majority of the major browsers (IE not included), without any fear of compromising backwards compatibility or the native behaviours of the browser (back button etc).

Unfortunately the main source of PJAX goodness is JQuery plugin ( jquery-pjax) meaning that those who favour alternative JavaScript frameworks – or even none at all – are left out in the cold.

To remedy this, I decided to create my own standalone implementation of PJAX (Which I insightfully named as PJAX-Standalone). Like its counterpart PJAX-standalone was designed to be highly customisable while at the same time, incredibly easy to get working. For many webpages nothing more than the addition of an ID to your content container and a single call to the PJAX-Standalone script is required.

For those who want more functionality a number of callbacks can also be set in addition to being able to invoke PJAX page loading programmatically as well.

You can see an example of the script in action on the PJAX-Standalone demo page.

Full details on how to use and configure PJAX-Standalone can be found on  Github.