Creating canvas dynamically in webrtc video quality tests

chrome/test/data/webrtc/video_extraction.js

Index: chrome/test/data/webrtc/video_extraction.js
diff --git a/chrome/test/data/webrtc/video_extraction.js b/chrome/test/data/webrtc/video_extraction.js
index c7bbd8f87c92ddba3305a4498001b6116da559b2..8ce430c8600f24feaec2b3c99926e599b1aa2609 100644
--- a/chrome/test/data/webrtc/video_extraction.js
+++ b/chrome/test/data/webrtc/video_extraction.js
@@ -5,18 +5,6 @@
  */
 
 /**
- * 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
@@ -100,44 +88,36 @@ function startFrameCapture(videoTag, frame_rate, duration) {
                    ' but it is not playing any video.');
   }
 
-  setCanvasDimensions_(width, height);
-
   console.log('Received width is: ' + width + ', received height is: ' + height
               + ', capture interval is: ' + gFrameCaptureInterval +
               ', duration is: ' + gCaptureDuration);
 
+  var remoteCanvas = document.createElement('canvas');
+  remoteCanvas.width = width;
+  remoteCanvas.height = height;
+  document.body.appendChild(remoteCanvas);
+
   gStartOfTime = new Date().getTime();
-  setTimeout(function() { shoot(width, height); },
+  setTimeout(function() { shoot(videoTag, remoteCanvas, width, height); },
              gFrameCaptureInterval);
 }
 
 /**
- * Sets the canvas dimensions.
- * @private
- * @param {Number} The width of the canvas.
- * @param {Number} The height of the canvas.
-*/
-function setCanvasDimensions_(width, height) {

[amogh.bihani, 2014/05/13 13:23:25]

Now these changes seem futile. :(

-  var canvas = document.getElementById(gCanvasId);
-  canvas.width = width;
-  canvas.height = height;
-}
-
-/**
  * Captures an image frame from the provided video element.
  *
+ * @private
  * @param {Video} video HTML5 video element from where the image frame will
  * be captured.
+ * @param {!Object} 2d context of the canvas on which 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}
+ * @return {Object} Returns the ImageData object.
  */
-function capture(video, width, height) {
-  var canvas = document.getElementById(gCanvasId);
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(video, 0, 0, width, height);
-  return canvas;
+function captureFrame_(video, context, width, height) {
+  context.drawImage(video, 0, 0, width, height);
+  return context.getImageData(0, 0, width, height);
 }
 
 /**
@@ -146,10 +126,12 @@ function capture(video, width, height) {
  * it in the frames array and adjusts the capture interval (timers in JavaScript
  * aren't precise).
  *
+ * @param {!Object} The video whose frames are to be captured.
+ * @param {Canvas} The canvas on which the image will be captured.
  * @param {Number} The width of the video/canvas area to be captured.
  * @param {Number} The height of the video area to be captured.
  */
-function shoot(width, height) {
+function shoot(video, canvas, 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
@@ -162,13 +144,9 @@ function shoot(width, height) {
     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');
   // We capture the whole video frame.
-  var img = ctx.getImageData(0, 0, width, height);
+  var img = captureFrame_(video, canvas.getContext('2d'), width, height);
   gFrames.push(img.data.buffer);
   gFrameCounter++;
 
@@ -180,7 +158,7 @@ function shoot(width, height) {
 
   if (real_time_elapsed < gCaptureDuration) {
     // If duration isn't over shoot again
-    setTimeout(function() { shoot(width, height); },
+    setTimeout(function() { shoot(video, canvas, width, height); },
                gFrameCaptureInterval - diff);
   } else {  // Else reset gFrameCounter and send the frames
     dDoneFrameCapturing = true;