Fix

apps/web/src/components/CallModal.tsx

@@ -249,7 +249,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
         }
       };
 
-      // Ensure we have a stream object (even if browser didn't provide one)
+      // Ensure we have a stream object
       if (!remoteStreamRef.current) {
         remoteStreamRef.current = streams[0] || new MediaStream([track]);
       } else if (!remoteStreamRef.current.getTracks().includes(track)) {
@@ -258,23 +258,22 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
 
       const stream = remoteStreamRef.current;
 
-      // Link to DOM elements immediately
+      // Link to DOM elements
-      if (remoteVideoRef.current) {
+      if (track.kind === 'video' && remoteVideoRef.current) {
-        // IMPORTANT: If srcObject is the same, some browsers won't refresh the view. 
+        remoteVideoRef.current.srcObject = stream;
-        // We set it to the stream and call play() explicitly.
+        // MUST be muted to autoplay in most browsers
-        if (remoteVideoRef.current.srcObject !== stream) {
+        remoteVideoRef.current.muted = true;
-            remoteVideoRef.current.srcObject = stream;
+        remoteVideoRef.current.play().catch(err => console.warn('[WebRTC] video play failed:', err));
-        }
+        checkVideo();
-        remoteVideoRef.current.play().catch(err => {
-            console.warn('[WebRTC] Video play failed (retrying):', err);
-            // Retry play on next tick if failed
-            setTimeout(() => remoteVideoRef.current?.play().catch(() => {}), 500);
-        });
       } 
       
-      if (track.kind === 'audio' && remoteAudioRef?.current) {
+      if (track.kind === 'audio' || (track.kind === 'video' && !remoteAudioRef.current?.srcObject)) {
-        remoteAudioRef.current.srcObject = stream;
+        if (remoteAudioRef?.current) {
-        remoteAudioRef.current.play().catch(() => {});
+          remoteAudioRef.current.srcObject = stream;
+          remoteAudioRef.current.play().catch(err => {
+              console.warn('[WebRTC] Audio play failed, user gesture needed:', err);
+          });
+        }
       }
 
       track.onunmute = checkVideo;
@@ -1438,9 +1437,9 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
               <PhoneOff size={14} />
             </button>
           </div>
-          {/* Hidden remote video to keep stream alive */}
+          {/* Hidden remote video/audio elements for background processing */}
           <video ref={remoteVideoRef} autoPlay playsInline muted className="hidden" />
-          <video ref={localVideoRef} autoPlay playsInline muted className="hidden" />
+          <audio ref={remoteAudioRef} autoPlay className="hidden" />
         </motion.div>
       ) : (
 
@@ -1546,6 +1545,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
               ref={remoteVideoRef}
               autoPlay
               playsInline
+              muted
               className={`
                 bg-black transition-all duration-500
                 ${showVideoArea