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

@@ -1,40 +1,40 @@
-  a:link { color: #ffffff; }
-  a:visited {color: #ffffff; }
-  html, body {
+a:link { color: #ffffff; }
+a:visited {color: #ffffff; }
+html, body {
   background-color: #000000;
   height: 100%;
   font-family: Verdana, Arial, Helvetica, sans-serif;
-  }
-  body {
+}
+body {
   margin: 0;
   padding: 0;
-  }
-  #container {
+}
+#container {
   background-color: #000000;
   position: absolute;
   height: 100%;
   width: 100%;
   margin: 0px auto;
   -webkit-perspective: 1000;
-  }
-  #card {
+}
+#card {
   -webkit-transition-duration: 2s;
   -webkit-transform-style: preserve-3d;
-  }
-  #local {
+}
+#local {
   position: absolute;
   width: 100%;
   transform: scale(-1, 1);
   -webkit-transform: scale(-1, 1);
   -webkit-backface-visibility: hidden;
-  }
-  #remote {
+}
+#remote {
   position: absolute;
   width: 100%;
   -webkit-transform: rotateY(180deg);
   -webkit-backface-visibility: hidden;
-  }
-  #mini {
+}
+#mini {
   position: absolute;
   height: 30%;
   width: 30%;
@@ -43,29 +43,29 @@
   opacity: 1.0;
   transform: scale(-1, 1);
   -webkit-transform: scale(-1, 1);
-  }
-  #localVideo {
+}
+#localVideo {
   width: 100%;
   height: 100%;
   opacity: 0;
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 2s;
-  }
-  #remoteVideo {
+}
+#remoteVideo {
   width: 100%;
   height: 100%;
   opacity: 0;
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 2s;
-  }
-  #miniVideo {
+}
+#miniVideo {
   width: 100%;
   height: 100%;
   opacity: 0;
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 2s;
-  }
-  #footer {
+}
+#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -75,8 +75,8 @@
   font-size: 13px; font-weight: bold;
   line-height: 28px;
   text-align: center;
-  }
-  #hangup {
+}
+#hangup {
  font-size: 13px; font-weight: bold;
  color: #FFFFFF;
  width: 128px;
@@ -85,4 +85,12 @@
  border-style: solid;
  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;
     }
   }