Adding video to your custom panels

RuBAN brokers live and recorded video streams from a variety of sources such as Android devices, ZepCam units and Cisco's Video Surveillance Operations Manager (VSOM). RuBAN exposes a single interface to consume these streams in a custom panel in the /ruban/video/VideoPlayer module. All that's required to choose the correct stream is to specify the associated edge device and, if necessary, a tag to select a specific camera associated with the device.

The following example shows how to embed live video into your custom panel - the full source for the example can be found in video-example.zip.

define(["dojo/_base/declare", "jquery", "d3", "underscore", "ruban/video/VideoPlayer"],
function(declare, $, no, _, VideoPlayer){
return declare("examples.VideoExamplePanelView", null, {

............

var container = $(this.context.getDom()).find('.video-container')[0];

if(!this.player){
this.player = new VideoPlayer(container, { deviceId: this.deviceId, cameraTag: this.context.getConfig().cameraTag});
}else{
     this.player.changeStream({ deviceId: this.deviceId, cameraTag: this.context.getConfig().cameraTag});
}
},

The VideoPlayer must be imported. Then you create an instance of the VideoPlayer supplying it with a dom object into which the player puts the video contents, a device ID and a camera tag.