OLD | NEW |
---|---|
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 Loading... | |
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) { |
kjellander_chromium
2014/04/29 08:17:37
I suggest changing the first param to be the HTML
phoglund_chromium
2014/04/29 08:48:20
And how do you get a ref to the video tag object i
kjellander_chromium
2014/04/29 08:57:48
Like this:
startFrameCapture(this, 30, 5)
amogh.bihani
2014/04/29 10:38:53
Done.
| |
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); |
kjellander_chromium
2014/04/29 08:17:37
...then you can remove this lookup and also the ch
amogh.bihani
2014/04/29 10:38:53
Done.
| |
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); |
kjellander_chromium
2014/04/29 08:17:37
I think there's room for improvement here, creatin
phoglund_chromium
2014/04/29 08:48:20
Yeah, I suggested that too but in a future CL.
| |
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 // We capture the whole video frame. |
145 if (height == canvas_height) { | 159 var img = ctx.getImageData(0, 0, width, height); |
146 // We capture the whole video frame. | |
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); | 160 gFrames.push(img.data.buffer); |
153 gFrameCounter++; | 161 gFrameCounter++; |
154 | 162 |
155 // Adjust the timer. | 163 // Adjust the timer. |
156 var current_time = new Date().getTime(); | 164 var current_time = new Date().getTime(); |
157 var ideal_time = gFrameCounter*gFrameCaptureInterval; | 165 var ideal_time = gFrameCounter*gFrameCaptureInterval; |
158 var real_time_elapsed = current_time - gStartOfTime; | 166 var real_time_elapsed = current_time - gStartOfTime; |
159 var diff = real_time_elapsed - ideal_time; | 167 var diff = real_time_elapsed - ideal_time; |
160 | 168 |
161 if (real_time_elapsed < gCaptureDuration) { | 169 if (real_time_elapsed < gCaptureDuration) { |
162 // If duration isn't over shoot again | 170 // If duration isn't over shoot again |
163 setTimeout(function() { shoot(width, height, canvas_height); }, | 171 setTimeout(function() { shoot(width, height); }, |
164 gFrameCaptureInterval - diff); | 172 gFrameCaptureInterval - diff); |
165 } else { // Else reset gFrameCounter and send the frames | 173 } else { // Else reset gFrameCounter and send the frames |
166 dDoneFrameCapturing = true; | 174 dDoneFrameCapturing = true; |
167 gFrameCounter = 0; | 175 gFrameCounter = 0; |
168 clearPage_(); | 176 clearPage_(); |
169 prepareProgressBar_(); | 177 prepareProgressBar_(); |
170 sendFrames(); | 178 sendFrames(); |
171 } | 179 } |
172 } | 180 } |
173 | 181 |
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
265 /** | 273 /** |
266 * @private | 274 * @private |
267 */ | 275 */ |
268 function prepareProgressBar_() { | 276 function prepareProgressBar_() { |
269 document.body.innerHTML = | 277 document.body.innerHTML = |
270 '<html><body>' + | 278 '<html><body>' + |
271 '<p id="progress-bar" style="position: absolute; top: 50%; left: 40%;">' + | 279 '<p id="progress-bar" style="position: absolute; top: 50%; left: 40%;">' + |
272 'Preparing to send frames.</p>' + | 280 'Preparing to send frames.</p>' + |
273 '</body></html>'; | 281 '</body></html>'; |
274 } | 282 } |
OLD | NEW |