Auto reconnect to stream

web/static/js/viewer.js

@@ -1,70 +1,85 @@
-// Init peer connection
-peerConnection = new RTCPeerConnection({
-    iceServers: [
-        {
-            // FIXME: let admin customize the stun server
-            urls: 'stun:stun.l.google.com:19302'
+let peerConnection;
+
+startPeerConnection = () => {
+    // Init peer connection
+    peerConnection = new RTCPeerConnection({
+        iceServers: [
+            {
+                // FIXME: let admin customize the stun server
+                urls: 'stun:stun.l.google.com:19302'
+            }
+        ]
+    })
+
+    // On connection change, change indicator color
+    // if connection failed, restart peer connection
+    peerConnection.oniceconnectionstatechange = e => {
+        switch (peerConnection.iceConnectionState) {
+            case "disconnected":
+                console.log(peerConnection.iceConnectionState)
+                document.getElementById("connectionIndicator").style.fill = "#dc3545"
+                break
+            case "checking":
+                document.getElementById("connectionIndicator").style.fill = "#ffc107"
+                break
+            case "connected":
+                document.getElementById("connectionIndicator").style.fill = "#28a745"
+                break
+            case "closed":
+            case "failed":
+                console.log("Connection failed, restarting...")
+                peerConnection.close()
+                peerConnection = null
+                startPeerConnection()
+                break
+            default:
+                console.log(peerConnection.iceConnectionState)
+                break
         }
-    ]
-})
+    }
 
-// On connection change, inform user
-peerConnection.oniceconnectionstatechange = e => {
-    console.log(peerConnection.iceConnectionState)
+    // We want to receive audio and video
+    peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
+    peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
 
-    switch (peerConnection.iceConnectionState) {
-        case "closed":
-        case "failed":
-            console.log("FIXME Failed");
-            break;
-        case "disconnected":
-            console.log("temp network issue")
-            break;
-        case "connected":
-            console.log("temp network issue resolved!")
-            break;
+    // Create offer and set local description
+    peerConnection.createOffer().then(offer => {
+        // After setLocalDescription, the browser will fire onicecandidate events
+        peerConnection.setLocalDescription(offer)
+    }).catch(console.log)
+
+    // When candidate is null, ICE layer has run out of potential configurations to suggest
+    // so let's send the offer to the server
+    peerConnection.onicecandidate = event => {
+        if (event.candidate === null) {
+            // Send offer to server
+            // The server know the stream name from the url
+            // The server replies with its description
+            // After setRemoteDescription, the browser will fire ontrack events
+            console.log("Sending session description to server")
+            fetch(window.location.href, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(peerConnection.localDescription)
+            })
+                .then(response => response.json())
+                .then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
+                .catch(console.log)
+        }
+    }
+
+    // When video track is received, configure player
+    peerConnection.ontrack = function (event) {
+        console.log(`New ${event.track.kind} track`)
+        if (event.track.kind === "video") {
+            const viewer = document.getElementById('viewer')
+            viewer.srcObject = event.streams[0]
+        }
     }
 }
 
-// We want to receive audio and video
-peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
-peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
-
-// Create offer and set local description
-peerConnection.createOffer().then(offer => {
-    // After setLocalDescription, the browser will fire onicecandidate events
-    peerConnection.setLocalDescription(offer)
-}).catch(console.log)
-
-// When candidate is null, ICE layer has run out of potential configurations to suggest
-// so let's send the offer to the server
-peerConnection.onicecandidate = event => {
-    if (event.candidate === null) {
-        // Send offer to server
-        // The server know the stream name from the url
-        // The server replies with its description
-        // After setRemoteDescription, the browser will fire ontrack events
-        fetch(window.location.href, {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(peerConnection.localDescription)
-        })
-            .then(response => response.json())
-            .then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
-            .catch(console.log)
-    }
-}
-
-// When video track is received, configure player
-peerConnection.ontrack = function (event) {
-    if (event.track.kind === "video") {
-        const viewer = document.getElementById('viewer')
-        viewer.srcObject = event.streams[0]
-        viewer.autoplay = true
-        viewer.controls = true
-        viewer.muted = true
-    }
-}
+// Start
+startPeerConnection()

web/template/viewer.html

@@ -3,7 +3,7 @@
   <div class="col-video">
     <!-- Video -->
     <div class="video-responsive">
-      <video id="viewer" poster="/static/img/no_stream.svg"></video>
+      <video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
     </div>
 
     <!-- Links under video -->
@@ -16,6 +16,13 @@
           d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z" />
       </svg>
       <code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>-->
+
+      <svg id="connectionIndicator" width="1em" height="1em" viewBox="0 0 16 16" fill="#dc3545" xmlns="http://www.w3.org/2000/svg">
+        <rect width="4" height="5" x="1" y="10" rx="1"/>
+        <rect width="4" height="9" x="6" y="6" rx="1"/>
+        <rect width="4" height="14" x="11" y="1" rx="1"/>
+      </svg>
+
       <a href="#" id="sideWidgetToggle" title="Cacher/Afficher le chat">»</a>
     </p>
   </div>