Fix safari ice candidate behavior

Author: BlankSourceCode

src/public/scripts/main.js

@@ -77,6 +77,10 @@ function connect(asHost) {
     // Forward websocket signalling messages to the connection
     webSocket.onopen = (e) => {
         connection.create(asHost);
+        if (!asHost) {
+            // Request any host info
+            webSocket.send("request");
+        }
     };
     webSocket.onclose = (e) => {
     };

src/public/scripts/webConnection.js

@@ -53,7 +53,6 @@ class WebConnection extends EventTarget {
 
         // Add tracks to the local video element
         this.#pc.ontrack = (e) => {
-            this.#log("track!");
             this.#stream = new MediaStream();
             this.#stream.addTrack(e.track);
 
@@ -69,31 +68,32 @@ class WebConnection extends EventTarget {
         // Note: We don't actually do this anymore
         // this.#createDataChannelForCanvas();
 
-        // Offer the connection
-        const sdpConstraints = {
-            offerToReceiveAudio: false,
-            offerToReceiveVideo: true
-        };
-        const sdp = await this.#pc.createOffer(sdpConstraints);
-        await this.#pc.setLocalDescription(sdp);
-        this.#sendToWebSocket("offer", sdp);
+        // Offer the connection as a host
+        // A client joining will just recieve the offer via the cache in the server
+        // TODO: Support multiple clients
+        if (this.#isHost) {
+            const sdpConstraints = {
+                offerToReceiveAudio: false,
+                offerToReceiveVideo: true
+            };
+            const sdp = await this.#pc.createOffer(sdpConstraints);
+            await this.#pc.setLocalDescription(sdp);
+            this.#sendToWebSocket("offer", sdp);
+        }
     }
 
     async onOffer(from, offer) {
-        this.#log("onOffer");
         await this.#pc.setRemoteDescription(new RTCSessionDescription(offer));
         const sdp = await this.#pc.createAnswer();
         await this.#pc.setLocalDescription(sdp);
         this.#sendToWebSocket("answer", sdp);
     }
 
     async onIceCandidate(from, candidate) {
-        this.#log("onIceCandidate");
         await this.#pc.addIceCandidate(new RTCIceCandidate(candidate));
     }
 
     async onAnswer(from, answer) {
-        this.#log("onAnswer");
         await this.#pc.setRemoteDescription(new RTCSessionDescription(answer));
     }
 

src/server.js

@@ -40,6 +40,7 @@ function sendMJpeg(msg) {
 
 // Create the websocket signaling server
 const wsList = [];
+const wsMessages = [];
 const wss = new WebSocketServer({ port: (port + 1) });
 wss.on("connection", function (ws) {
     wsList.push(ws);
@@ -48,20 +49,37 @@ wss.on("connection", function (ws) {
         wsList.splice(wsList.indexOf(ws), 1);
 
         // On a disconnect, clear out the canvas
+        // We have to do this twice because some browsers (OBS) seem to cache the frames
+        sendMJpeg(emptyImage);
         sendMJpeg(emptyImage);
     });
 
     ws.on("message", function (message) {
         const msg = message.toString();
-        
+
         if (msg[0] === "d") {
+            // Update the mjpeg
             sendMJpeg(msg);
         } else if (msg[0] === "l") {
+            // Log the message
             console.log(msg);
+        } else if (msg[0] === "r") {
+            // On a request for host info, just fire any cached messages
+            while (wsMessages.length > 0) {
+                const msg = wsMessages.pop();
+                for (var i = 0; i < wsList.length; i++) {
+                    wsList[i].send(msg);
+                }
+            }
         } else {
-            console.log(msg);
-            for (var i = 0; i < wsList.length; i++) {
-                wsList[i].send(msg);
+            if (wsList.length < 2) {
+                // No client, so cache the messages
+                wsMessages.push(msg);
+            } else {
+                // Broadcast messages
+                for (var i = 0; i < wsList.length; i++) {
+                    wsList[i].send(msg);
+                }
             }
         }
     });