Show stats from both sides

This change shows the stats generated both at the sending PeerConnection
and at the receiving PeerConnection.

BUG=

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

git-svn-id: http://webrtc.googlecode.com/svn/trunk@3774 4adac7df-926f-26a2-2b94-8c16560cd09d
diff --git a/samples/js/demos/html/constraints-and-stats.html b/samples/js/demos/html/constraints-and-stats.html
index 2f1beba..7f7fc5d 100644
--- a/samples/js/demos/html/constraints-and-stats.html
+++ b/samples/js/demos/html/constraints-and-stats.html
@@ -4,6 +4,10 @@
 <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
 <script src="../../base/adapter.js"></script>
 
+<style type="text/css">
+td { vertical-align: top; }
+</style>
+
 <script>
 var mystream;
 var pc1;
@@ -156,9 +160,23 @@
             }
           }
         }
-        $('stats').innerHTML = statsString;
+        $('receiverstats').innerHTML = statsString;
         display(bitrateText);
       });
+      pc1.getStats(function(stats) {
+        var statsString = '';
+        var results = stats.result();
+        for (var i = 0; i < results.length; ++i) {
+          var res = results[i];
+          statsString += '<h3>Report ';
+          statsString += i;
+          statsString += '</h3>';
+          if (!res.local || res.local === res) {
+            statsString += dumpStats(res);
+          }
+        }
+        $('senderstats').innerHTML = statsString;
+      });
     } else {
       display('No stats function. Use at least Chrome 24.0.1285');
     }
@@ -184,7 +202,7 @@
   var statsString = 'Timestamp:';
   statsString += obj.timestamp;
   if (obj.id) {
-     statsString += " id ";
+     statsString += "<br>id ";
      statsString += obj.id;
   }
   if (obj.type) {
@@ -284,6 +302,12 @@
 <td><pre><span id="addStreamConstraints"></span></pre>
 </table>
 <h2>Statistics report display</h2>
-<div id="stats">Stats will appear here.</div>
+<table>
+<tr>
+<th>Sender side<th>Receiver side
+<tr>
+<td align="top"><div id="senderstats">Stats will appear here.</div>
+<td align="top"><div id="receiverstats">Stats will appear here.</div>
+</table>
 </body>
 </html>