WebRTC connection fails between devices on different networks despite successful STUN/TURN...

I have a WebRTC video chat application built with Angular that works perfectly when testing locally (same network) but fails when devices are on different networks. Here are the specific details:

Environment

• Angular application with Socket.io for signaling
• Twilio STUN/TURN servers configured
• Devices: Two MacBooks on different mobile hotspots

What Works

• Local video stream initialization
• Signaling server connection and message exchange
• ICE candidate gathering (getting both STUN and TURN candidates)
• Connection works perfectly when testing on same network

What Doesn't Work

• Connection fails when devices are on different networks
• ICE connection state transitions from "checking" to "disconnected"
• DTLS state remains "new" and never completes handshake
• No packets are being sent/received (all counters at 0)

private setupPeerConnection(targetUserId: string) {
this.peerConnection = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:global.stun.twilio.com:3478' },
{
urls: [
'turn:global.turn.twilio.com:3478?transport=udp',
'turn:global.turn.twilio.com:3478?transport=tcp',
'turn:global.turn.twilio.com:443?transport=tcp'
],
username: '...',
credential: '...'
}
],
iceTransportPolicy: 'all',
bundlePolicy: 'max-bundle',
rtcpMuxPolicy: 'require'
});
}


What I've Tried

• Forced TURN usage with iceTransportPolicy: 'relay'
• Added ICE restart on connection failure
• Verified TURN credentials are valid
• Implemented reconnection logic
• Added proper error handling and state monitoring

The WebRTC stats show ICE candidates are gathered successfully but the connection never establishes. What could be preventing the connection between devices on different networks despite having proper TURN configuration?

Any help would be greatly appreciated!

Continue reading...