Embedding images from security cameras

[Andy P]

The topic of getting images from security cameras has been touched on before, and I studied all that in trying to achieve a combination of camera images with EISY node status. I thought I would share this to save someone else some time.

The idea was to create these:

The devices are retrieved using rest/nodes and rest/status, the on/off cycles around the device comes from rest/log. The top half of the circle is day, the bottom is night. Green dash is current time. The gray dashes are sunrise and sunset from /rest/time. Spokes are motion events in the log. The DIV has been set with a background image subset of an Amcrest camera (here 192.168.2.18) using CSS. Then to refresh it you have to use a script to update the ?t= part of the URL to force a new image. Fine tune the backround-size and position to get the part of the picture you want. Overflow hidden clips the image to the div.

  --imgVCcar: url('http://192.168.2.18/cgi-bin/snapshot.cgi?t=123456789');

 

.i_car {

  position: absolute;

  width: 230;

  height: 160;

  border-radius: 5px;

  overflow: hidden;

  background-image:var(--imgVCcar);

  background-size: 500px ;

  background-position: 63% 70%;

}

The breezeway image is from a Unifi Protect camera. You have to set each camera to allow anonymous snapshots first.

  --imgVCbreeze: url("http://192.168.3.183/snap.jpeg?t=123456789");

.VCbreezeway {

  background-image: var(--imgVCbreeze);

}

 

Function to update the url timestamp to force refresh:

function updateTS(value) {

    var newTS = new Date().getTime();

    return value.replace(/\?t=\d+/, '\?t=' + newTS);

}

The door sensors and motion detectors are YoLink using the plugin. The lights are controlled by Insteon dimmers. The rectangles are lastRunTime info retrieved with /rest/programs.

 

Hope this helps someone!

Andy

[Ross]

@Andy P I really appreciate what you did here.  But, it's a bit over my head.  I can do basic html and change someone else's javascript.  Would you mind uploading the file in notepad?  I'm good at taking others' work and manipulating it for myself, but it's hard for me to start from scratch!  Thank you.

Ross

[Andy P]

Hey Ross, fair point. But the script is over 2000 lines long and there 100 css classes, etc. What I could try to do would be to build a very simple example that just embeds one device and combines it with a camera image if that would be helpful. Would be good to know exactly what use case you would be wanting to tackle, ie what device and what type of camera.

[Ross]

I completely understand.  I'm going to put in some cameras this year, so I'm starting to dip my toe into determining what works best - and, maybe more importantly, easiest - with the UDI universe.

I'm one of those who wants everything but I don't have the time nor the skills (but I surprise myself every once in a while) to get things off the ground.  

Let me please revisit this in 6 months (of course, this thread will be closed by then!).

Ross