Chromium Code Reviews Chromium Code Reviews
Issue 11428136:
Added a basic WebRTC peerconnection browser test with video verification. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| Index: content/test/data/media/peerconnection-call.html |
| diff --git a/content/test/data/media/peerconnection-call.html b/content/test/data/media/peerconnection-call.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..ea39372fd19b176985c09e5f69820d7b0785a02f |
| --- /dev/null |
| +++ b/content/test/data/media/peerconnection-call.html |
| @@ -0,0 +1,136 @@ |
| +<html> |
| +<head> |
| + <script type="text/javascript"> |
| + $ = function(id) { |
| + return document.getElementById(id); |
| + }; |
| + |
| + var gFirstConnection = null; |
| + var gSecondConnection = null; |
| + |
| + function call(constraints) { |
|
perkj_chrome
2012/12/04 10:51:43
Can we instead use the example in http://dev.w3.or
phoglund_chromium
2012/12/04 13:03:27
In that case we would need to run two tabs and imp
|
| + navigator.webkitGetUserMedia(constraints, okCallback, failedCallback); |
| + } |
| + |
| + function failedCallback(error) { |
| + document.title = 'getUserMedia request failed with code ' + error.code; |
| + } |
| + |
| + function okCallback(localStream) { |
| + var localStreamUrl = webkitURL.createObjectURL(localStream); |
| + $('local-view').src = localStreamUrl; |
| + |
| + callUsingStream(localStream); |
| + } |
| + |
| + function callUsingStream(localStream) { |
| + gFirstConnection = new webkitRTCPeerConnection(null, null); |
| + gFirstConnection.onicecandidate = onIceCandidateToFirst; |
| + gFirstConnection.addStream(localStream); |
| + gFirstConnection.createOffer(onOfferCreated); |
| + } |
| + |
| + function onOfferCreated(offer) { |
| + gFirstConnection.setLocalDescription(offer); |
| + |
| + receiveCall(offer.sdp); |
| + } |
| + |
| + function receiveCall(offerSdp) { |
| + gSecondConnection = new webkitRTCPeerConnection(null, null); |
| + gSecondConnection.onicecandidate = onIceCandidateToSecond; |
| + gSecondConnection.onaddstream = onRemoteStream; |
| + |
| + var parsedOffer = new RTCSessionDescription({ type: 'offer', |
| + sdp: offerSdp }); |
| + gSecondConnection.setRemoteDescription(parsedOffer); |
| + |
| + gSecondConnection.createAnswer(onAnswerCreated); |
| + } |
| + |
| + function onAnswerCreated(answer) { |
| + gSecondConnection.setLocalDescription(answer); |
| + handleAnswer(answer.sdp); |
| + } |
| + |
| + function handleAnswer(answerSdp) { |
| + var parsedAnswer = new RTCSessionDescription({ type: 'answer', |
| + sdp: answerSdp }); |
| + gFirstConnection.setRemoteDescription(parsedAnswer); |
| + } |
| + |
| + function onIceCandidateToFirst(event) { |
| + if (event.candidate) { |
| + var candidate = new RTCIceCandidate(event.candidate); |
| + gSecondConnection.addIceCandidate(candidate); |
| + } |
| + } |
| + |
| + function onIceCandidateToSecond(event) { |
| + if (event.candidate) { |
| + var candidate = new RTCIceCandidate(event.candidate); |
| + gFirstConnection.addIceCandidate(candidate); |
| + } |
| + } |
| + |
| + function onRemoteStream(e) { |
| + var remoteStreamUrl = webkitURL.createObjectURL(e.stream); |
| + var remoteVideo = $('remote-view'); |
| + remoteVideo.src = remoteStreamUrl; |
| + |
| + waitForVideo(remoteVideo, 320, 240); |
| + } |
| + |
| + function waitForVideo(videoElement, width, height) { |
| + document.title = 'Waiting for video...'; |
| + var canvas = $('canvas'); |
| + setInterval(function() { |
| + var context = canvas.getContext('2d'); |
| + context.drawImage(videoElement, 0, 0, 320, 240); |
| + var pixels = context.getImageData(0, 0, 320, 240).data; |
| + |
| + if (isVideoPlaying(pixels, width, height)) |
| + testSuccessful(); |
| + }, 100); |
| + } |
| + |
| + // This very basic video verification algorithm will be satisfied if any |
| + // pixels are nonzero in a small sample area in the middle. It relies on the |
| + // assumption that a video element with null source just presents zeroes. |
| + function isVideoPlaying(pixels, width, height) { |
|
perkj_chrome
2012/12/04 10:51:43
Why not use your existing video checker?
phoglund_chromium
2012/12/04 13:03:27
Good point. I thought about it, but then I would h
|
| + // Sample somewhere near the middle of the image. |
| + var middle = width * height / 2; |
| + for (var i = 0; i < 20; i++) { |
| + if (pixels[middle + i] > 0) { |
| + return true; |
| + } |
| + } |
| + return false; |
| + } |
| + |
| + function testSuccessful() { |
| + document.title = 'OK'; |
| + } |
| + </script> |
| +</head> |
| +<body> |
| + <table border="0"> |
| + <tr> |
| + <td>Local Preview</td> |
| + <td>Remote Stream</td> |
| + <td>Capturing Canvas</td> |
| + </tr> |
| + <tr> |
| + <td><video width="320" height="240" id="local-view" |
| + autoplay="autoplay"></video></td> |
| + <td><video width="320" height="240" id="remote-view" |
| + autoplay="autoplay"></video></td> |
| + <td><canvas width="320" height="240" id="canvas"></canvas></td> |
| + </tr> |
| + <tr> |
| + <td colspan="3">You should see the same animated feed in all three |
| + displays (the canvas will lag a bit). |
| + </td> |
| + </table> |
| +</body> |
| +</html> |
