Add data reduction proxy integration tests for video compression.

tools/chrome_proxy/integration_tests/videowrapper.js

+// Copyright 2015 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.
+
+// This script finds the first video element on a page and collect metrics
+// for that element. This is based on src/tools/perf/metrics/media.js.
+
+(function() {
+  // VideoWrapper attaches event listeners to collect metrics.
+  // The constructor starts playing the video.
+  function VideoWrapper(element) {
+    if (!(element instanceof HTMLVideoElement))
+      throw new Error('Unrecognized video element type ' + element);
+    metrics['ready'] = false;
+    this.element = element;
+    element.loop = false;
+    // Set the basic event handlers for this HTML5 video element.
+    this.element.addEventListener('loadedmetadata', this.onLoaded.bind(this));
+    this.element.addEventListener('canplay', this.onCanplay.bind(this));
+    this.element.addEventListener('ended', this.onEnded.bind(this));
+    this.playbackTimer = new Timer();
+    element.play()
+  }
+
+  VideoWrapper.prototype.onLoaded = function(e) {
+    if (this.element.readyState == HTMLMediaElement.HAVE_NOTHING) {
+      return
+    }
+    metrics['ready'] = true;
+    metrics['video_height'] = this.element.videoHeight;
+    metrics['video_width'] = this.element.videoWidth;
+    metrics['video_duration'] = this.element.duration;
+    window.__chromeProxyVideoLoaded = true;
+  };
+
+  VideoWrapper.prototype.onCanplay = function(event) {
+    metrics['time_to_play_ms'] = this.playbackTimer.stop();
+  };
+
+  VideoWrapper.prototype.onEnded = function(event) {
+    var time_to_end = this.playbackTimer.stop() - metrics['time_to_play_ms'];
+    metrics['buffering_time_ms'] = time_to_end - this.element.duration * 1000;
+    metrics['decoded_audio_bytes'] = this.element.webkitAudioDecodedByteCount;
+    metrics['decoded_video_bytes'] = this.element.webkitVideoDecodedByteCount;
+    metrics['decoded_frames'] = this.element.webkitDecodedFrameCount;
+    metrics['dropped_frames'] = this.element.webkitDroppedFrameCount;
+    window.__chromeProxyVideoEnded = true;
+  };
+
+  function MediaMetric(element) {
+    if (element instanceof HTMLMediaElement)
+      return new VideoWrapper(element);
+    throw new Error('Unrecognized media element type.');
+  }
+
+  function Timer() {
+    this.start();
+  }
+
+  Timer.prototype = {
+    start: function() {
+      this.start_ = getCurrentTime();
+    },
+
+    stop: function() {
+      // Return delta time since start in millisecs.
+      return Math.round((getCurrentTime() - this.start_) * 1000) / 1000;
+    }
+  };
+
+  function getCurrentTime() {
+    if (window.performance)
+      return (performance.now ||
+              performance.mozNow ||
+              performance.msNow ||
+              performance.oNow ||
+              performance.webkitNow).call(window.performance);
+    else
+      return Date.now();
+  }
+
+  function createVideoWrappersForDocument() {
+    var videos = document.querySelectorAll('video');
+    switch (videos.length) {
+    case 0:
+      throw new Error('Page has no videos.');
+    case 1:
+      break;
+    default:
+      throw new Error('Page too many videos: ' + videos.length.toString());
+    }
+    new VideoWrapper(videos[0])
+  }
+
+  metrics = {};
+  window.__chromeProxyCreateVideoWrappers = createVideoWrappersForDocument;
+  window.__chromeProxyVideoMetrics = metrics;
+  window.__chromeProxyVideoLoaded = false;
+  window.__chromeProxyVideoEnded = false;
+})();