--- a/static/js/main.js	Mon Mar 11 23:21:26 2013 +0900
+++ b/static/js/main.js	Mon Mar 11 23:44:44 2013 +0900
@@ -3,16 +3,23 @@
 
 
 function call() {
-    init({audio: true, video: true}, true);
+    document.getElementById('btn-call').className += ' btn-active';
+    init(true);
 }
 
 
 function receive() {
-    init({audio: true, video: true}, false);
+    document.getElementById('btn-receive').className += ' btn-active';
+    init(false);
 }
 
 
-function init(constraints, initiator) {
+function init(initiator) {
+    var constraints = {
+        audio: document.getElementById('audio').checked,
+        video: document.getElementById('video').checked
+    };
+    
     getUserMedia(constraints, function(stream) {
         pc = new RTCPeerConnection(null);
         

--- a/templates/index.html	Mon Mar 11 23:21:26 2013 +0900
+++ b/templates/index.html	Mon Mar 11 23:44:44 2013 +0900
@@ -13,9 +13,15 @@
       <video id="remote" autoplay></video>
       <video id="local" autoplay muted></video>
     </section>
-    <section>
-      <button class="btn" onclick="call()">I want to call</button>
-      <button class="btn" onclick="receive()">I want to receive a call</button>
+    <section class="forms">
+      <ul>
+        <li><label class="small"><input id="audio" type="checkbox" checked>Use mic</label></li>
+        <li><label class="small"><input id="video" type="checkbox" checked>Use webcam</label></li>
+        <li class="btn-group">
+          <button id="btn-call" class="btn" onclick="call()">I want to call</button>
+          <button id="btn-receive" class="btn" onclick="receive()">I want to receive a call</button>
+        </li>
+      </ul>
     </section>
   </body>
 </html>