Add ability to limit outgoing throughput.

This will hopefully become unnecessary once we have better congestion
control.

static/sfu.css

@@ -84,6 +84,12 @@ h1 {
     margin-right: 0.4em;
 }
 
+#sendselect {
+    width: 8em;
+    text-align-last: center;
+    margin-right: 0.4em;
+}
+
 #requestselect {
     width: 8em;
     text-align-last: center;

static/sfu.html

@@ -50,6 +50,14 @@
         <button id="sharebutton" class="invisible">Share screen</button>
         <button id="unsharebutton" class="invisible">Stop sharing</button>
 
+        <label for="sendselect">Send:</label>
+        <select id="sendselect">
+          <option value="lowest">lowest</option>
+          <option value="low">low</option>
+          <option value="normal" selected>normal</option>
+          <option value="unlimited">unlimited</option>
+        </select>
+
         <label for="requestselect">Receive:</label>
         <select id="requestselect">
           <option value="audio">audio only</option>

static/sfu.js

@@ -186,6 +186,33 @@ document.getElementById('unsharebutton').onclick = function(e) {
     delUpMediaKind('screenshare');
 }
 
+/** @returns {number} */
+function getMaxVideoThroughput() {
+    let v = document.getElementById('sendselect').value;
+    switch(v) {
+    case 'lowest':
+        return 150000;
+    case 'low':
+        return 300000;
+    case 'normal':
+        return 700000;
+    case 'unlimited':
+        return null;
+    default:
+        console.error('Unknown video quality', v);
+        return 700000;
+    }
+}
+
+document.getElementById('sendselect').onchange = async function(e) {
+    let t = getMaxVideoThroughput();
+    for(let id in serverConnection.up) {
+        let c = serverConnection.up[id];
+        if(c.kind === 'local')
+            await setMaxVideoThroughput(c, t);
+    }
+}
+
 document.getElementById('requestselect').onchange = function(e) {
     e.preventDefault();
     serverConnection.request(this.value);
@@ -291,9 +318,39 @@ function newUpStream(id) {
     c.onabort = function() {
         delUpMedia(c);
     }
+    c.onnegotiationcompleted = function() {
+        setMaxVideoThroughput(c, getMaxVideoThroughput())
+    }
     return c;
 }
 
+/**
+ * @param {Stream} c
+ * @param {number} [bps]
+ */
+async function setMaxVideoThroughput(c, bps) {
+    let senders = c.pc.getSenders();
+    for(let i = 0; i < senders.length; i++) {
+        let s = senders[i];
+        if(!s.track || s.track.kind !== 'video')
+            continue;
+        let p = s.getParameters();
+        if(!p.encodings)
+            continue;
+        p.encodings.forEach(e => {
+            if(bps > 0)
+                e.maxBitrate = bps;
+            else
+                delete e.maxBitrate;
+        });
+        try {
+            await s.setParameters(p);
+        } catch(e) {
+            console.error(e);
+        }
+    }
+}
+
 /**
  * @param {string} [id]
  */
@@ -338,6 +395,7 @@ async function addLocalMedia(id) {
             t.enabled = false;
         let sender = c.pc.addTrack(t, stream);
     });
+
     c.onstats = displayStats;
     c.setStatsInterval(2000);
     await setMedia(c, true);