OLD | NEW |
---|---|
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <script type="text/javascript"> | 3 <script type="text/javascript"> |
4 $ = function(id) { | 4 $ = function(id) { |
5 return document.getElementById(id); | 5 return document.getElementById(id); |
6 }; | 6 }; |
7 | 7 |
8 var gFirstConnection = null; | 8 var gFirstConnection = null; |
9 var gSecondConnection = null; | 9 var gSecondConnection = null; |
10 var gTestWithoutMsidAndBundle = false; | 10 var gTestWithoutMsidAndBundle = false; |
11 | 11 |
12 // Number of conditions to meet before the test pass. When the test pass, the | |
13 // document title change to OK. | |
phoglund_chromium
2013/01/09 12:40:36
I think a better name here is gNumberOfEvents and
perkj_chrome
2013/01/09 13:56:21
Done.
| |
14 var gNumberOfExitConditions = 0; | |
15 | |
16 // Number of conditions that currently have been met. | |
17 var gNumberOfExitConditionsMet = 0; | |
18 | |
19 // Test that we can setup call with an audio and video track. | |
12 function call(constraints) { | 20 function call(constraints) { |
21 createConnections(null); | |
13 navigator.webkitGetUserMedia(constraints, okCallback, failedCallback); | 22 navigator.webkitGetUserMedia(constraints, okCallback, failedCallback); |
23 waitForVideo($('remote-view'), 320, 240); | |
14 } | 24 } |
15 | 25 |
26 // Test that we can setup call with an audio and video track and | |
27 // simulate that the remote peer don't support MSID. | |
16 function callWithoutMsidAndBundle() { | 28 function callWithoutMsidAndBundle() { |
29 createConnections(null); | |
17 gTestWithoutMsidAndBundle = true; | 30 gTestWithoutMsidAndBundle = true; |
18 navigator.webkitGetUserMedia({audio:true, video:true}, okCallback, | 31 navigator.webkitGetUserMedia({audio:true, video:true}, okCallback, |
19 failedCallback); | 32 failedCallback); |
33 waitForVideo($('remote-view'), 320, 240); | |
20 } | 34 } |
35 | |
36 // Test only a data channel. | |
37 function callWithDataOnly() { | |
38 createConnections({optional:[{RtpDataChannels: true}]}); | |
39 setupDataChannel(); | |
40 gFirstConnection.createOffer(onOfferCreated); | |
41 } | |
42 | |
43 // Test call with audio, video and a data channel. | |
44 function callWithDataAndMedia() { | |
45 createConnections({optional:[{RtpDataChannels: true}]}); | |
46 setupDataChannel(); | |
47 navigator.webkitGetUserMedia({audio:true, video:true}, okCallback, | |
48 failedCallback); | |
49 waitForVideo($('remote-view'), 320, 240); | |
50 } | |
51 | |
52 // Test call with a data channel and later add audio and video. | |
53 function callWithDataAndLaterAddMedia() { | |
54 // TODO(perkj): This is needed for now until | |
55 // https://code.google.com/p/webrtc/issues/detail?id=1203 is fixed. | |
56 gTestWithoutMsidAndBundle = true; | |
57 | |
58 createConnections({optional:[{RtpDataChannels: true}]}); | |
59 setupDataChannel(); | |
60 gFirstConnection.createOffer(onOfferCreated); | |
61 | |
62 navigator.webkitGetUserMedia({audio:true, video:true}, okCallback, | |
63 failedCallback); | |
64 waitForVideo($('remote-view'), 320, 240); | |
65 } | |
66 | |
phoglund_chromium
2013/01/09 12:40:36
Perhaps it would be nice to number the events, lik
perkj_chrome
2013/01/09 13:56:21
Done.
| |
67 // Create a data channel on |gFirstConnection| and sends data to | |
phoglund_chromium
2013/01/09 12:40:36
Nit: line length
perkj_chrome
2013/01/09 13:56:21
Done.
| |
68 // |gSecondConnection|. When data is received on |gSecondConnection| a message | |
69 // is sent to |gFirstConnection|. | |
70 // When data is received on |gFirstConnection|, the data | |
71 // channel is closed again. The test pass when |dataChannel.readyState| has | |
72 // transitioned to closed after an offer/answer exchange. | |
73 function setupDataChannel() { | |
74 var sendDataString = "send some text on a data channel." | |
75 dataChannel = gFirstConnection.createDataChannel( | |
76 "sendDataChannel", {reliable : false}); | |
77 expectEquals('connecting', dataChannel.readyState); | |
78 | |
79 dataChannel.onmessage = function(event) { | |
80 expectEquals(event.data, sendDataString); | |
81 dataChannel.close(); | |
82 gFirstConnection.createOffer(onOfferCreated); | |
83 } | |
84 | |
85 dataChannel.onopen = function() { | |
86 expectEquals('open', dataChannel.readyState); | |
87 dataChannel.send(sendDataString); | |
88 } | |
89 | |
90 gSecondConnection.ondatachannel = function (event) { | |
phoglund_chromium
2013/01/09 12:40:36
This shadows a variable in the outer scope, which
perkj_chrome
2013/01/09 13:56:21
renamed. I would prefer to not break out anyting s
phoglund_chromium
2013/01/09 16:36:45
Ok, fair enough.
| |
91 var dataChannel = event.channel; | |
92 var messageReceived = false; | |
93 dataChannel.onmessage = function(event) { | |
94 expectEquals(event.data, sendDataString); | |
95 // TODO(perkj): Currently we sometimes can't send a message here since | |
96 // the the |dataChannel.readyState| has not transitioned to open yet. | |
97 // http://code.google.com/p/webrtc/issues/detail?id=1262 | |
98 messageReceived = true; | |
phoglund_chromium
2013/01/09 12:40:36
Hm. Ok, so this whole messageReceived thing is use
perkj_chrome
2013/01/09 13:56:21
Done.
| |
99 if (dataChannel.readyState == "open") { | |
100 dataChannel.send(sendDataString); | |
101 } | |
102 } | |
103 dataChannel.onopen = function(event) { | |
104 expectEquals('open', dataChannel.readyState); | |
105 if (messageReceived) { | |
106 dataChannel.send(sendDataString); | |
107 } | |
108 } | |
109 } | |
110 | |
111 addExitCondition(); | |
112 dataChannel.onclose = function() { | |
113 expectEquals('closed', dataChannel.readyState); | |
114 testSuccessful(); | |
115 } | |
116 } | |
21 | 117 |
22 function failedCallback(error) { | 118 function failedCallback(error) { |
23 document.title = 'getUserMedia request failed with code ' + error.code; | 119 document.title = 'getUserMedia request failed with code ' + error.code; |
24 } | 120 } |
25 | 121 |
26 function okCallback(localStream) { | 122 function okCallback(localStream) { |
27 var localStreamUrl = webkitURL.createObjectURL(localStream); | 123 var localStreamUrl = webkitURL.createObjectURL(localStream); |
28 $('local-view').src = localStreamUrl; | 124 $('local-view').src = localStreamUrl; |
29 | 125 |
30 callUsingStream(localStream); | 126 callUsingStream(localStream); |
31 } | 127 } |
32 | 128 |
33 function callUsingStream(localStream) { | 129 function createConnections(constraints) { |
34 gFirstConnection = new webkitRTCPeerConnection(null, null); | 130 gFirstConnection = new webkitRTCPeerConnection(null, constraints); |
35 gFirstConnection.onicecandidate = onIceCandidateToFirst; | 131 gFirstConnection.onicecandidate = onIceCandidateToFirst; |
132 | |
133 gSecondConnection = new webkitRTCPeerConnection(null, constraints); | |
134 gSecondConnection.onicecandidate = onIceCandidateToSecond; | |
135 gSecondConnection.onaddstream = onRemoteStream; | |
136 } | |
137 | |
138 function callUsingStream(localStream) { | |
36 gFirstConnection.addStream(localStream); | 139 gFirstConnection.addStream(localStream); |
37 gFirstConnection.createOffer(onOfferCreated); | 140 gFirstConnection.createOffer(onOfferCreated); |
38 } | 141 } |
39 | 142 |
40 function onOfferCreated(offer) { | 143 function onOfferCreated(offer) { |
41 gFirstConnection.setLocalDescription(offer); | 144 gFirstConnection.setLocalDescription(offer); |
42 | 145 receiveOffer(offer.sdp); |
43 receiveCall(offer.sdp); | |
44 } | 146 } |
45 | 147 |
46 function receiveCall(offerSdp) { | 148 function receiveOffer(offerSdp) { |
47 if (gTestWithoutMsidAndBundle) { | 149 if (gTestWithoutMsidAndBundle) { |
48 offerSdp = removeMsidAndBundle(offerSdp); | 150 offerSdp = removeMsidAndBundle(offerSdp); |
49 } | 151 } |
50 gSecondConnection = new webkitRTCPeerConnection(null, null); | |
51 gSecondConnection.onicecandidate = onIceCandidateToSecond; | |
52 gSecondConnection.onaddstream = onRemoteStream; | |
53 | 152 |
54 var parsedOffer = new RTCSessionDescription({ type: 'offer', | 153 var parsedOffer = new RTCSessionDescription({ type: 'offer', |
55 sdp: offerSdp }); | 154 sdp: offerSdp }); |
56 gSecondConnection.setRemoteDescription(parsedOffer); | 155 gSecondConnection.setRemoteDescription(parsedOffer); |
57 | |
58 gSecondConnection.createAnswer(onAnswerCreated); | 156 gSecondConnection.createAnswer(onAnswerCreated); |
59 } | 157 } |
60 | 158 |
61 function removeMsidAndBundle(offerSdp) { | 159 function removeMsidAndBundle(offerSdp) { |
62 offerSdp = offerSdp.replace(/a=msid-semantics.*\r\n/g, ''); | 160 offerSdp = offerSdp.replace(/a=msid-semantics.*\r\n/g, ''); |
63 offerSdp = offerSdp.replace('a=group:BUNDLE audio video\r\n', ''); | 161 offerSdp = offerSdp.replace('a=group:BUNDLE audio video\r\n', ''); |
64 offerSdp = offerSdp.replace('a=mid:audio\r\n', ''); | 162 offerSdp = offerSdp.replace('a=mid:audio\r\n', ''); |
65 offerSdp = offerSdp.replace('a=mid:video\r\n', ''); | 163 offerSdp = offerSdp.replace('a=mid:video\r\n', ''); |
66 offerSdp = offerSdp.replace(/a=ssrc.*\r\n/g, ''); | 164 offerSdp = offerSdp.replace(/a=ssrc.*\r\n/g, ''); |
67 return offerSdp; | 165 return offerSdp; |
(...skipping 18 matching lines...) Expand all Loading... | |
86 } | 184 } |
87 | 185 |
88 function onIceCandidateToSecond(event) { | 186 function onIceCandidateToSecond(event) { |
89 if (event.candidate) { | 187 if (event.candidate) { |
90 var candidate = new RTCIceCandidate(event.candidate); | 188 var candidate = new RTCIceCandidate(event.candidate); |
91 gFirstConnection.addIceCandidate(candidate); | 189 gFirstConnection.addIceCandidate(candidate); |
92 } | 190 } |
93 } | 191 } |
94 | 192 |
95 function onRemoteStream(e) { | 193 function onRemoteStream(e) { |
96 var remoteStreamUrl = webkitURL.createObjectURL(e.stream); | |
97 var remoteVideo = $('remote-view'); | |
98 remoteVideo.src = remoteStreamUrl; | |
99 | |
100 if (gTestWithoutMsidAndBundle && e.stream.label != "default") { | 194 if (gTestWithoutMsidAndBundle && e.stream.label != "default") { |
101 document.title = 'a default remote stream was expected but instead ' + | 195 document.title = 'a default remote stream was expected but instead ' + |
102 e.stream.label + ' was received.'; | 196 e.stream.label + ' was received.'; |
103 return; | 197 return; |
104 } | 198 } |
105 | 199 var remoteStreamUrl = webkitURL.createObjectURL(e.stream); |
106 waitForVideo(remoteVideo, 320, 240); | 200 var remoteVideo = $('remote-view'); |
201 remoteVideo.src = remoteStreamUrl; | |
107 } | 202 } |
108 | 203 |
109 // TODO(phoglund): perhaps use the video detector in chrome/test/data/webrtc/? | 204 // TODO(phoglund): perhaps use the video detector in chrome/test/data/webrtc/? |
110 function waitForVideo(videoElement, width, height) { | 205 function waitForVideo(videoElement, width, height) { |
111 document.title = 'Waiting for video...'; | 206 document.title = 'Waiting for video...'; |
phoglund_chromium
2013/01/09 12:40:36
Use addExitConditions.
perkj_chrome
2013/01/09 13:56:21
Done.
| |
207 ++gNumberOfExitConditions; | |
112 var canvas = $('canvas'); | 208 var canvas = $('canvas'); |
113 setInterval(function() { | 209 setInterval(function() { |
114 var context = canvas.getContext('2d'); | 210 var context = canvas.getContext('2d'); |
115 context.drawImage(videoElement, 0, 0, width, height); | 211 context.drawImage(videoElement, 0, 0, width, height); |
116 var pixels = context.getImageData(0, 0, width, height).data; | 212 var pixels = context.getImageData(0, 0, width, height).data; |
117 | 213 |
118 if (isVideoPlaying(pixels, width, height)) | 214 if (isVideoPlaying(pixels, width, height)) |
119 testSuccessful(); | 215 testSuccessful(); |
120 }, 100); | 216 }, 100); |
121 } | 217 } |
122 | 218 |
123 // This very basic video verification algorithm will be satisfied if any | 219 // This very basic video verification algorithm will be satisfied if any |
124 // pixels are nonzero in a small sample area in the middle. It relies on the | 220 // pixels are nonzero in a small sample area in the middle. It relies on the |
125 // assumption that a video element with null source just presents zeroes. | 221 // assumption that a video element with null source just presents zeroes. |
126 function isVideoPlaying(pixels, width, height) { | 222 function isVideoPlaying(pixels, width, height) { |
127 // Sample somewhere near the middle of the image. | 223 // Sample somewhere near the middle of the image. |
128 var middle = width * height / 2; | 224 var middle = width * height / 2; |
129 for (var i = 0; i < 20; i++) { | 225 for (var i = 0; i < 20; i++) { |
130 if (pixels[middle + i] > 0) { | 226 if (pixels[middle + i] > 0) { |
131 return true; | 227 return true; |
132 } | 228 } |
133 } | 229 } |
134 return false; | 230 return false; |
135 } | 231 } |
232 | |
233 | |
234 // This function matches |left| and |right| and throws an exception if the | |
235 // values don't match. | |
236 function expectEquals(left, right) { | |
237 if (left != right) { | |
238 var s = "expectEquals failed left: " + left + " right: " + right; | |
239 document.title = s; | |
240 throw s; | |
241 } | |
242 } | |
136 | 243 |
244 function addExitCondition() { | |
245 ++gNumberOfExitConditions; | |
246 } | |
247 | |
137 function testSuccessful() { | 248 function testSuccessful() { |
phoglund_chromium
2013/01/09 12:40:36
Why is testSuccessful an exit condition?...
perkj_chrome
2013/01/09 13:56:21
Renamed to exitConditionMet. This is called when a
| |
138 document.title = 'OK'; | 249 ++gNumberOfExitConditionsMet; |
250 if (gNumberOfExitConditionsMet == gNumberOfExitConditions) { | |
251 document.title = 'OK'; | |
252 } | |
139 } | 253 } |
140 </script> | 254 </script> |
141 </head> | 255 </head> |
142 <body> | 256 <body> |
143 <table border="0"> | 257 <table border="0"> |
144 <tr> | 258 <tr> |
145 <td>Local Preview</td> | 259 <td>Local Preview</td> |
146 <td>Remote Stream</td> | 260 <td>Remote Stream</td> |
147 <td>Capturing Canvas</td> | 261 <td>Capturing Canvas</td> |
148 </tr> | 262 </tr> |
149 <tr> | 263 <tr> |
150 <td><video width="320" height="240" id="local-view" | 264 <td><video width="320" height="240" id="local-view" |
151 autoplay="autoplay"></video></td> | 265 autoplay="autoplay"></video></td> |
152 <td><video width="320" height="240" id="remote-view" | 266 <td><video width="320" height="240" id="remote-view" |
153 autoplay="autoplay"></video></td> | 267 autoplay="autoplay"></video></td> |
154 <td><canvas width="320" height="240" id="canvas"></canvas></td> | 268 <td><canvas width="320" height="240" id="canvas"></canvas></td> |
155 </tr> | 269 </tr> |
156 <tr> | 270 <tr> |
157 <td colspan="3">You should see the same animated feed in all three | 271 <td colspan="3">You should see the same animated feed in all three |
158 displays (the canvas will lag a bit). | 272 displays (the canvas will lag a bit). |
159 </td> | 273 </td> |
160 </table> | 274 </table> |
161 </body> | 275 </body> |
162 </html> | 276 </html> |
OLD | NEW |