Dashing UnifiVideo Widget

dashboards-camera_sample.erb

<% content_for :title do %>Lobby<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
        <div data-id="camera1" data-view="unifivideo" data-title="CAM1"></div>
    </li>    
    <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <div data-id="camera2" data-view="unifivideo" data-title="CAM2"></div>
    </li>
    <li data-row="1" data-col="3" data-sizex="2" data-sizey="1">
        <div data-id="camera3" data-view="unifivideo" data-title="CAM3"></div>
    </li>    
    <li data-row="1" data-col="4" data-sizex="2" data-sizey="1">
        <div data-id="camera4" data-view="unifivideo" data-title="CAM4"></div>
    </li>  </ul>
</div>

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 add a name and UUID for each to the secrets/unifi.yml file.

secrets-unifi.yml

host: hostname.domain.tld
port: 7080
api_key: nJdpG8QkzkNOgVc
cameras:
  camera1: 20866486-6511-4E5C-A90D-6E1FE212BA4C
  camera2: 5C4725FB-1938-49FE-A9EA-78B8DDBD4A26
  camera3: 5C746079-60BD-4ED8-9FC9-F0230E4A73CB
  camera4: 729A4BE9-487B-4D33-8297-657C95401376
  camera5: AB9A27B7-1EE6-46CA-8A51-2C6853F5F4FE
  camera6: BDE3FE94-1FE8-48A1-9193-FC0791182C99
  

unifivideo.coffee

class Dashing.unifivideo extends Dashing.Widget  
	ready: ->
	onData: (data) -> 

unifivideo.html

<span class="title" data-bind="title"></span>
<img class="image_container" data-bind-src="image" data-bind-width="width"/>

unifivideo.rb

require 'net/http'
require 'json'

ten_seconds = '10s'
cameras_width = 250
secrets = YAML::load_file('secrets/unifi.yml')

cameras = secrets['cameras']
nvrHost = secrets['host']
nvrPort = secrets['port']
nvrApiKey = secrets['api_key']

nvrCameraInfoPath = "/api/2.0/camera/"
nvrCameraInfoQuery = "apiKey=#{nvrApiKey}"

nvrCameraSnapshotPath = "/api/2.0/snapshot/camera/"
nvrCameraSnapshotQuery = "width=#{cameras_width}&force=true&apiKey=#{nvrApiKey}"

camera_uris = {}

cameras.each do |camera, camera_uid|
  cameraURI = URI::HTTP.build({host: nvrHost, port: nvrPort, path: nvrCameraSnapshotPath + camera_uid, query: nvrCameraSnapshotQuery})
  cameraNameURI = URI::HTTP.build({host: nvrHost, port: nvrPort, path: nvrCameraInfoPath + camera_uid, query: nvrCameraInfoQuery})
  cameraJSON = JSON.parse(Net::HTTP.get_response(cameraNameURI).body)
  cameraName = cameraJSON['data'].first['name']
  camera_uris.update({camera => {:uri => cameraURI.to_s, :name => cameraName}})
end

SCHEDULER.every ten_seconds, :first_in => 0 do
  camera_uris.each_pair do |camera, camera_data|
    time = Time.now.strftime("%s")
    send_event(camera, { title: camera_data[:name], image: camera_data[:uri] + "&" + time })
  end
end

unifivideo.scss

$background-color: #333;

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

.widget-unifivideo {
	padding: 0;
	background-color: $background-color;
    
	.title {
        font-size:14px;
        display:inline-block;
		color: $title-color;
        width:170px;
        margin-left: -140px;
        transform:  translateX(40%) rotate(-90deg);
	}
	.image-container {
		display: none;
	}

}