Added webRTC error message.

src/views/partial/channelSettings/settings.ejs

@@ -35,7 +35,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
                 </span>
             <% }; %>
             <span class="admin-list-field-container">
-                <p>Livestream Type:</p>
+                <p>Livestream Type: (<a target="_blank" href="/streamInfo">More Info</a>)</p>
                 <span id="channel-preference-list-stream-settings-grid">
                     <span>
                         <input type="radio" name="streamType" id="channel-preference-list-stream-type-webrtc" value="webrtc" <% if(channel.settings["streamType"] == "webrtc"){ %> checked <% }%> >

www/css/channel.css

@@ -88,6 +88,7 @@ div#chat-panel-main-div{
     justify-content: center;
     height: 100%;
     transform: scaleX(1) scaleY(1);
+    overflow: hidden;
 }
 
 #media-panel-video-container video{
@@ -341,4 +342,11 @@ span.user-entry{
 .chat-img, .chat-video{
     max-width: 100%;
     max-height: 10em;
+}
+
+#web-rtc-error-block{
+    display: flex;
+    align-items: center;
+    margin: 1em;
+    color: lightgray;
 }

www/js/channel/webRTCHandler.js

@@ -149,6 +149,7 @@ class webRTCHandler{
         //Setup peer event handlers
         this.currentStream.addEventListener('icecandidate', this.sendIceCandidate.bind(this));
         this.currentStream.addEventListener('track', this.handleVideoStream.bind(this));
+        this.currentStream.addEventListener('connectionstatechange', this.handleConnectionState.bind(this));
 
         //Create offer from peerConnection
         const offer = await this.currentStream.createOffer({
@@ -258,9 +259,46 @@ class webRTCHandler{
         //clear currentViewers map
         this.currentViewers.clear();
 
+        //Clear errors
+        this.client.player.videoContainer.innerHTML = "";
+
         //Clear candidate cache
         this.cachedCandidates = [];
     }
+
+    handleConnectionState(data){
+        if(this.currentStream.connectionState == "failed"){
+            let icon = document.createElement('img');
+            icon.src = "/img/rtcerror.png";
+
+            let title = document.createElement('h1');
+            title.innerText = "WebRTC Error";
+
+            let text = document.createElement('p');
+            text.innerText = "Looks like we're having issues connecting you to your stream. Make sure you're not behind a CGNAT or something.";
+
+            let link = document.createElement('a');
+            link.innerText = "Click here for more info...";
+            link.href = "/streamInfo";
+            link.target = "_blank";
+            
+            let textBlock = document.createElement('div');
+            textBlock.appendChild(title);
+            textBlock.appendChild(text);
+            textBlock.appendChild(link);            
+
+            let errorBlock = document.createElement('div');
+            errorBlock.id = "web-rtc-error-block"
+            errorBlock.appendChild(icon);
+            errorBlock.appendChild(textBlock);
+
+            this.client.player.videoContainer.innerHTML = "";
+            this.client.player.videoContainer.appendChild(errorBlock);
+
+            let towelSound = new Audio('/audio/towel.ogg');
+            towelSound.play();
+        }
+    }
 }
 
 /**