Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(15)

Side by Side Diff: chrome/test/data/webrtc/video_extraction.js

Issue 254803002: Making webrtc video quality test page generic (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: removing nits Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /** 1 /**
2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be 3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file. 4 * found in the LICENSE file.
5 */ 5 */
6 6
7 /** 7 /**
8 * The ID of the video tag from which frames are captured. 8 * The ID of the video tag from which frames are captured.
9 * @private 9 * @private
10 */ 10 */
11 var gVideoId = 'remote-view'; 11 var gVideoId = 'remote-view';
12 12
13 /** 13 /**
14 * The ID of the canvas tag from which the frames are captured.
15 * @private
16 */
17 var gCanvasId = 'remote-canvas';
18
19 /**
14 * Counts the number of frames that have been captured. Used in timeout 20 * Counts the number of frames that have been captured. Used in timeout
15 * adjustments. 21 * adjustments.
16 * @private 22 * @private
17 */ 23 */
18 var gFrameCounter = 0; 24 var gFrameCounter = 0;
19 25
20 /** 26 /**
21 * The gStartOfTime when the capturing begins. Used for timeout adjustments. 27 * The gStartOfTime when the capturing begins. Used for timeout adjustments.
22 * @private 28 * @private
23 */ 29 */
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 * Upon load of the window opens the WebSocket to the PyWebSocket server. The 77 * Upon load of the window opens the WebSocket to the PyWebSocket server. The
72 * server should already be up and running. 78 * server should already be up and running.
73 */ 79 */
74 window.onload = function() { 80 window.onload = function() {
75 tryOpeningWebSocket(); 81 tryOpeningWebSocket();
76 } 82 }
77 83
78 /** 84 /**
79 * Starts the frame capturing. 85 * Starts the frame capturing.
80 * 86 *
81 * @param {Number} The width of the video/canvas area to be captured. 87 * @param {String} The ID of the video tag from which the height and width
82 * @param {Number} The height of the video area to be captured. 88 * parameters are to be extracted.
83 * @param {Number} The height of the canvas where we put the video frames.
84 * @param {Number} The frame rate at which we would like to capture frames. 89 * @param {Number} The frame rate at which we would like to capture frames.
85 * @param {Number} The duration of the frame capture in seconds. 90 * @param {Number} The duration of the frame capture in seconds.
86 */ 91 */
87 function startFrameCapture(width, height, canvas_height, frame_rate, duration){ 92 function startFrameCapture(videoTagName, frame_rate, duration) {
88 gFrameCaptureInterval = 1000/frame_rate; 93 gFrameCaptureInterval = 1000/frame_rate;
89 gCaptureDuration = 1000 * duration; 94 gCaptureDuration = 1000 * duration;
90 95
91 console.log('Received width is: ' + width + ', received height is: ' + height 96 var video = document.getElementById(videoTagName);
92 + ', capture interval is: ' + gFrameCaptureInterval + 97 if (!video)
93 ', duration is: ' + gCaptureDuration); 98 throw failTest('Did not find the element ' + videoTagName + '.');
99 if (video.videoWidth == 0 || video.videoHeight == 0) {
100 throw failTest('Trying to capture from ' + videoTagName +
101 ' but it is not playing any video');
102 }
103
104 console.log('Received width is: ' + video.videoWidth +
105 ', received height is: ' + video.videoHeight +
106 ', capture interval is: ' + gFrameCaptureInterval +
107 ', Duration is: ' + gCaptureDuration);
108
94 gStartOfTime = new Date().getTime(); 109 gStartOfTime = new Date().getTime();
95 setTimeout(function() { shoot(width, height, canvas_height); }, 110 setTimeout(function() { shoot(video.videoWidth, video.videoHeight); },
96 gFrameCaptureInterval); 111 gFrameCaptureInterval);
97 } 112 }
98 113
99 /** 114 /**
100 * Captures an image frame from the provided video element. 115 * Captures an image frame from the provided video element.
101 * 116 *
102 * @param {Video} video HTML5 video element from where the image frame will 117 * @param {Video} video HTML5 video element from where the image frame will
103 * be captured. 118 * be captured.
104 * @param {Number} The width of the video/canvas area to be captured. 119 * @param {Number} The width of the video/canvas area to be captured.
105 * @param {Number} The height of the video/canvas area to be captured. 120 * @param {Number} The height of the video/canvas area to be captured.
106 * 121 *
107 * @return {Canvas} 122 * @return {Canvas}
108 */ 123 */
109 function capture(video, width, height) { 124 function capture(video, width, height) {
110 var canvas = document.getElementById('remote-canvas'); 125 var canvas = document.getElementById(gCanvasId);
111 var ctx = canvas.getContext('2d'); 126 var ctx = canvas.getContext('2d');
112 ctx.drawImage(video, 0, 0, width, height); 127 ctx.drawImage(video, 0, 0, width, height);
113 return canvas; 128 return canvas;
114 } 129 }
115 130
116 /** 131 /**
117 * The function which is called at the end of every gFrameCaptureInterval. Gets 132 * The function which is called at the end of every gFrameCaptureInterval. Gets
118 * the current frame from the video and extracts the data from it. Then it saves 133 * the current frame from the video and extracts the data from it. Then it saves
119 * it in the frames array and adjusts the capture interval (timers in JavaScript 134 * it in the frames array and adjusts the capture interval (timers in JavaScript
120 * aren't precise). 135 * aren't precise).
121 * 136 *
122 * @param {Number} The width of the video/canvas area to be captured. 137 * @param {Number} The width of the video/canvas area to be captured.
123 * @param {Number} The height of the video area to be captured. 138 * @param {Number} The height of the video area to be captured.
124 * @param {Number} The height of the canvas where we put the video frames.
125 */ 139 */
126 function shoot(width, height, canvas_height){ 140 function shoot(width, height) {
127 // The first two captured frames have big difference between the ideal time 141 // The first two captured frames have big difference between the ideal time
128 // interval between two frames and the real one. As a consequence this affects 142 // interval between two frames and the real one. As a consequence this affects
129 // enormously the interval adjustment for subsequent frames. That's why we 143 // enormously the interval adjustment for subsequent frames. That's why we
130 // have to reset the time after the first two frames and get rid of these two 144 // have to reset the time after the first two frames and get rid of these two
131 // frames. 145 // frames.
132 if (gFrameCounter == 1 && !gFrameIntervalAdjustment) { 146 if (gFrameCounter == 1 && !gFrameIntervalAdjustment) {
133 gStartOfTime = new Date().getTime(); 147 gStartOfTime = new Date().getTime();
134 gFrameCounter = 0; 148 gFrameCounter = 0;
135 gFrameIntervalAdjustment = true; 149 gFrameIntervalAdjustment = true;
136 gFrames.pop(); 150 gFrames.pop();
137 gFrames.pop(); 151 gFrames.pop();
138 } 152 }
139 var video = document.getElementById(gVideoId); 153 var video = document.getElementById(gVideoId);
140 var canvas = capture(video, width, height); 154 var canvas = capture(video, width, height);
141 155
142 // Extract the data from the canvas. 156 // Extract the data from the canvas.
143 var ctx = canvas.getContext('2d'); 157 var ctx = canvas.getContext('2d');
144 var img; 158 var img;
145 if (height == canvas_height) { 159 // We capture the whole video frame.
146 // We capture the whole video frame. 160 img = ctx.getImageData(0, 0, width, height);
phoglund_chromium 2014/04/28 11:20:54 Nit: merge lines 158 and 160.
147 img = ctx.getImageData(0, 0, width, height);
148 } else {
149 // We capture only the barcode (canvas_height is the height of the barcode).
150 img = ctx.getImageData(0, 0, width, canvas_height);
151 }
152 gFrames.push(img.data.buffer); 161 gFrames.push(img.data.buffer);
153 gFrameCounter++; 162 gFrameCounter++;
154 163
155 // Adjust the timer. 164 // Adjust the timer.
156 var current_time = new Date().getTime(); 165 var current_time = new Date().getTime();
157 var ideal_time = gFrameCounter*gFrameCaptureInterval; 166 var ideal_time = gFrameCounter*gFrameCaptureInterval;
158 var real_time_elapsed = current_time - gStartOfTime; 167 var real_time_elapsed = current_time - gStartOfTime;
159 var diff = real_time_elapsed - ideal_time; 168 var diff = real_time_elapsed - ideal_time;
160 169
161 if (real_time_elapsed < gCaptureDuration) { 170 if (real_time_elapsed < gCaptureDuration) {
162 // If duration isn't over shoot again 171 // If duration isn't over shoot again
163 setTimeout(function() { shoot(width, height, canvas_height); }, 172 setTimeout(function() { shoot(width, height); },
164 gFrameCaptureInterval - diff); 173 gFrameCaptureInterval - diff);
165 } else { // Else reset gFrameCounter and send the frames 174 } else { // Else reset gFrameCounter and send the frames
166 dDoneFrameCapturing = true; 175 dDoneFrameCapturing = true;
167 gFrameCounter = 0; 176 gFrameCounter = 0;
168 clearPage_(); 177 clearPage_();
169 prepareProgressBar_(); 178 prepareProgressBar_();
170 sendFrames(); 179 sendFrames();
171 } 180 }
172 } 181 }
173 182
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after
265 /** 274 /**
266 * @private 275 * @private
267 */ 276 */
268 function prepareProgressBar_() { 277 function prepareProgressBar_() {
269 document.body.innerHTML = 278 document.body.innerHTML =
270 '<html><body>' + 279 '<html><body>' +
271 '<p id="progress-bar" style="position: absolute; top: 50%; left: 40%;">' + 280 '<p id="progress-bar" style="position: absolute; top: 50%; left: 40%;">' +
272 'Preparing to send frames.</p>' + 281 'Preparing to send frames.</p>' +
273 '</body></html>'; 282 '</body></html>';
274 } 283 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698