A background graphic for videos to detect broken connections

src/App.vue

@@ -1023,6 +1023,13 @@ export default {
                 return;
             }
 
+            // DEBUGGING: fake open a broken video to see the error graphic
+            if (this.message.toLowerCase().indexOf("/debug-broken-video") === 0) {
+                this.WebRTC.streams["#broken"] = null;
+                this.message = "";
+                return;
+            }
+
             // DEBUGGING: print WebRTC statistics
             if (this.message.toLowerCase().indexOf("/debug-webrtc") === 0) {
                 let lines = [

src/components/VideoFeed.vue

@@ -156,4 +156,11 @@ export default {
     top: 30px;
     bottom: 44px;
 }
+
+/* A background image behind video elements in case they don't load properly */
+video {
+    background-image: url(/static/img/connection-error.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+}
 </style>