Dashing UnifiVideo Widget

DashingUnifiVideo.md

Dashing.io Widget for UnifiVideo NVR

This method uses API Key access so I suggest you setup a guest account with API access but limited (Visible and View Feed) access. Then login as the guest user, enable API access, and generate a new key. Copy the key for use.

Switch to the Devices tab and open the Configure dialog for the cam. On the Details tab, right-click the thumbnail view and Copy the image URL to the clipboard. It will look similar to the following if pasted to an address bar or text editor: http://192.168.1.105:7443//api/2.0/snapshot/camera/05a2bc63-d1ce-399f-8327-3a19b0cd3e8f?width=%d&force=true

The guid after /camera/ is what you want to use in the unifivideo.rb file.

You can setup as many cameras as you want, just keep adding settings.

unifivideo.coffee

class Dashing.unifivideo extends Dashing.Widget  
	ready: ->

	onData: (data) -> 

unifivideo.html

<h4 class="title" data-bind="title"></h4>
<img class="image_container" data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
<p data-bind="time"></p>

unifivideo.rb

require 'net/http'

@fetchNewImageEvery = '2s'
@imageDir = "assets/images/unifivideo/"

@nvrHost = "" #IP of your NVR UnifiVideo host
@nvrPort = "7080" #http port of NVR
@nvrApiKey = "" #your NVR API Key
@nvrCameraUrl = "/api/2.0/snapshot/camera/%s?width=%d&force=true&apiKey=%s"

@camera1Guid = ""
@camera1Width = 400

@camera2Guid = ""
@camera2Width = 400

def fetch_image(guid, width)

	fileA = sprintf("%s%s_A.jpg",@imageDir, guid[0..8])
	fileB = sprintf("%s%s_B.jpg",@imageDir, guid[0..8])
	newFile = fileA

	if File::exists?(fileA) && !File::exists?(fileB)
		newFile = fileB
	elsif File::exists?(fileB) && !File::exists?(fileA)
		newFile = fileA
	elsif File::exists?(fileA) && File::exists?(fileB)
		if File::mtime(fileA) > File::mtime(fileB)
			newFile = fileB
		else
			newFile = fileA
		end
	end

	camUrl = sprintf(@nvrCameraUrl, guid, width, @nvrApiKey)
	
	Net::HTTP.start(@nvrHost, @nvrPort) do |http|
		req = Net::HTTP::Get.new(camUrl)
		response = http.request(req)
	
		open(newFile, "wb") do |file|
			file.write(response.body)
		end	

	end
	
	newFile
end
 
def make_web_friendly(file)
  "/" + File.basename(File.dirname(file)) + "/" + File.basename(file)
end
 
SCHEDULER.every @fetchNewImageEvery, first_in: 0 do
	newFile1 = fetch_image(@camera1Guid, @camera1Width)
	newFile2 = fetch_image(@camera2Guid, @camera2Width)

	if not File.exists?(newFile1 && newFile2)
		warn "Failed to Get Camera Image"
	end
 
	send_event('camera1', image: make_web_friendly(newFile1), time: Time.now.strftime("%H:%M:%S"))
	send_event('camera2', image: make_web_friendly(newFile2), time: Time.now.strftime("%H:%M:%S"))
	
end

unifivideo.scss

$background-color: #00a0df;

$title-color: rgba(255,255,255, 1);
$moreinfo-color: rgba(255,255,255,0.3);

.widget-unifivideo {
	padding: 0;
	background-color: $background-color;

	.title {
		color: $title-color;
	}

	.image-container {
		display: none;
		margin-bottom: 15px;
	}

}

It took me a little while to figure out how to format the dashboard configuration to display the image correctly. Now that I have it setup, is there a method for refreshing the image?

I'm able to see the clock at the base of the image refresh but the image and the timestamp in the image doesn't refresh. I can see that the .jpg file is updating though. any help?

I can see the images being saved and stored but they're not being displayed on my dashing dashboard, is there something I might be missing?

<li data-row="8" data-col="3" data-sizex="2" data-sizey="3">
    <div data-id="camera1" data-view="unifivideo" data-title="CAM1" style="background-color:#4b4b4b;"></div>
</li>

I've made a series of improvements over on my fork, if anybody is interested: https://gist.github.com/peelman/df76ec56978202a47b6e

Ran into this issue, pretty sure it's related to browser caching of images with same name. StackOverflow:(https://stackoverflow.com/questions/42274237/snapshot-jpg-of-camera-ipd-link-dsc-4201-not-refresh-in-dashing/42773565#42773565)

Our Unifi system uses https, and I'm not quite advanced enough to make sense of what parts of the .rb file I would need to update to utilize https. Anyone have an idea of how I might incorporate https into this .rb file?