apprtc: add ctrl+i Info window showing gathered ICE candidate types

R=vikasmarwaha@webrtc.org

Review URL: https://webrtc-codereview.appspot.com/2109004

git-svn-id: http://webrtc.googlecode.com/svn/trunk@4617 4adac7df-926f-26a2-2b94-8c16560cd09d

samples/js/apprtc/css/main.css

@@ -86,3 +86,11 @@
  border-color: #FFFFFF;
  margin: 2px;
 }
+
+#infoDiv {
+  position: absolute;
+  float: right;
+  background-color: grey;
+  margin: 2px;
+  display: none;
+}

samples/js/apprtc/index.html

@@ -47,4 +47,5 @@
 </body>
 <footer id="footer">
 </footer>
+<div id="infoDiv"></div>
 </html>

samples/js/apprtc/js/main.js

@@ -18,6 +18,8 @@
                           'OfferToReceiveVideo': true }};
   var isVideoMuted = false;
   var isAudioMuted = false;
+  // Types of gathered ICE Candidates.
+  var gatheredIceCandidateTypes = { Local: {}, Remote: {} };
 
   function initialize() {
     console.log('Initializing; room=' + roomKey + '.');
@@ -230,6 +232,7 @@
     } else if (message.type === 'candidate') {
       var candidate = new RTCIceCandidate({sdpMLineIndex: message.label,
                                            candidate: message.candidate});
+      noteIceCandidate("Remote", iceCandidateType(message.candidate));
       pc.addIceCandidate(candidate);
     } else if (message.type === 'bye') {
       onRemoteHangup();
@@ -286,12 +289,23 @@
           error.code + '.');
   }
 
+  function iceCandidateType(candidateSDP) {
+    if (candidateSDP.indexOf("typ relay ") >= 0)
+      return "TURN";
+    if (candidateSDP.indexOf("typ srflx ") >= 0)
+      return "STUN";
+    if (candidateSDP.indexOf("typ host ") >= 0)
+      return "HOST";
+    return "UNKNOWN";
+  }
+
   function onIceCandidate(event) {
     if (event.candidate) {
       sendMessage({type: 'candidate',
                    label: event.candidate.sdpMLineIndex,
                    id: event.candidate.sdpMid,
                    candidate: event.candidate.candidate});
+      noteIceCandidate("Local", iceCandidateType(event.candidate.candidate));
     } else {
       console.log('End of candidates.');
     }
@@ -379,6 +393,37 @@
     container.webkitRequestFullScreen();
   }
 
+  function noteIceCandidate(location, type) {
+    if (gatheredIceCandidateTypes[location][type])
+      return;
+    gatheredIceCandidateTypes[location][type] = 1;
+    updateInfoDiv();
+  }
+
+  function getInfoDiv() {
+    return document.getElementById("infoDiv");
+  }
+
+  function updateInfoDiv() {
+    var contents = "<pre>Gathered ICE Candidates\n";
+    for (var endpoint in gatheredIceCandidateTypes) {
+      contents += endpoint + ":\n";
+      for (var type in gatheredIceCandidateTypes[endpoint])
+        contents += "  " + type + "\n";
+    }
+    var div = getInfoDiv();
+    div.innerHTML = contents + "</pre>";
+  }
+
+  function toggleInfoDivDisplay() {
+    var div = getInfoDiv();
+    if (div.style.display == "block") {
+      div.style.display = "none";
+    } else {
+      div.style.display = "block";
+    }
+  }
+
   function toggleVideoMute() {
     // Call the getVideoTracks method via adapter.js.
     videoTracks = localStream.getVideoTracks();
@@ -427,28 +472,30 @@
     isAudioMuted = !isAudioMuted;
   }
 
-  // Ctrl-D: toggle audio mute; Ctrl-E: toggle video mute.
-  // On Mac, Command key is instead of Ctrl.
+  // Mac: hotkey is Command.
+  // Non-Mac: hotkey is Control.
+  // <hotkey>-D: toggle audio mute.
+  // <hotkey>-E: toggle video mute.
+  // <hotkey>-I: toggle Info box.
   // Return false to screen out original Chrome shortcuts.
   document.onkeydown = function(event) {
-    if (navigator.appVersion.indexOf('Mac') != -1) {
-      if (event.metaKey && event.keyCode === 68) {
+    var hotkey = event.ctrlKey;
+    if (navigator.appVersion.indexOf('Mac') != -1)
+      hotkey = event.metaKey;
+    if (!hotkey)
+      return;
+    switch (event.keyCode) {
+      case 68:
         toggleAudioMute();
         return false;
-      }
-      if (event.metaKey && event.keyCode === 69) {
+      case 69:
         toggleVideoMute();
         return false;
-      }
-    } else {
-      if (event.ctrlKey && event.keyCode === 68) {
-        toggleAudioMute();
+      case 73:
+        toggleInfoDivDisplay();
         return false;
-      }
-      if (event.ctrlKey && event.keyCode === 69) {
-        toggleVideoMute();
-        return false;
-      }
+      default:
+        return;
     }
   }