--- a/static/css/main.css	Mon Mar 11 23:44:44 2013 +0900
+++ b/static/css/main.css	Tue Mar 12 02:23:34 2013 +0900
@@ -12,3 +12,12 @@
     margin-top: 240px;
     margin-left: -160px;
 }
+
+footer {
+    background: #222;
+    color: #ccc;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}

--- a/static/js/main.js	Mon Mar 11 23:44:44 2013 +0900
+++ b/static/js/main.js	Tue Mar 12 02:23:34 2013 +0900
@@ -3,30 +3,31 @@
 
 
 function call() {
-    document.getElementById('btn-call').className += ' btn-active';
+    $('#btn-call').addClass('btn-active');
     init(true);
 }
 
 
 function receive() {
-    document.getElementById('btn-receive').className += ' btn-active';
+    $('#btn-receive').addClass('btn-active');
     init(false);
 }
 
 
 function init(initiator) {
     var constraints = {
-        audio: document.getElementById('audio').checked,
-        video: document.getElementById('video').checked
+        audio: $('#audio').prop('checked'),
+        video: $('#video').prop('checked')
     };
     
     getUserMedia(constraints, function(stream) {
         pc = new RTCPeerConnection(null);
         
         pc.addStream(stream);
-        attachMediaStream(document.getElementById('local'), stream);
+        $('#local').prop('src', URL.createObjectURL(stream));
         pc.onaddstream = function(event) {
-            attachMediaStream(document.getElementById('remote'), event.stream);
+            $('#remote').prop('src', URL.createObjectURL(event.stream));
+            logStreaming(true);
         };
         pc.onicecandidate = function(event) {
             if (event.candidate) {
@@ -48,17 +49,20 @@
         
         if (initiator) {
             createOffer();
+        } else {
+            log('waiting for offer...');
         }
+        logStreaming(false);
     }, fail);
 }
 
 
 function createOffer() {
-    console.log('creating offer');
+    log('creating offer...');
     pc.createOffer(function(offer) {
-        console.log('created offer');
+        log('created offer...');
         pc.setLocalDescription(offer, function() {
-            console.log('setLocalDescription done, sending to remote');
+            log('sending to remote...');
             ws.send(JSON.stringify(offer));
         }, fail);
     }, fail);
@@ -66,13 +70,13 @@
 
 
 function receiveOffer(offer) {
-    console.log('received offer');
+    log('received offer...');
     pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
-        console.log('creating answer');
+        log('creating answer...');
         pc.createAnswer(function(answer) {
-            console.log('created answer');
+            log('created answer...');
             pc.setLocalDescription(answer, function() {
-                console.log('setLocalDescription done, sending to remote');
+                log('sent answer');
                 ws.send(JSON.stringify(answer));
             }, fail);
         }, fail);
@@ -81,11 +85,23 @@
 
 
 function receiveAnswer(answer) {
-    console.log('received answer');
+    log('received answer');
     pc.setRemoteDescription(new RTCSessionDescription(answer));
 }
 
 
-function fail(error) {
-    console.log(error);
+function log() {
+    $('#status').text(Array.prototype.join.call(arguments, ' '));
+    console.log.apply(console, arguments);
 }
+
+
+function logStreaming(streaming) {
+    $('#streaming').text(streaming ? '[streaming]' : '[..]');
+}
+
+
+function fail() {
+    $('#status').text(Array.prototype.join.call(arguments, ' '));
+    console.error.apply(console, arguments);
+}

--- a/templates/index.html	Mon Mar 11 23:44:44 2013 +0900
+++ b/templates/index.html	Tue Mar 12 02:23:34 2013 +0900
@@ -5,6 +5,7 @@
     <title>Tornado WebRTC</title>
     <link rel="stylesheet" type="text/css" href="{{ static_url('css/kube.min.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ static_url('css/main.css') }}">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="{{ static_url('js/webrtc-adapter.js') }}"></script>
     <script src="{{ static_url('js/main.js') }}"></script>
   </head>
@@ -23,5 +24,9 @@
         </li>
       </ul>
     </section>
+    <footer>
+      <span id="streaming" class="small"></span>
+      <span id="status" class="small"></span>
+    </footer>
   </body>
 </html>