Added support for compressed image transport

src/visualization/MultiStreamViewer.js

@@ -16,6 +16,7 @@
  *   * height - the height of the canvas
  *   * host - the hostname of the MJPEG server
  *   * port (optional) - the port to connect to
+ *   * type (optional) - the type of the stream mjpeg/vp8/ros_compressed
  *   * quality (optional) - the quality of the stream (from 1-100)
  *   * topics - an array of topics to stream
  *   * labels (optional) - an array of labels associated with each topic
@@ -29,6 +30,7 @@ MJPEGCANVAS.MultiStreamViewer = function(options) {
   var height = options.height;
   var host = options.host;
   var port = options.port || 8080;
+  var type = options.type || 'mjpeg';
   var quality = options.quality;
   var topics = options.topics;
   var labels = options.labels;
@@ -62,6 +64,7 @@ MJPEGCANVAS.MultiStreamViewer = function(options) {
     height : height,
     host : host,
     port : port,
+    type : type,
     quality : quality,
     topic : currentTopic,
     overlay : canvas

src/visualization/Viewer.js

@@ -16,6 +16,7 @@
  *   * height - the height of the canvas
  *   * host - the hostname of the MJPEG server
  *   * port (optional) - the port to connect to
+ *   * type (optional) - the type of the stream mjpeg/vp8/ros_compressed
  *   * quality (optional) - the quality of the stream (from 1-100)
  *   * topic - the topic to stream, like '/wide_stereo/left/image_color'
  *   * overlay (optional) - a canvas to overlay after the image is drawn
@@ -26,10 +27,12 @@ MJPEGCANVAS.Viewer = function(options) {
   var that = this;
   options = options || {};
   var divID = options.divID;
+  var querySelector = options.querySelector;
   this.width = options.width;
   this.height = options.height;
   this.host = options.host;
   this.port = options.port || 8080;
+  this.type = options.type || 'mjpeg';
   this.quality = options.quality;
   this.refreshRate = options.refreshRate || 10;
   this.interval = options.interval || 30;
@@ -49,7 +52,13 @@ MJPEGCANVAS.Viewer = function(options) {
   this.canvas.width = this.width;
   this.canvas.height = this.height;
   this.canvas.style.background = '#aaaaaa';
-  document.getElementById(divID).appendChild(this.canvas);
+  if (divID !== undefined)  {
+    document.getElementById(divID).appendChild(this.canvas);
+  } else if (querySelector !== undefined) {
+    document.querySelector(querySelector).appendChild(this.canvas);
+  } else {
+    throw 'No parent provided for canvas';
+  }
   var context = this.canvas.getContext('2d');
 
   var drawInterval = Math.max(1 / this.refreshRate * 1000, this.interval);
@@ -102,12 +111,14 @@ MJPEGCANVAS.Viewer.prototype.changeStream = function(topic) {
   // add various options
   src += '&width=' + this.width;
   src += '&height=' + this.height;
+  src += '&type=' + this.type;
   if (this.quality > 0) {
     src += '&quality=' + this.quality;
   }
   if (this.invert) {
     src += '&invert=' + this.invert;
   }
+
   this.image.src = src;
   // emit an event for the change
   this.emit('change', topic);