Fix calls fully: remove bad default TURN, conditional relay fallback, mobile control bindings (v2.8.3)

client.js

@@ -100,6 +100,13 @@ function getDefaultIceServers() {
     ];
 }
 
+function hasTurnServerConfigured(iceServers = []) {
+    return iceServers.some((server) => {
+        const urls = Array.isArray(server?.urls) ? server.urls : [server?.urls];
+        return urls.some((url) => typeof url === 'string' && /^turns?:/i.test(url));
+    });
+}
+
 async function ensureRtcConfigLoaded() {
     if (rtcConfigLoaded) return;
     rtcConfigLoaded = true;
@@ -343,6 +350,50 @@ function ensureRemoteMediaPlayback(videoEl) {
     setTimeout(tryPlay, 900);
 }
 
+function ensureLocalPreviewPlayback(videoEl) {
+    if (!videoEl || !videoEl.srcObject) return;
+
+    videoEl.muted = true;
+    videoEl.autoplay = true;
+    videoEl.playsInline = true;
+
+    const tryPlay = () => {
+        videoEl.play().catch(() => {});
+    };
+
+    tryPlay();
+    setTimeout(tryPlay, 120);
+    setTimeout(tryPlay, 500);
+}
+
+let callControlBindingsDone = false;
+function bindCallControlButtons() {
+    if (callControlBindingsDone) return;
+
+    const bindings = [
+        ['muteBtn', toggleLocalMute],
+        ['cameraBtn', toggleCallCamera],
+        ['endCallBtn', endVideoCall],
+        ['callDebugBtn', toggleCallDebug]
+    ];
+
+    bindings.forEach(([id, action]) => {
+        const button = document.getElementById(id);
+        if (!button) return;
+
+        const handlePress = (event) => {
+            event.preventDefault();
+            action();
+        };
+
+        button.addEventListener('click', handlePress);
+        button.addEventListener('touchend', handlePress, { passive: false });
+        button.style.pointerEvents = 'auto';
+    });
+
+    callControlBindingsDone = true;
+}
+
 
 
 function toggleAuthMode() {
@@ -5718,6 +5769,7 @@ function showToastClickable(message, type = 'success', chatContext = null) {
 window.addEventListener('DOMContentLoaded', () => {
     loadTheme();
     applySettingsToUI();
+    bindCallControlButtons();
     pinnedChats = JSON.parse(localStorage.getItem('pinnedChats') || '[]');
     joinedCommunities = JSON.parse(localStorage.getItem('joinedCommunities') || '[]');
     joinedGroups = JSON.parse(localStorage.getItem('joinedGroups') || '[]');
@@ -6206,6 +6258,7 @@ function createPeerConnection(peerId) {
     const runtimeIceServers = Array.isArray(rtcRuntimeConfig?.iceServers) && rtcRuntimeConfig.iceServers.length
         ? rtcRuntimeConfig.iceServers
         : getDefaultIceServers();
+    const hasTurnServersConfigured = hasTurnServerConfigured(runtimeIceServers);
     activeIceServers = runtimeIceServers;
 
     peerConnection = new RTCPeerConnection({
@@ -6400,13 +6453,15 @@ function createPeerConnection(peerId) {
         callIceFailureCount += 1;
 
         try {
-            if (callIceFailureCount >= 2 && !forceRelayOnly) {
+            if (callIceFailureCount >= 2 && !forceRelayOnly && hasTurnServersConfigured) {
                 forceRelayOnly = true;
                 peerConnection.setConfiguration({
                     iceServers: activeIceServers,
                     iceTransportPolicy: 'relay'
                 });
                 showToast('Switching call to relay mode for network compatibility...', 'warning');
+            } else if (callIceFailureCount >= 2 && !hasTurnServersConfigured) {
+                showToast('Retrying call without relay fallback...', 'warning');
             }
 
             peerConnection.restartIce?.();
@@ -6478,7 +6533,7 @@ async function startCallSession(peerName, peerId, isCaller) {
     const localVideo = document.getElementById('localCallVideo');
     if (localVideo && localCallStream) {
         localVideo.srcObject = localCallStream;
-        localVideo.play().catch(() => {});
+        ensureLocalPreviewPlayback(localVideo);
     } else if (localVideo) {
         localVideo.srcObject = null;
     }

index.html

@@ -3098,7 +3098,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.8.2</span>
+                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.8.3</span>
                     <button class="header-btn mobile-essential" onclick="toggleArchiveChat()" title="Archive chat">
                         <i class="fas fa-archive"></i>
                     </button>
@@ -3688,15 +3688,15 @@
                     <div id="callOverlayPeerName" style="color:#fff; font-size:18px; font-weight:700;"></div>
                     <div id="callTimerLabel" style="color:rgba(255,255,255,0.7); font-size:13px; margin-top:4px;">00:00:00</div>
                 </div>
-                <button onclick="toggleCallDebug()" style="background:rgba(255,255,255,0.18); border:none; color:white; padding:7px 13px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600;">🔧 Debug</button>
+                <button id="callDebugBtn" style="background:rgba(255,255,255,0.18); border:none; color:white; padding:7px 13px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600;">🔧 Debug</button>
             </div>
 
             <div id="callDebugPanel"></div>
 
             <div class="call-overlay-controls">
-                <button id="muteBtn" class="call-ctrl-btn" onclick="toggleLocalMute()" title="Mute/Unmute">🎤</button>
-                <button id="cameraBtn" class="call-ctrl-btn" onclick="toggleCallCamera()" title="Camera on/off">📷</button>
-                <button class="call-end-btn" onclick="endVideoCall()" title="End Call">📵</button>
+                <button id="muteBtn" class="call-ctrl-btn" title="Mute/Unmute">🎤</button>
+                <button id="cameraBtn" class="call-ctrl-btn" title="Camera on/off">📷</button>
+                <button id="endCallBtn" class="call-end-btn" title="End Call">📵</button>
             </div>
         </div>
     </div>
@@ -3717,7 +3717,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.8.2"></script>
+    <script src="client.js?v=2.8.3"></script>
 </body>
 </html>
 

package.json

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

server.js

@@ -73,26 +73,7 @@ app.get('/api/rtc-config', (req, res) => {
     { urls: 'stun:stun2.l.google.com:19302' },
     { urls: 'stun:stun3.l.google.com:19302' },
     { urls: 'stun:stun4.l.google.com:19302' },
-    { urls: 'stun:stun.cloudflare.com:3478' },
-    {
-      urls: [
-        'turn:a.relay.metered.ca:80',
-        'turn:a.relay.metered.ca:80?transport=tcp',
-        'turn:a.relay.metered.ca:443',
-        'turns:a.relay.metered.ca:443?transport=tcp'
-      ],
-      username: 'openrelayproject',
-      credential: 'openrelayproject'
-    },
-    {
-      urls: [
-        'turn:openrelay.metered.ca:80',
-        'turn:openrelay.metered.ca:443',
-        'turn:openrelay.metered.ca:443?transport=tcp'
-      ],
-      username: 'openrelayproject',
-      credential: 'openrelayproject'
-    }
+    { urls: 'stun:stun.cloudflare.com:3478' }
   ];
 
   const turnUrlsRaw = process.env.TURN_URLS || '';