add button to start a call with camera disabled

static/sfu.css

@@ -73,6 +73,31 @@
     font-weight: 700;
 }
 
+.btn-group {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+}
+
+.btn-group>.btn:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.btn-group>.btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.btn-group>.btn:first-child {
+    margin-left: 0;
+}
+
+.btn-group>.btn {
+    flex: 0 1 auto;
+    padding: 0.255rem .55rem;
+}
+
 .btn {
     display: inline-block;
     font-weight: 400;
@@ -163,6 +188,10 @@
     font-size: 110%;
 }
 
+.nav-text {
+  margin-left: 5px;
+}
+
 .app {
     background-color: #f4f4f4;
     overflow: hidden;
@@ -587,13 +616,25 @@ h1 {
     margin-bottom: 4px;
 }
 
-#presentbutton, #unpresentbutton {
+#presentbutton, #unpresentbutton, #presentbuttonaudio {
     white-space: nowrap;
-    margin-right: .4em;
     margin-top: .1em;
     font-size: 1.1em;
 }
 
+#presentbuttonaudio {
+    border-right-color: #2f8f45;
+}
+
+#presentbuttonaudio .fas {
+  color: #2e7d37;
+  transition: color .15s ease-in-out;
+}
+
+#presentbuttonaudio:hover .fas {
+  color: #27692f;
+}
+
 #videoselect {
     text-align-last: center;
     margin-right: 0.4em;

static/sfu.html

@@ -38,9 +38,14 @@
 
               <ul class="nav-menu">
                 <li>
-                  <button id="presentbutton" class="invisible btn btn-success">
-                    <i class="fas fa-video" aria-hidden="true"></i><span class="nav-text"> Join</span>
-                  </button>
+                  <div class="btn-group invisible" id="presentgroup">
+                    <button id="presentbuttonaudio" class="btn btn-success">
+                      <i class="fas fa-video-slash" aria-hidden="true"></i>
+                    </button>
+                    <button id="presentbutton" class="btn btn-success">
+                      <i class="fas fa-video" aria-hidden="true"></i><span class="nav-text"> Join</span>
+                    </button>
+                  </div>
                 </li>
                 <li>
                   <button id="unpresentbutton" class="invisible btn btn-cancel">

static/sfu.js

@@ -366,6 +366,23 @@ getButtonElement('presentbutton').onclick = async function(e) {
     }
 };
 
+getButtonElement('presentbuttonaudio').onclick = async function(e) {
+    e.preventDefault();
+    let button = this;
+    if(!(button instanceof HTMLButtonElement))
+        throw new Error('Unexpected type for this.');
+    // there's a potential race condition here: the user might click the
+    // button a second time before the stream is set up and the button hidden.
+    button.disabled = true;
+    try {
+        let id = findUpMedia('local');
+        if(!id)
+            await addLocalMedia(null, true);
+    } finally {
+        button.disabled = false;
+    }
+};
+
 getButtonElement('unpresentbutton').onclick = function(e) {
     e.preventDefault();
     delUpMediaKind('local');
@@ -397,7 +414,7 @@ function setButtonsVisibility() {
     let share = !!findUpMedia('screenshare');
 
     // don't allow multiple presentations
-    setVisibility('presentbutton', permissions.present && !local);
+    setVisibility('presentgroup', permissions.present && !local);
     setVisibility('unpresentbutton', local);
 
     // allow multiple shared documents
@@ -1036,9 +1053,8 @@ function setMedia(c, isUp) {
         let camera = controls.querySelector("span.camera");
         if (local_media)
             if (local_media.kind === "local") {
-                if (!settings.video) {
-                    if (camera)
-                        changeVideoIconState(camera.querySelector("i"));
+                if (camera && !local_media.stream.getVideoTracks().length) {
+                    changeVideoIconState(camera.querySelector("i"));
                 }
                 volume.parentElement.remove();
             } else {