Add visual feedback for connection status.

static/sfu.css

@@ -196,6 +196,10 @@ h1 {
     width: 100%;
 }
 
+.media-failed {
+    opacity: 0.7;
+}
+
 .label {
     text-align: center;
     height: 2em;

static/sfu.js

@@ -530,6 +530,7 @@ function setMedia(id) {
 
     media.srcObject = c.stream;
     setLabel(id);
+    setMediaStatus(id, false);
 
     resizePeers();
 }
@@ -545,6 +546,19 @@ function delMedia(id) {
     resizePeers();
 }
 
+function setMediaStatus(id, good) {
+    let media = document.getElementById('media-' + id);
+    if(!media) {
+        console.warn('Setting status of unknown media.');
+        return;
+    }
+    if(good)
+        media.classList.remove('media-failed');
+    else
+        media.classList.add('media-failed');
+}
+
+
 function setLabel(id, fallback) {
     let label = document.getElementById('label-' + id);
     if(!label)
@@ -725,6 +739,12 @@ async function gotOffer(id, labels, offer) {
                  });
         };
 
+        pc.oniceconnectionstatechange = e => {
+            setMediaStatus(id,
+                           pc.iceConnectionState === 'connected' ||
+                           pc.iceConnectionState === 'completed');
+        }
+
         c.pc.ontrack = function(e) {
             let label = e.transceiver && c.labelsByMid[e.transceiver.mid];
             if(label) {
@@ -1178,6 +1198,9 @@ async function newUpStream(id) {
     };
 
     pc.oniceconnectionstatechange = e => {
+        setMediaStatus(id,
+                       pc.iceConnectionState === 'connected' ||
+                       pc.iceConnectionState === 'completed');
         if(pc.iceConnectionState === 'failed') {
             try {
                 pc.restartIce();