From 5a035b4279e17261e3bbaffd8715d19752a5bc05 Mon Sep 17 00:00:00 2001
From: "fischman@webrtc.org"
 <fischman@webrtc.org@4adac7df-926f-26a2-2b94-8c16560cd09d>
Date: Mon, 26 Aug 2013 17:44:38 +0000
Subject: [PATCH] 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 | 184 +++++++++++++++++----------------
 samples/js/apprtc/index.html   | 101 +++++++++---------
 samples/js/apprtc/js/main.js   |  77 +++++++++++---
 3 files changed, 209 insertions(+), 153 deletions(-)

diff --git a/samples/js/apprtc/css/main.css b/samples/js/apprtc/css/main.css
index 4b5206bfd9..0d91232e26 100644
--- a/samples/js/apprtc/css/main.css
+++ b/samples/js/apprtc/css/main.css
@@ -1,88 +1,96 @@
-  a:link { color: #ffffff; }
-  a:visited {color: #ffffff; }
-  html, body {
-    background-color: #000000;
-    height: 100%;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  #container {
-    background-color: #000000;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    margin: 0px auto;
-    -webkit-perspective: 1000;
-  }
-  #card {
-    -webkit-transition-duration: 2s;
-    -webkit-transform-style: preserve-3d;
-  }
-  #local {
-    position: absolute;
-    width: 100%;
-    transform: scale(-1, 1);
-    -webkit-transform: scale(-1, 1);
-    -webkit-backface-visibility: hidden;
-  }
-  #remote {
-    position: absolute;
-    width: 100%;
-    -webkit-transform: rotateY(180deg);
-    -webkit-backface-visibility: hidden;
-  }
-  #mini {
-    position: absolute;
-    height: 30%;
-    width: 30%;
-    bottom: 32px;
-    right: 4px;
-    opacity: 1.0;
-    transform: scale(-1, 1);
-    -webkit-transform: scale(-1, 1);
-  }
-  #localVideo {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    -webkit-transition-property: opacity;
-    -webkit-transition-duration: 2s;
-  }
-  #remoteVideo {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    -webkit-transition-property: opacity;
-    -webkit-transition-duration: 2s;
-  }
-  #miniVideo {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    -webkit-transition-property: opacity;
-    -webkit-transition-duration: 2s;
-  }
-  #footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 28px;
-    background-color: #3F3F3F;
-    color: rgb(255, 255, 255);
-    font-size: 13px; font-weight: bold;
-    line-height: 28px;
-    text-align: center;
-  }
-  #hangup {
-   font-size: 13px; font-weight: bold;
-   color: #FFFFFF;
-   width: 128px;
-   height: 24px;
-   background-color: #808080;
-   border-style: solid;
-   border-color: #FFFFFF;
-   margin: 2px;
-  }
+a:link { color: #ffffff; }
+a:visited {color: #ffffff; }
+html, body {
+  background-color: #000000;
+  height: 100%;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+#container {
+  background-color: #000000;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  margin: 0px auto;
+  -webkit-perspective: 1000;
+}
+#card {
+  -webkit-transition-duration: 2s;
+  -webkit-transform-style: preserve-3d;
+}
+#local {
+  position: absolute;
+  width: 100%;
+  transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1);
+  -webkit-backface-visibility: hidden;
+}
+#remote {
+  position: absolute;
+  width: 100%;
+  -webkit-transform: rotateY(180deg);
+  -webkit-backface-visibility: hidden;
+}
+#mini {
+  position: absolute;
+  height: 30%;
+  width: 30%;
+  bottom: 32px;
+  right: 4px;
+  opacity: 1.0;
+  transform: scale(-1, 1);
+  -webkit-transform: scale(-1, 1);
+}
+#localVideo {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  -webkit-transition-duration: 2s;
+}
+#remoteVideo {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  -webkit-transition-duration: 2s;
+}
+#miniVideo {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  -webkit-transition-duration: 2s;
+}
+#footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 28px;
+  background-color: #3F3F3F;
+  color: rgb(255, 255, 255);
+  font-size: 13px; font-weight: bold;
+  line-height: 28px;
+  text-align: center;
+}
+#hangup {
+ font-size: 13px; font-weight: bold;
+ color: #FFFFFF;
+ width: 128px;
+ height: 24px;
+ background-color: #808080;
+ border-style: solid;
+ border-color: #FFFFFF;
+ margin: 2px;
+}
+
+#infoDiv {
+  position: absolute;
+  float: right;
+  background-color: grey;
+  margin: 2px;
+  display: none;
+}
diff --git a/samples/js/apprtc/index.html b/samples/js/apprtc/index.html
index 470395e12f..7a2b861800 100644
--- a/samples/js/apprtc/index.html
+++ b/samples/js/apprtc/index.html
@@ -1,50 +1,51 @@
-<!DOCTYPE html>
-<html>
-<head>
-<title>WebRTC Reference App</title>
-
-<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
-
-<link rel="canonical" href="{{ room_link }}"/>
-<link rel="stylesheet" href="css/main.css" />
-
-<script type="text/javascript" src="/_ah/channel/jsapi"></script>
-<script src="/js/main.js"></script>
-<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
-<script src="/js/adapter.js"></script>
-
-</head>
-<body>
-<script type="text/javascript">
-  var channelToken = '{{ token }}';
-  var me = '{{ me }}';
-  var roomKey = '{{ room_key }}';
-  var roomLink = '{{ room_link }}';
-  var initiator = {{ initiator }};
-  var pcConfig = {{ pc_config|safe }};
-  var pcConstraints = {{ pc_constraints|safe }};
-  var offerConstraints = {{ offer_constraints | safe }};
-  var mediaConstraints = {{ media_constraints | safe }};
-  var turnUrl = '{{ turn_url }}';
-  var stereo = {{ stereo }};
-
-  setTimeout(initialize, 1);
-</script>
-<div id="container" ondblclick="enterFullScreen()"> 
-  <div id="card">
-    <div id="local">
-      <video id="localVideo" autoplay="autoplay" muted="true"/>
-    </div>
-    <div id="remote">
-      <video id="remoteVideo" autoplay="autoplay">
-      </video>
-      <div id="mini">
-        <video id="miniVideo" autoplay="autoplay" muted="true"/>
-      </div>
-    </div>
-  </div>
-</div>
-</body>
-<footer id="footer">
-</footer>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+<title>WebRTC Reference App</title>
+
+<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
+
+<link rel="canonical" href="{{ room_link }}"/>
+<link rel="stylesheet" href="css/main.css" />
+
+<script type="text/javascript" src="/_ah/channel/jsapi"></script>
+<script src="/js/main.js"></script>
+<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
+<script src="/js/adapter.js"></script>
+
+</head>
+<body>
+<script type="text/javascript">
+  var channelToken = '{{ token }}';
+  var me = '{{ me }}';
+  var roomKey = '{{ room_key }}';
+  var roomLink = '{{ room_link }}';
+  var initiator = {{ initiator }};
+  var pcConfig = {{ pc_config|safe }};
+  var pcConstraints = {{ pc_constraints|safe }};
+  var offerConstraints = {{ offer_constraints | safe }};
+  var mediaConstraints = {{ media_constraints | safe }};
+  var turnUrl = '{{ turn_url }}';
+  var stereo = {{ stereo }};
+
+  setTimeout(initialize, 1);
+</script>
+<div id="container" ondblclick="enterFullScreen()">
+  <div id="card">
+    <div id="local">
+      <video id="localVideo" autoplay="autoplay" muted="true"/>
+    </div>
+    <div id="remote">
+      <video id="remoteVideo" autoplay="autoplay">
+      </video>
+      <div id="mini">
+        <video id="miniVideo" autoplay="autoplay" muted="true"/>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+<footer id="footer">
+</footer>
+<div id="infoDiv"></div>
+</html>
diff --git a/samples/js/apprtc/js/main.js b/samples/js/apprtc/js/main.js
index 44bad1bc88..33ad5f9c37 100644
--- a/samples/js/apprtc/js/main.js
+++ b/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;
     }
   }