Chromium Code Reviews Chromium Code Reviews
Issue 190563002:
Refactored how WebRTC content browser tests talk to their javascript. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| OLD | NEW |
|---|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script type="text/javascript" src="webrtc_test_utilities.js"></script> | 3 <script type="text/javascript" src="webrtc_test_utilities.js"></script> |
| 4 <script type="text/javascript"> | 4 <script type="text/javascript"> |
| 5 $ = function(id) { | 5 $ = function(id) { |
| 6 return document.getElementById(id); | 6 return document.getElementById(id); |
| 7 }; | 7 }; |
| 8 | 8 |
| 9 var gLocalStream = null; | 9 var gLocalStream = null; |
| 10 | 10 |
| 11 setAllEventsOccuredHandler(function() { | 11 setAllEventsOccuredHandler(function() { |
| 12 gLocalStream.stop(); | 12 gLocalStream.stop(); |
| 13 document.title = 'OK'; | 13 reportTestSuccess(); |
| 14 sendValueToTest(document.title); | |
| 15 }); | 14 }); |
| 16 | 15 |
| 17 function sendValueToTest(value) { | |
| 18 window.domAutomationController.setAutomationId(0); | |
| 19 window.domAutomationController.send(value); | |
| 20 } | |
| 21 | |
| 22 function getSources() { | 16 function getSources() { |
| 23 MediaStreamTrack.getSources(function(devices) { | 17 MediaStreamTrack.getSources(function(devices) { |
| 24 document.title = 'Sources Available'; | 18 document.title = 'Sources Available'; |
| 25 sendValueToTest(JSON.stringify(devices)); | 19 sendValueToTest(JSON.stringify(devices)); |
| 26 }); | 20 }); |
| 27 } | 21 } |
| 28 | 22 |
| 29 // Creates a MediaStream and renders it locally. When the video is detected to | 23 // Creates a MediaStream and renders it locally. When the video is detected to |
| 30 // be rolling, the title is changed and the stream should be stopped. | 24 // be rolling, the title is changed and the stream should be stopped. |
| 31 function getUserMediaAndStop(constraints) { | 25 function getUserMediaAndStop(constraints) { |
| 32 document.title = 'Calling GetUserMedia'; | 26 console.log('Calling getUserMediaAndStop.'); |
| 33 navigator.webkitGetUserMedia( | 27 navigator.webkitGetUserMedia( |
| 34 constraints, | 28 constraints, |
| 35 function(stream) { displayAndDetectVideo(stream, stopVideoTrack); }, | 29 function(stream) { displayAndDetectVideo(stream, stopVideoTrack); }, |
| 36 failedCallback); | 30 failedCallback); |
| 37 } | 31 } |
| 38 | 32 |
| 33 // Requests getusermedia and expects it to fail. | |
| 34 function getUserMediaAndExpectFailure(constraints) { | |
| 35 console.log('Calling getUserMediaAndExpectFailure.'); | |
| 36 navigator.webkitGetUserMedia( | |
| 37 constraints, | |
| 38 function(stream) { failTest('Unexpectedly succeeded getUserMedia.'); }, | |
| 39 function(error) { reportTestSuccess(); }); | |
| 40 } | |
| 41 | |
| 39 // Creates a MediaStream and renders it locally. When the video is detected to | 42 // Creates a MediaStream and renders it locally. When the video is detected to |
| 40 // be rolling, the title should be changed and the stream is let roll for a | 43 // be rolling we return ok-stream-running through the automation controller. |
| 41 // number |waitTimeInSeconds| and then it should be stopped. | 44 function getUserMediaAndGetStreamUp(constraints, waitTimeInSeconds) { |
| 42 function getUserMediaAndWaitAndStop(constraints, waitTimeInSeconds) { | 45 console.log('Calling getUserMediaAndGetStreamUp.'); |
| 43 navigator.webkitGetUserMedia( | 46 navigator.webkitGetUserMedia( |
| 44 constraints, | 47 constraints, |
| 45 function(stream) { | 48 function(stream) { |
| 46 displayAndDetectVideo( | 49 displayAndDetectVideo( |
| 47 stream, | 50 stream, |
| 48 function() { | 51 function() { |
| 49 waitAndStopVideoTrack(waitTimeInSeconds); | 52 sendValueToTest('ok-stream-running'); |
| 50 }); | 53 }); |
| 51 }, | 54 }, |
| 52 failedCallback); | 55 failedCallback); |
| 53 } | 56 } |
| 54 | 57 |
| 58 // Gets a video stream up, analyses it and returns the aspect ratio to the | |
| 59 // test through the automation controller. | |
| 55 function getUserMediaAndAnalyseAndStop(constraints) { | 60 function getUserMediaAndAnalyseAndStop(constraints) { |
| 61 console.log('Calling getUserMediaAndAnalyseAndStop.'); | |
| 56 navigator.webkitGetUserMedia( | 62 navigator.webkitGetUserMedia( |
| 57 constraints, displayDetectAndAnalyzeVideo, failedCallback); | 63 constraints, displayDetectAndAnalyzeVideo, failedCallback); |
| 58 } | 64 } |
| 59 | 65 |
| 60 // This test that a MediaStream can be cloned and that the clone can | 66 // This test that a MediaStream can be cloned and that the clone can |
| 61 // be rendered. | 67 // be rendered. |
| 62 function getUserMediaAndClone() { | 68 function getUserMediaAndClone() { |
| 69 console.log('Calling getUserMediaAndClone.'); | |
| 63 navigator.webkitGetUserMedia({video: true, audio: true}, | 70 navigator.webkitGetUserMedia({video: true, audio: true}, |
| 64 createAndRenderClone, failedCallback); | 71 createAndRenderClone, failedCallback); |
| 65 } | 72 } |
| 66 | 73 |
| 67 // Creates two MediaStream and renders them locally. When the video of both | 74 // Creates two MediaStream and renders them locally. When the video of both |
| 68 // streams are detected to be rolling, we stop the local stream. Since both | 75 // streams are detected to be rolling, we stop the local stream. Since both |
| 69 // streams have the same source, both video streams should stop. If they do, | 76 // streams have the same source, both video streams should stop. If they do, |
| 70 // the test succeeds. | 77 // the test succeeds. |
| 71 function twoGetUserMediaAndStop(constraints) { | 78 function twoGetUserMediaAndStop(constraints) { |
| 72 document.title = 'Calling Two GetUserMedia'; | 79 console.log('Calling Two GetUserMedia'); |
| 73 navigator.webkitGetUserMedia( | 80 navigator.webkitGetUserMedia( |
| 74 constraints, | 81 constraints, |
| 75 function(stream) { | 82 function(stream) { |
| 76 displayAndDetectVideo(stream, requestSecondGetUserMedia); | 83 displayAndDetectVideo(stream, requestSecondGetUserMedia); |
| 77 }, | 84 }, |
| 78 failedCallback); | 85 failedCallback); |
| 79 var requestSecondGetUserMedia = function() { | 86 var requestSecondGetUserMedia = function() { |
| 80 navigator.webkitGetUserMedia( | 87 navigator.webkitGetUserMedia( |
| 81 constraints, | 88 constraints, |
| 82 function(stream) { | 89 function(stream) { |
| 83 displayIntoVideoElement(stream, | 90 displayIntoVideoElement(stream, |
| 84 stopStreamAndVerifyAllLocalViewsDontPlayVideo, 'local-view-2'); | 91 stopStreamAndVerifyAllLocalViewsDontPlayVideo, 'local-view-2'); |
| 85 }, | 92 }, |
| 86 failedCallback); | 93 failedCallback); |
| 87 }; | 94 }; |
| 88 | 95 |
| 89 var stopStreamAndVerifyAllLocalViewsDontPlayVideo = function() { | 96 var stopStreamAndVerifyAllLocalViewsDontPlayVideo = function() { |
| 90 gLocalStream.getVideoTracks()[0].stop(); | 97 gLocalStream.getVideoTracks()[0].stop(); |
| 91 | 98 |
| 92 // Since local-view and local-view-2 are playing the video from the same | 99 // Since local-view and local-view-2 are playing the video from the same |
| 93 // source, both of them should stop. | 100 // source, both of them should stop. |
| 94 waitForVideoToStop('local-view'); | 101 waitForVideoToStop('local-view'); |
| 95 waitForVideoToStop('local-view-2'); | 102 waitForVideoToStop('local-view-2'); |
| 96 }; | 103 }; |
| 97 } | 104 } |
| 98 | 105 |
| 99 function failedCallback(error) { | 106 function failedCallback(error) { |
| 100 document.title = 'GetUserMedia call failed with code ' + error.code; | 107 failTest('GetUserMedia call failed with code ' + error.code); |
| 101 sendValueToTest(document.title); | |
| 102 } | 108 } |
| 103 | 109 |
| 104 function plugStreamIntoVideoElement(stream, videoElement) { | 110 function plugStreamIntoVideoElement(stream, videoElement) { |
| 105 gLocalStream = stream; | 111 gLocalStream = stream; |
| 106 var localStreamUrl = URL.createObjectURL(stream); | 112 var localStreamUrl = URL.createObjectURL(stream); |
| 107 $(videoElement).src = localStreamUrl; | 113 $(videoElement).src = localStreamUrl; |
| 108 } | 114 } |
| 109 | 115 |
| 110 function displayIntoVideoElement(stream, callback, videoElement) { | 116 function displayIntoVideoElement(stream, callback, videoElement) { |
| 111 plugStreamIntoVideoElement(stream, videoElement); | 117 plugStreamIntoVideoElement(stream, videoElement); |
| 112 document.title = 'Waiting for video...'; | |
| 113 detectVideoPlaying(videoElement, callback); | 118 detectVideoPlaying(videoElement, callback); |
| 114 } | 119 } |
| 115 | 120 |
| 116 function displayAndDetectVideo(stream, callback) { | 121 function displayAndDetectVideo(stream, callback) { |
| 117 displayIntoVideoElement(stream, callback, 'local-view'); | 122 displayIntoVideoElement(stream, callback, 'local-view'); |
| 118 } | 123 } |
| 119 | 124 |
| 120 function displayDetectAndAnalyzeVideo(stream) { | 125 function displayDetectAndAnalyzeVideo(stream) { |
| 121 plugStreamIntoVideoElement(stream, 'local-view'); | 126 plugStreamIntoVideoElement(stream, 'local-view'); |
| 122 analyzeVideo(); | 127 analyzeVideo(); |
| 123 } | 128 } |
| 124 | 129 |
| 125 function createAndRenderClone(stream) { | 130 function createAndRenderClone(stream) { |
| 126 gLocalStream = stream; | 131 gLocalStream = stream; |
| 127 // TODO(perkj): --use-fake-device-for-media-stream do not currently | 132 // TODO(perkj): --use-fake-device-for-media-stream do not currently |
| 128 // work with audio devices and not all bots has a microphone. | 133 // work with audio devices and not all bots has a microphone. |
| 129 new_stream = new webkitMediaStream(); | 134 new_stream = new webkitMediaStream(); |
| 130 new_stream.addTrack(stream.getVideoTracks()[0]); | 135 new_stream.addTrack(stream.getVideoTracks()[0]); |
| 131 expectEquals(new_stream.getVideoTracks().length, 1); | 136 assertEquals(new_stream.getVideoTracks().length, 1); |
| 132 if (stream.getAudioTracks().length > 0) { | 137 if (stream.getAudioTracks().length > 0) { |
| 133 new_stream.addTrack(stream.getAudioTracks()[0]); | 138 new_stream.addTrack(stream.getAudioTracks()[0]); |
| 134 expectEquals(new_stream.getAudioTracks().length, 1); | 139 assertEquals(new_stream.getAudioTracks().length, 1); |
| 135 new_stream.removeTrack(new_stream.getAudioTracks()[0]); | 140 new_stream.removeTrack(new_stream.getAudioTracks()[0]); |
| 136 expectEquals(new_stream.getAudioTracks().length, 0); | 141 assertEquals(new_stream.getAudioTracks().length, 0); |
| 137 } | 142 } |
| 138 | 143 |
| 139 var newStreamUrl = URL.createObjectURL(new_stream); | 144 var newStreamUrl = URL.createObjectURL(new_stream); |
| 140 $('local-view').src = newStreamUrl; | 145 $('local-view').src = newStreamUrl; |
| 141 waitForVideo('local-view'); | 146 waitForVideo('local-view'); |
| 142 } | 147 } |
| 143 | 148 |
| 144 function stopVideoTrack() { | 149 function stopVideoTrack() { |
| 145 gLocalStream.getVideoTracks()[0].stop(); | 150 gLocalStream.getVideoTracks()[0].stop(); |
| 146 waitForVideoToStop('local-view'); | 151 waitForVideoToStop('local-view'); |
| 147 } | 152 } |
| 148 | 153 |
| 149 function waitAndStopVideoTrack(waitTimeInSeconds) { | 154 function waitAndStopVideoTrack(waitTimeInSeconds) { |
| 150 document.title = 'Running...'; | |
| 151 setTimeout(stopVideoTrack, waitTimeInSeconds * 1000); | 155 setTimeout(stopVideoTrack, waitTimeInSeconds * 1000); |
| 152 } | 156 } |
| 153 | 157 |
| 154 function analyzeVideo() { | 158 function analyzeVideo() { |
| 155 document.title = 'Waiting for video...'; | |
| 156 addExpectedEvent(); | |
| 157 detectAspectRatio(function(aspectRatio) { | 159 detectAspectRatio(function(aspectRatio) { |
| 158 document.title = aspectRatio; | 160 sendValueToTest(aspectRatio); |
| 159 eventOccured(); | |
| 160 }); | 161 }); |
| 161 } | 162 } |
| 162 | 163 |
| 164 // This function tries to calculate the aspect ratio shown by the fake capture | |
|
phoglund_chromium
2014/03/07 13:41:18
Moved this guy: it seemed to belong here rather th
| |
| 165 // device in the video tag. For this, we count the amount of light green | |
| 166 // pixels along |aperture| pixels on the positive X and Y axis starting from | |
| 167 // the center of the image. In this very center there should be a time-varying | |
| 168 // pacman; the algorithm counts for a couple of iterations and keeps the | |
| 169 // maximum amount of light green pixels on both directions. From this data | |
| 170 // the aspect ratio is calculated relative to a 320x240 window, so 4:3 would | |
| 171 // show as a 1. Furthermore, since an original non-4:3 might be letterboxed or | |
| 172 // cropped, the actual X and Y pixel amounts are compared with the fake video | |
| 173 // capture expected pacman radius (see further below). | |
| 174 function detectAspectRatio(callback) { | |
| 175 var width = VIDEO_TAG_WIDTH; | |
| 176 var height = VIDEO_TAG_HEIGHT; | |
| 177 var videoElement = $('local-view'); | |
| 178 var canvas = $('local-view-canvas'); | |
| 179 | |
| 180 var maxLightGreenPixelsX = 0; | |
| 181 var maxLightGreenPixelsY = 0; | |
| 182 | |
| 183 var aperture = Math.min(width, height) / 2; | |
| 184 var iterations = 0; | |
| 185 var maxIterations = 10; | |
| 186 | |
| 187 var waitVideo = setInterval(function() { | |
| 188 var context = canvas.getContext('2d'); | |
| 189 context.drawImage(videoElement, 0, 0, width, height); | |
| 190 | |
| 191 // We are interested in a window starting from the center of the image | |
| 192 // where we expect the circle from the fake video capture to be rolling. | |
| 193 var pixels = | |
| 194 context.getImageData(width / 2, height / 2, aperture, aperture); | |
| 195 | |
| 196 var lightGreenPixelsX = 0; | |
| 197 var lightGreenPixelsY = 0; | |
| 198 | |
| 199 // Walk horizontally counting light green pixels. | |
| 200 for (var x = 0; x < aperture; ++x) { | |
| 201 if (pixels.data[4 * x + 1] != COLOR_BACKGROUND_GREEN) | |
| 202 lightGreenPixelsX++; | |
| 203 } | |
| 204 // Walk vertically counting light green pixels. | |
| 205 for (var y = 0; y < aperture; ++y) { | |
| 206 if (pixels.data[4 * y * aperture + 1] != 135) | |
| 207 lightGreenPixelsY++; | |
| 208 } | |
| 209 if (lightGreenPixelsX > maxLightGreenPixelsX && | |
| 210 lightGreenPixelsX < aperture) | |
| 211 maxLightGreenPixelsX = lightGreenPixelsX; | |
| 212 if (lightGreenPixelsY > maxLightGreenPixelsY && | |
| 213 lightGreenPixelsY < aperture) | |
| 214 maxLightGreenPixelsY = lightGreenPixelsY; | |
| 215 | |
| 216 var detectedAspectRatioString = ""; | |
| 217 if (++iterations > maxIterations) { | |
| 218 clearInterval(waitVideo); | |
| 219 observedAspectRatio = maxLightGreenPixelsY / maxLightGreenPixelsX; | |
| 220 // At this point the observed aspect ratio is either 1, for undistorted | |
| 221 // 4:3, or some other aspect ratio that is seen as distorted. | |
| 222 if (Math.abs(observedAspectRatio - 1.333) < 0.1) | |
| 223 detectedAspectRatioString = "16:9"; | |
| 224 else if (Math.abs(observedAspectRatio - 1.20) < 0.1) | |
| 225 detectedAspectRatioString = "16:10"; | |
| 226 else if (Math.abs(observedAspectRatio - 1.0) < 0.1) | |
| 227 detectedAspectRatioString = "4:3"; | |
| 228 else | |
| 229 detectedAspectRatioString = "UNKNOWN aspect ratio"; | |
| 230 console.log(detectedAspectRatioString + " observed aspect ratio (" + | |
| 231 observedAspectRatio + ")"); | |
| 232 | |
| 233 // The FakeVideoCapture calculates the circle radius as | |
| 234 // std::min(capture_format_.width, capture_format_.height) / 4; | |
| 235 // we do the same and see if both dimensions are scaled, meaning | |
| 236 // we started from a cropped or stretched image. | |
| 237 var nonDistortedRadius = Math.min(width, height) / 4; | |
| 238 if ((maxLightGreenPixelsX != nonDistortedRadius) && | |
| 239 (maxLightGreenPixelsY != nonDistortedRadius)) { | |
| 240 detectedAspectRatioString += " cropped"; | |
| 241 } else | |
| 242 detectedAspectRatioString += " letterbox"; | |
| 243 | |
| 244 console.log("Original image is: " + detectedAspectRatioString); | |
| 245 callback(detectedAspectRatioString); | |
| 246 } | |
| 247 }, | |
| 248 50); | |
|
perkj_chrome
2014/03/07 14:00:21
indentation? maybe a comment saying what 50 means.
phoglund_chromium
2014/03/07 14:23:36
Done.
| |
| 249 } | |
| 163 </script> | 250 </script> |
| 164 </head> | 251 </head> |
| 165 <body> | 252 <body> |
| 166 <table border="0"> | 253 <table border="0"> |
| 167 <tr> | 254 <tr> |
| 168 <td>Local Preview</td> | 255 <td>Local Preview</td> |
| 169 </tr> | 256 </tr> |
| 170 <tr> | 257 <tr> |
| 171 <td><video width="320" height="240" id="local-view" | 258 <td><video width="320" height="240" id="local-view" |
| 172 autoplay="autoplay"></video></td> | 259 autoplay="autoplay"></video></td> |
| 173 <td><canvas width="320" height="240" id="local-view-canvas" | 260 <td><canvas width="320" height="240" id="local-view-canvas" |
| 174 style="display:none"></canvas></td> | 261 style="display:none"></canvas></td> |
| 175 </tr> | 262 </tr> |
| 176 <tr> | 263 <tr> |
| 177 <td>Local Preview 2</td> | 264 <td>Local Preview 2</td> |
| 178 </tr> | 265 </tr> |
| 179 <tr> | 266 <tr> |
| 180 <td><video width="320" height="240" id="local-view-2" | 267 <td><video width="320" height="240" id="local-view-2" |
| 181 autoplay="autoplay"></video></td> | 268 autoplay="autoplay"></video></td> |
| 182 <!-- Canvases are named after their corresponding video elements. --> | 269 <!-- Canvases are named after their corresponding video elements. --> |
| 183 <td><canvas width="320" height="240" id="local-view-2-canvas" | 270 <td><canvas width="320" height="240" id="local-view-2-canvas" |
| 184 style="display:none"></canvas></td> | 271 style="display:none"></canvas></td> |
| 185 </tr> | 272 </tr> |
| 186 </table> | 273 </table> |
| 187 </body> | 274 </body> |
| 188 </html> | 275 </html> |
| OLD | NEW |
