[Ninjablock] [Beta Dashboard] Webcam Widget

options.js

return {
  "name": "Webcam",
  "deviceMap": [
    { "deviceId": [1004], "minimum": 1, "maximum": 1}, //Webcam
  ],
  "forceDeviceMapGroup": true
}

style.less

padding: 0px 0px 0px 0px;
background-color: #FFFFFF;

/* Video Container CSS - 
   Some of these styles are here for easy override access, other parts are new 
*/
.videoContainer {
  overflow: hidden;
}

.videoContainer .errorImage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: hsl(0,0%,71%) url(/img/webcam-default.png) center 23px no-repeat;
  z-index: 21;
}

.videoContainer a.camPlay {
  position: absolute;
  z-index: 50;
  top:48px;
  right: 4px;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.videoContainer a.camPause {
  position: absolute;
  z-index: 50;
  top:78px;
  right: 4px;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.videoContainer a.camSnapshot {
  position: absolute;
  z-index: 50;
  top:158px;
  right: 4px;
  width: 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.videoContainer a.camExpand {
  position: absolute;
  z-index: 50;
  top:188px;
  right: 4px;
  width: 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.videoContainer img.camStream {
  width: 100%;
  z-index: 20;
}
.videoContainer span.camTimestamp{
  position: absolute;
  z-index: 10;
  left:0;
  bottom: 7px;
  padding: 2px;
  border:0 1px 0 1px solid #ccc;
  border-radius: 0 0px 3px 0;
  opacity: 0.8;
}

.videoContainer .loader {
  height: auto !important;
  min-height: 215px;
  width: 100% !important;
  display: block;
  margin: 0;
  background-color: hsl(0,0%,91%);
}

view.html

<!-- Load Ninja CSS -->
<link href="/css/ninja_style.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/colors.css" rel="stylesheet">
<link href="/css/reset.css" rel="stylesheet">

<!-- HTML -->
<div class="videoContainer align-center relative">
  <span class="camTimestamp white-gradient"></span>
  <a href="#" class="camPlay button icon-play absolute-right"></a>
  <a href="#" class="camPause button icon-pause absolute-right disabled"></a>
  <a href="#" class="camSnapshot button icon-camera absolute-right"></a>
  <a href="#" class="camExpand button icon-expand absolute-right"></a>
  <img src="<SNAPSHOT_URL>" onerror="showWebcamError(this)" class="camStream loader big" />
  <div style="display: none" class="errorImage"></div>
</div>

widget.js

/* Build stream URL dynamically */
var webcam = _.find(this.devices, function(device) { return true; });
var camStreamObj = _.find($('.camStream'), function(img) { return true; });
camStreamObj.src="https://stream.ninja.is/rest/v0/camera/" + webcam.node + "_" + webcam.gid + "_" + webcam.vid + "_" + webcam.did + "/snapshot";

/* Webcam "play" function - from nui.js */
var camPlay = function(event) {
  if ((typeof event) !== "undefined") event.preventDefault();
  var webcamError = $(this).siblings(".errorImage");
  var webcamImage = $(this).siblings('.camStream');
  var widget = $(this).closest(".ninjaWidget");
  webcamImage.load(function () {
    var t = new Date();
    $(this).siblings('.camTimestamp').text(t.toLocaleTimeString());
    this.src = this.src;
    webcamError.fadeOut(2000);
    widget.removeClass("offline");
  }).trigger('load');
  webcamImage.attr("src", webcamImage.attr("src"));
  
  $(this).addClass('disabled');
  $(this).siblings('.camPause').removeClass('disabled');  
};

/* Webcam "pause" function - from nui.js */
var camPause = function(event) {
  if ((typeof event) !== "undefined") event.preventDefault();
  
  $(this).siblings('.camPlay').removeClass('disabled');
  $(this).siblings('.camStream').off();
  $(this).addClass('disabled');
};

/* Webcam "snapshot" function - based on nui.js functions */
var camSnapshot = function(event) {
  if ((typeof event) !== "undefined") event.preventDefault();
 
  $(this).siblings('.camTimestamp').text("Snapshot taken!");
  jQuery.post("<WEBHOOK_URL>");
};

/* Webcam "expand" function - based on nui.js functions */
var camExpand = function(event) {
  if ((typeof event) !== "undefined") event.preventDefault();
  
  showSnapshot();
};

/* Snapshot popup - based on widget.js 'ShowSettings()' function */
var showSnapshot = function() {
  var defaultOnOpen = $.modal.defaults.onOpen;
  
  $.modal({
    content: "<img src=\"" + camStreamObj.src + "\" />",
    contentAlign: 'center',
    draggable: true,
    resizable: false,
    title: "Webcam Snapshot",
    minWidth: 320,
    minHeight: 240,
    onOpen: function() {
      defaultOnOpen();
      $compile($.modal.current.contents())(scope);
    }
  });
};

/* Handle webcam errors - from nui.js */
showWebcamError = function(image) {
  var webcamImage = jQuery(image);
  var videoContainer = webcamImage.closest(".videoContainer");
  videoContainer.find(".errorImage").fadeIn(2000);
};

/* Handle "click" events for controls */
var scope = ".videoContainer";
var clickEvent = "click";
var onError = "onerror";

$(scope).on(clickEvent, '.camPlay', camPlay);
$(scope).on(clickEvent, '.camPause', camPause);
$(scope).on(clickEvent, '.camSnapshot', camSnapshot);
$(scope).on(clickEvent, '.camExpand', camExpand);