Merge pull request RobotWebTools#134 from Intermodalics/mjpeg_stream_…

…depthcloud Adjust DepthCloud to support MJPEG streams
k-aguete · Jan 4, 2016 · b5d9a3e · b5d9a3e
2 parents 03eb90e + e4ab969
commit b5d9a3e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/build/ros3d.js b/build/ros3d.js
@@ -184,6 +184,7 @@ ROS3D.closestAxisPoint = function(axisRay, camera, mousePos) {
  * @param options - object with following keys:
  *
  *   * url - the URL of the stream
+ *   * streamType (optional) - the stream type: mjpeg or vp8 video (defaults to vp8)
  *   * f (optional) - the camera's focal length (defaults to standard Kinect calibration)
  *   * pointSize (optional) - point size (pixels) for rendered point cloud
  *   * width (optional) - width of the video stream
@@ -196,6 +197,7 @@ ROS3D.DepthCloud = function(options) {
   THREE.Object3D.call(this);
 
   this.url = options.url;
+  this.streamType = options.streamType || 'vp8';
   this.f = options.f || 526;
   this.pointSize = options.pointSize || 3;
   this.width = options.width || 1024;
@@ -204,11 +206,16 @@ ROS3D.DepthCloud = function(options) {
   this.varianceThreshold = options.varianceThreshold || 0.000016667;
 
   var metaLoaded = false;
-  this.video = document.createElement('video');
 
-  this.video.addEventListener('loadedmetadata', this.metaLoaded.bind(this), false);
+  this.isMjpeg = this.streamType.toLowerCase() === 'mjpeg';
+
+  this.video = document.createElement(this.isMjpeg ? 'img' : 'video');
+  this.video.addEventListener(this.isMjpeg ? 'load' : 'loadedmetadata', this.metaLoaded.bind(this), false);
+
+  if (!this.isMjpeg) {
+    this.video.loop = true;
+  }
 
-  this.video.loop = true;
   this.video.src = this.url;
   this.video.crossOrigin = 'Anonymous';
   this.video.setAttribute('crossorigin', 'Anonymous');
@@ -459,7 +466,7 @@ ROS3D.DepthCloud.prototype.initStreamer = function() {
     var that = this;
 
     setInterval(function() {
-      if (that.video.readyState === that.video.HAVE_ENOUGH_DATA) {
+      if (that.isMjpeg || that.video.readyState === that.video.HAVE_ENOUGH_DATA) {
         that.texture.needsUpdate = true;
       }
     }, 1000 / 30);
@@ -470,14 +477,18 @@ ROS3D.DepthCloud.prototype.initStreamer = function() {
  * Start video playback
  */
 ROS3D.DepthCloud.prototype.startStream = function() {
-  this.video.play();
+  if (!this.isMjpeg) {
+    this.video.play();
+  }
 };
 
 /**
  * Stop video playback
  */
 ROS3D.DepthCloud.prototype.stopStream = function() {
-  this.video.pause();
+  if (!this.isMjpeg) {
+    this.video.pause();
+  }
 };
 
 /**