Fix video calls: allow STUN/P2P, fix ontrack stream, fix timer reset, fix ICE errors (v2.8.0)

client.js

@@ -2828,7 +2828,12 @@ async function addOrQueueIceCandidate(candidateData) {
     const hasRemoteDescription = Boolean(peerConnection.remoteDescription && peerConnection.remoteDescription.type);
 
     if (hasRemoteDescription) {
-        await peerConnection.addIceCandidate(candidate);
+        try {
+            await peerConnection.addIceCandidate(candidate);
+        } catch (iceErr) {
+            // Stale or duplicate ICE candidates are common and harmless after ICE restart
+            console.warn('ICE candidate ignored:', iceErr.message);
+        }
     } else {
         remoteIceCandidatesQueue.push(candidate);
     }
@@ -6140,16 +6145,11 @@ async function ensureLocalCallStream() {
     try {
         const selectedMic = audioSettings?.microphoneId;
         const constraints = {
-            audio: {
-                deviceId: selectedMic && selectedMic !== 'default' ? { exact: selectedMic } : undefined,
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true
-            },
+            audio: true, // Keep it simple for better compatibility
             video: {
                 facingMode: 'user',
-                width: { ideal: 720 },
-                height: { ideal: 480 }
+                width: { min: 320, ideal: 640, max: 1280 }, // Use ranges, not fixed ideals
+                height: { min: 240, ideal: 480, max: 720 }
             }
         };
         localCallStream = await navigator.mediaDevices.getUserMedia(constraints);
@@ -6249,51 +6249,22 @@ function createPeerConnection(peerId) {
     };
 
     peerConnection.ontrack = (event) => {
-        console.log('📞 Remote track received:', event.track.kind, event.streams.length);
+        // Add the incoming track to our managed MediaStream so srcObject stays consistent.
+        if (event.track && remoteCallStream) {
+            if (!remoteCallStream.getTrackById(event.track.id)) {
+                remoteCallStream.addTrack(event.track);
+            }
+        }
         const remoteVideo = document.getElementById('remoteCallVideo');
         if (remoteVideo) {
-            if (event.streams && event.streams[0]) {
-                const incomingStream = event.streams[0];
-                // Keep reference to the actual remote stream so reconnect logic does not swap it out.
-                remoteCallStream = incomingStream;
-                if (remoteVideo.srcObject !== incomingStream) {
-                    remoteVideo.srcObject = incomingStream;
-                }
-            } else if (remoteCallStream) {
-                remoteCallStream.addTrack(event.track);
-                if (remoteVideo.srcObject !== remoteCallStream) {
-                    remoteVideo.srcObject = remoteCallStream;
-                }
+            if (remoteVideo.srcObject !== remoteCallStream) {
+                remoteVideo.srcObject = remoteCallStream;
             }
-            
-            
             remoteVideo.muted = false;
             remoteVideo.volume = 1.0;
-            
-            
-            if (audioSettings.speakerId && audioSettings.speakerId !== 'default' && typeof remoteVideo.setSinkId === 'function') {
-                remoteVideo.setSinkId(audioSettings.speakerId).catch((sinkError) => {
-                    console.warn('Could not apply selected speaker for call:', sinkError);
-                });
-            }
-            
-            
             ensureRemoteMediaPlayback(remoteVideo);
-
-            // Fallback: start timer when media is actually flowing, even if connection state stays "connecting".
-            if (!callTimerInterval) {
-                startCallTimer();
-            }
-
-            event.track.onunmute = () => {
-                ensureRemoteMediaPlayback(remoteVideo);
-                if (!callTimerInterval) {
-                    startCallTimer();
-                }
-            };
         }
     };
-
     function showCallWarningThrottled(message) {
         const now = Date.now();
         if (now - lastCallWarningAt < 5000) return;
@@ -6314,12 +6285,14 @@ function createPeerConnection(peerId) {
         } else if (peerConnection.connectionState === 'connected') {
             callIceFailureCount = 0;
             showToast('📞 Call connected!', 'success');
-            startCallTimer();
-            // Re-attach remote stream after ICE recovery so video/audio plays
+            // Start timer only if not already running (avoids resetting a running clock)
+            if (!callTimerInterval) {
+                startCallTimer();
+            }
+            // Ensure remote media plays after ICE recovery
             const remoteVidEl = document.getElementById('remoteCallVideo');
             if (remoteVidEl) {
-                // Only set srcObject when video currently has no stream to avoid replacing a valid incoming stream.
-                if (remoteCallStream && !remoteVidEl.srcObject) {
+                if (!remoteVidEl.srcObject && remoteCallStream) {
                     remoteVidEl.srcObject = remoteCallStream;
                 }
                 remoteVidEl.muted = false;

index.html

@@ -934,13 +934,18 @@
         /* ==================== CALL OVERLAY ==================== */
         #callOverlay {
             position: fixed;
-            inset: 0;
-            background: #0a0a0a;
-            z-index: 10000;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 9999; /* Ensure it's on top of everything */
             display: none;
+            touch-action: manipulation; /* Prevents double-tap zoom delay */
+        }
+        #callOverlay.active {
+            display: flex;
             flex-direction: column;
         }
-        #callOverlay.active { display: flex; }
         #remoteCallVideo, #localCallVideo, #localCallVideoOld {
             display: block;
         }
@@ -3061,7 +3066,7 @@
                     <div class="chat-header-title" id="chatTitle">💬 Select a friend to chat</div>
                 </div>
                 <div class="chat-header-actions">
-                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.7.1</span>
+                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.8.0</span>
                     <button class="header-btn mobile-essential" onclick="toggleArchiveChat()" title="Archive chat">
                         <i class="fas fa-archive"></i>
                     </button>
@@ -3678,7 +3683,7 @@
 
     <script src="/socket.io/socket.io.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-    <script src="client.js?v=2.7.1"></script>
+    <script src="client.js?v=2.8.0"></script>
 </body>
 </html>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-like-app",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "main": "server.js",
   "scripts": {
     "dev": "nodemon server.js",

server.js

@@ -98,7 +98,7 @@ app.get('/api/rtc-config', (req, res) => {
   const turnUrlsRaw = process.env.TURN_URLS || '';
   const turnUsername = process.env.TURN_USERNAME || '';
   const turnCredential = process.env.TURN_CREDENTIAL || '';
-  const relayFlag = String(process.env.RTC_FORCE_RELAY || 'true').toLowerCase();
+  const relayFlag = String(process.env.RTC_FORCE_RELAY || 'false').toLowerCase();
   const forceRelay = relayFlag === 'true' || relayFlag === '1' || relayFlag === 'yes';
 
   let iceServers = [...defaultIceServers];