Append video frames to the view

Allow to display the decoded frames and not wait for all to be decoded.

src/image/image.js

@@ -82,15 +82,22 @@ dwv.image.RescaleSlopeAndIntercept.prototype.isID = function () {
  * @constructor
  * @param {Object} geometry The geometry of the image.
  * @param {Array} buffer The image data as an array of frame buffers.
+ * @param {Number} numberOfFrames The number of frames (optional, can be used
+     to anticipate the final number after appends).
  */
-dwv.image.Image = function(geometry, buffer)
+dwv.image.Image = function(geometry, buffer, numberOfFrames)
 {
+    // use buffer length in not specified
+    if (typeof numberOfFrames === "undefined") {
+        numberOfFrames = buffer.length;
+    }
+
     /**
      * Get the number of frames.
      * @returns {Number} The number of frames.
      */
     this.getNumberOfFrames = function () {
-        return buffer.length;
+        return numberOfFrames;
     };
 
     /**
@@ -367,6 +374,15 @@ dwv.image.Image = function(geometry, buffer)
         return newSliceNb;
     };
 
+    /**
+     * Append a frame buffer to the image.
+     * @param {Object} frameBuffer The frame buffer to append.
+     */
+    this.appendFrameBuffer = function (frameBuffer)
+    {
+        buffer.push(frameBuffer);
+    };
+
     /**
      * Get the data range.
      * @return {Object} The data range.

src/image/reader.js

@@ -27,9 +27,12 @@ dwv.image.imageDataToBuffer = function (imageData) {
  * @param {Number} height The height of the coresponding image.
  * @param {Number} sliceIndex The slice index of the imageData.
  * @param {Object} imageBuffer The image buffer.
+ * @param {Number} numberOfFrames The final number of frames.
  * @return {Object} The corresponding view.
  */
-dwv.image.getDefaultView = function (width, height, sliceIndex, imageBuffer) {
+dwv.image.getDefaultView = function (
+    width, height, sliceIndex,
+    imageBuffer, numberOfFrames) {
     // image size
     var imageSize = new dwv.image.Size(width, height);
     // default spacing
@@ -39,7 +42,7 @@ dwv.image.getDefaultView = function (width, height, sliceIndex, imageBuffer) {
     var origin = new dwv.math.Point3D(0,0,sliceIndex);
     // create image
     var geometry = new dwv.image.Geometry(origin, imageSize, imageSpacing );
-    var image = new dwv.image.Image( geometry, imageBuffer );
+    var image = new dwv.image.Image( geometry, imageBuffer, numberOfFrames );
     image.setPhotometricInterpretation("RGB");
     // meta information
     var meta = {};
@@ -105,6 +108,11 @@ dwv.image.getViewFromDOMVideo = function (video, callback)
     var width = video.videoWidth;
     var height = video.videoHeight;
 
+    // default frame rate...
+    var frameRate = 30;
+    // number of frames
+    var numberOfFrames = Math.floor(video.duration * frameRate);
+
     // video properties
     var info = [];
     if( video.file )
@@ -115,31 +123,39 @@ dwv.image.getViewFromDOMVideo = function (video, callback)
     }
     info.push({ "name": "imageWidth", "value": width });
     info.push({ "name": "imageHeight", "value": height });
+    info.push({ "name": "numberOfFrames", "value": numberOfFrames });
 
     // draw the image in the canvas in order to get its data
     var canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
     var ctx = canvas.getContext('2d');
 
-    // frame storage
-    var frames = [];
-    // default frame rate...
-    var frameRate = 30;
-    // current frame index
-    var frameIndex = 0;
-
     // using seeked to loop through all video frames
     video.addEventListener('seeked', onseeked, false);
 
+    // current frame index
+    var frameIndex = 0;
+    // video view
+    var view = null;
+
     // draw the context and store it as a frame
     function storeFrame() {
         console.log("frame #" + frameIndex);
         // draw image
         ctx.drawImage(video, 0, 0);
         // context to image buffer
-        frames.push( dwv.image.imageDataToBuffer(
-            ctx.getImageData(0, 0, width, height) ) );
+        var imgBuffer = dwv.image.imageDataToBuffer(
+            ctx.getImageData(0, 0, width, height) );
+        if (frameIndex === 0) {
+            // create view
+            view = dwv.image.getDefaultView(
+                width, height, 1, [imgBuffer], numberOfFrames);
+            // call callback
+            callback( {"view": view, "info": info } );
+        } else {
+            view.appendFrameBuffer(imgBuffer);
+        }
     }
 
     // handle seeked event
@@ -154,22 +170,11 @@ dwv.image.getViewFromDOMVideo = function (video, callback)
         if (nextTime <= this.duration) {
             this.currentTime = nextTime;
         } else {
-            // end
-            ondone();
+            // stop listening
+            video.removeEventListener('seeked', onseeked);
         }
     }
 
-    // on done looping through slices
-    function ondone() {
-        // stop listening
-        video.removeEventListener('seeked', onseeked);
-        // create view
-        var view = dwv.image.getDefaultView(
-            width, height, 1, frames);
-        // pass it to the callback
-        callback( {"view": view, "info": info } );
-    }
-
     // trigger the first seeked
     video.currentTime = 0;
 };

src/image/view.js

@@ -423,6 +423,15 @@ dwv.image.View = function (image)
        this.addWindowPresets( rhs.getWindowPresets(), newSliceNumber );
     };
 
+    /**
+     * Append a frame buffer to the included image.
+     * @param {Object} frameBuffer The frame buffer to append.
+     */
+    this.appendFrameBuffer = function (frameBuffer)
+    {
+        this.getImage().appendFrameBuffer(frameBuffer);
+    };
+
     /**
      * Set the view window/level.
      * @param {Number} center The window center.