Including Cameras into HSTouch project

I wanted to incorporate my security cameras into my HSTouch project. I have a range of different cameras using different protocols so the easiest thing for me to do was to setup a NVR using Blueiris 4 and then serve up the content from there.

With HStouch I have to render it as an HTML page which means I have to size the image first to match my screen as you can’t adjust within HSTouch. Linked below is a zip containing the html files I used to render the image to the correct size. There is also a blank.htm file which I mention why later in the post;

Cameras

Unzip and drop in the main folder
C:\Program Files\Blue Iris 4\www

Note: doesn’t matter if the file extension is either .htm or .html either will work fine

If you add them into a subfolder that would be fine, you would just need to remember that when trying to access the camera URL
e.g. if you created them in a folder called “camera” and using the same filenames as attached
then the url would be
http://ipaddress:port/camera/cam4-640×480.htm
instead of
http://ipaddress:port/cam4-640×480.htm

I’ve attached all mine (I have 8 cameras) which you can just drop directly in the above location (green) if that’s easier.
Note you may need edit the attached files in notepad (or even better Notepad++ if you have it installed as it makes the code easier to read) to change var cams = ‘cam4’; to whatever the names are of you cameras are.

With any luck it may just work without having to edit them.

To check what to call them, open up Blueiris then right click on your camera and select camera properties. There is a field called “Short name” whatever is the in the box next to that is what you put in the var cams = ‘entervaluehere’

You will also notice there is one called blank.htm add that in there as well, you won’t need to modify that one just drop it straight in. I haven’t tested whether I still need this file anymore, but previously there was a “feature”/bug in the android HSTouch client where if you left a camera streaming to it eventually it would run out of memory and crash. I set mine up so that after a few minutes it would change back to the blank screen, or if I navigated away from the camera screen do the same so it didn’t try and stream in the background even though the camera page was no longer shown. Without it she would crash pretty much every day.
The URL will depend on your Blueiris setup so check your Options page (a screenshot would be handy of the web server page under Blue Iris Options).
http://ipaddress:port/cam1-640×480.htm&user=username&pw=password
where username and password are what you have setup up BI Options -> Users
If on the Web Server Options you have Authentication set to “Non-LAN only” you won’t need the &user/pass added on the end of the URL like above if you connect to the Local, internal (LAN) access IP rather than Remote, external (WAN/Internet) access IP. If you use the LAN IP the screens will only work within your network (i.e. wont work if you install it on your phone and try and connect via Mobile network). If you use the WAN IP you will need to have a Static IP address from your Internet Service Provider as it will otherwise periodically change and break the screens (there are other options such as DynDNS to work around this and can go into more detail if that’s an issue).
Anyways start there and make sure the page loads first
On the HStouch Designer side have a look at this clip I made for someone else a while back that steps through the setup of a camera page as this may highlight something that’s not right for you

Leave a Reply

Your email address will not be published. Required fields are marked *