Making webrtc video quality test page generic

chrome/test/data/webrtc/video_extraction.js

 /**
  * Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /**
  * The ID of the video tag from which frames are captured.
  * @private
  */
 var gVideoId = 'remote-view';
 
 /**
+ * The ID of the canvas tag from which the frames are captured.
+ * @private
+ */
+var gCanvasId = 'remote-canvas';
+
+/**
  * Counts the number of frames that have been captured. Used in timeout
  * adjustments.
  * @private
  */
 var gFrameCounter = 0;
 
 /**
  * The gStartOfTime when the capturing begins. Used for timeout adjustments.
  * @private
  */
@@ skipping 47 matching lines @@
  * Upon load of the window opens the WebSocket to the PyWebSocket server. The
  * server should already be up and running.
  */
 window.onload = function() {
   tryOpeningWebSocket();
 }
 
 /**
  * Starts the frame capturing.
  *
- * @param {Number} The width of the video/canvas area to be captured.
- * @param {Number} The height of the video area to be captured.
- * @param {Number} The height of the canvas where we put the video frames.
+ * @param {!Object} The video tag from which the height and width parameters are
+                    to be extracted.
  * @param {Number} The frame rate at which we would like to capture frames.
  * @param {Number} The duration of the frame capture in seconds.
  */
-function startFrameCapture(width, height, canvas_height, frame_rate, duration){
+function startFrameCapture(videoTag, frame_rate, duration) {
   gFrameCaptureInterval = 1000/frame_rate;
   gCaptureDuration = 1000 * duration;
+  var width = videoTag.videoWidth;
+  var height = videoTag.videoHeight;
+
+  if (width == 0 || height == 0) {
+    throw failTest('Trying to capture from ' + videoTag.id +
+                ' but it is not playing any video.');

[kjellander_chromium, 2014/04/30 10:49:42]

nit: +3 indent 

+  }
+
+  setCanvasDimensions(width, height);
 
   console.log('Received width is: ' + width + ', received height is: ' + height
               + ', capture interval is: ' + gFrameCaptureInterval +
-              ', duration is: ' + gCaptureDuration);
+              ', Duration is: ' + gCaptureDuration);
+
   gStartOfTime = new Date().getTime();
-  setTimeout(function() { shoot(width, height, canvas_height); },
+  setTimeout(function() { shoot(width, height); },
              gFrameCaptureInterval);
 }
 
 /**
+ * Sets the canvas dimensions.
+ *
+ * @param {Number} The width of the canvas.
+ * @param {Number} The height of the canvas.
+*/
+function setCanvasDimensions(width, height) {

[kjellander_chromium, 2014/04/30 10:49:42]

Prefix with _ and mark as @private since this is only called from inside this
script
(http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone...).

It's possible more functions here should be handled the same way (I haven't
checked).

[kjellander_chromium, 2014/04/30 10:49:42]

IMO it would be nicer to pass the canvas Id as a parameter instead of accessing
the global variable from the inside of this function.
I guess the global gCanvasId and gVideoId is spread out already all over the
place, so feel free to ignore this however.

+  var canvas = document.getElementById(gCanvasId);
+  canvas.width = width;
+  canvas.height = height;
+}
+
+/**
  * Captures an image frame from the provided video element.
  *
  * @param {Video} video HTML5 video element from where the image frame will
  * be captured.
  * @param {Number} The width of the video/canvas area to be captured.
  * @param {Number} The height of the video/canvas area to be captured.
  *
  * @return {Canvas}
  */
 function capture(video, width, height) {
-  var canvas = document.getElementById('remote-canvas');
+  var canvas = document.getElementById(gCanvasId);
   var ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0, width, height);
   return canvas;
 }
 
 /**
  * The function which is called at the end of every gFrameCaptureInterval. Gets
  * the current frame from the video and extracts the data from it. Then it saves
  * it in the frames array and adjusts the capture interval (timers in JavaScript
  * aren't precise).
  *
  * @param {Number} The width of the video/canvas area to be captured.
  * @param {Number} The height of the video area to be captured.
- * @param {Number} The height of the canvas where we put the video frames.
  */
-function shoot(width, height, canvas_height){
+function shoot(width, height) {
   // The first two captured frames have big difference between the ideal time
   // interval between two frames and the real one. As a consequence this affects
   // enormously the interval adjustment for subsequent frames. That's why we
   // have to reset the time after the first two frames and get rid of these two
   // frames.
   if (gFrameCounter == 1 && !gFrameIntervalAdjustment) {
     gStartOfTime = new Date().getTime();
     gFrameCounter = 0;
     gFrameIntervalAdjustment = true;
     gFrames.pop();
     gFrames.pop();
   }
   var video  = document.getElementById(gVideoId);
   var canvas = capture(video, width, height);
 
   // Extract the data from the canvas.
   var ctx = canvas.getContext('2d');
-  var img;
-  if (height == canvas_height) {
-    // We capture the whole video frame.
-    img = ctx.getImageData(0, 0, width, height);
-  } else {
-    // We capture only the barcode (canvas_height is the height of the barcode).
-    img = ctx.getImageData(0, 0, width, canvas_height);
-  }
+  // We capture the whole video frame.
+  var img = ctx.getImageData(0, 0, width, height);
   gFrames.push(img.data.buffer);
   gFrameCounter++;
 
   // Adjust the timer.
   var current_time = new Date().getTime();
   var ideal_time = gFrameCounter*gFrameCaptureInterval;
   var real_time_elapsed = current_time - gStartOfTime;
   var diff = real_time_elapsed - ideal_time;
 
   if (real_time_elapsed < gCaptureDuration) {
     // If duration isn't over shoot again
-    setTimeout(function() { shoot(width, height, canvas_height); },
+    setTimeout(function() { shoot(width, height); },
                gFrameCaptureInterval - diff);
   } else {  // Else reset gFrameCounter and send the frames
     dDoneFrameCapturing = true;
     gFrameCounter = 0;
     clearPage_();
     prepareProgressBar_();
     sendFrames();
   }
 }
 
@@ skipping 91 matching lines @@
 /**
  * @private
  */
 function prepareProgressBar_() {
   document.body.innerHTML =
     '<html><body>' +
     '<p id="progress-bar" style="position: absolute; top: 50%; left: 40%;">' +
     'Preparing to send frames.</p>' +
     '</body></html>';
 }