diff --git a/apps/web/src/components/CallModal.tsx b/apps/web/src/components/CallModal.tsx index 2a011d8..cdf0fc5 100644 --- a/apps/web/src/components/CallModal.tsx +++ b/apps/web/src/components/CallModal.tsx @@ -257,15 +257,21 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi if (remoteVideoRef.current.srcObject !== stream) { console.log('[WebRTC] Binding stream to video element'); remoteVideoRef.current.srcObject = stream; + // Force load to ensure browser picks up streams properly + remoteVideoRef.current.load(); } // Try to play. If fails, it's usually autoplay policy remoteVideoRef.current.play().catch(() => { console.warn('[WebRTC] Autoplay blocked, waiting for interaction'); - // Important: we keep trying to play because users often click the UI const retryPlay = () => { - remoteVideoRef.current?.play().then(() => { + if (!remoteVideoRef.current) return; + remoteVideoRef.current.play().then(() => { console.log('[WebRTC] Video started after retry'); - }).catch(() => setTimeout(retryPlay, 2000)); + }).catch(() => { + // If blocked, ensure it's muted and try again + if (remoteVideoRef.current) remoteVideoRef.current.muted = true; + setTimeout(retryPlay, 2000); + }); }; retryPlay(); }); @@ -295,7 +301,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi endCallSafe(); } }; - }, [callType, endCallSafe]); + }, [endCallSafe]); // REMOVED callType dependency to prevent handler reset during call // Start outgoing call const startCall = useCallback(async () => {