javascript - How do you get around NATs using WebRTC without a TURN server?

Question

I'm trying to make a peer to peer Javascript game that can be played on mobile browsers.

• I have been able to successfully set up a p2p connection between two phones within my local WiFi network.
• I am unable to connect two phones over mobile networks or one on WiFi and one on a mobile network.
• I tried turning off my Windows firewall and could not connect my PC to my phone on a mobile network.
• I tried having both peers set up their own data channels and set negotiated.

I've read that 80% to 90% of devices are able to connect over WebRTC without TURN servers so I am at a complete loss of what to do next.

Desktop: Google Chrome 79.0.3945.130 (Official Build) (64-bit) (cohort: Stable)

Mobile (Pixel 3/Android 10): Google Chrome 79.0.3945.116

MOBILE NETWORK

Time    Event
1/24/2020, 11:58:17 PM  createLocalDataChannel
label: Test, reliable: true
1/24/2020, 11:58:17 PM  negotiationneeded
1/24/2020, 11:58:17 PM  createOffer
1/24/2020, 11:58:17 PM  createOfferOnSuccess
1/24/2020, 11:58:17 PM  setLocalDescription
1/24/2020, 11:58:17 PM  signalingstatechange
1/24/2020, 11:58:17 PM  setLocalDescriptionOnSuccess
1/24/2020, 11:58:17 PM  icegatheringstatechange
1/24/2020, 11:58:17 PM  icecandidate (host)
1/24/2020, 11:58:17 PM  icecandidate (srflx)
1/24/2020, 11:58:17 PM  setRemoteDescription
1/24/2020, 11:58:17 PM  addIceCandidate (host)
1/24/2020, 11:58:17 PM  signalingstatechange
1/24/2020, 11:58:17 PM  setRemoteDescriptionOnSuccess
1/24/2020, 11:58:17 PM  iceconnectionstatechange
1/24/2020, 11:58:17 PM  iceconnectionstatechange (legacy)
1/24/2020, 11:58:17 PM  connectionstatechange
1/24/2020, 11:58:18 PM  addIceCandidate (srflx)
1/24/2020, 11:58:33 PM  iceconnectionstatechange
disconnected
1/24/2020, 11:58:33 PM  iceconnectionstatechange (legacy)
failed
1/24/2020, 11:58:33 PM  connectionstatechange
failed

WIFI NETWORK

Time    Event
1/25/2020, 12:02:45 AM  
createLocalDataChannel
label: Test, reliable: true
1/25/2020, 12:02:45 AM  negotiationneeded
1/25/2020, 12:02:45 AM  createOffer
1/25/2020, 12:02:45 AM  createOfferOnSuccess
1/25/2020, 12:02:45 AM  setLocalDescription
1/25/2020, 12:02:45 AM  signalingstatechange
1/25/2020, 12:02:45 AM  setLocalDescriptionOnSuccess
1/25/2020, 12:02:45 AM  icegatheringstatechange
1/25/2020, 12:02:45 AM  icecandidate (host)
1/25/2020, 12:02:45 AM  icecandidate (srflx)
1/25/2020, 12:02:46 AM  setRemoteDescription
1/25/2020, 12:02:46 AM  signalingstatechange
1/25/2020, 12:02:46 AM  setRemoteDescriptionOnSuccess
1/25/2020, 12:02:46 AM  icegatheringstatechange
1/25/2020, 12:02:46 AM  addIceCandidate (host)
1/25/2020, 12:02:46 AM  iceconnectionstatechange
1/25/2020, 12:02:46 AM  iceconnectionstatechange (legacy)
1/25/2020, 12:02:46 AM  connectionstatechange
1/25/2020, 12:02:46 AM  addIceCandidate (srflx)
1/25/2020, 12:02:46 AM  iceconnectionstatechange
connected
1/25/2020, 12:02:46 AM  iceconnectionstatechange (legacy)
connected
1/25/2020, 12:02:46 AM  connectionstatechange
connected
1/25/2020, 12:02:46 AM  iceconnectionstatechange (legacy)
completed

Peer to peer code

"use strict";

import { isAssetLoadingComplete } from '/game/assetManager.js';
import { playerInputHandler } from '/game/game.js';

const rtcPeerConnectionConfiguration = {
    // Server for negotiating traversing NATs when establishing peer-to-peer communication sessions
    iceServers: [{
        urls: [
            'stun:stun.l.google.com:19302'
        ]
    }]
};

let rtcPeerConn;
// For UDP semantics, set maxRetransmits to 0 and ordered to false
const dataChannelOptions = {
    // TODO: Set this to a unique number returned from joinRoomResponse
    //id: 1,
    // json for JSON and raw for binary
    protocol: "json",
    // If true both peers can call createDataChannel as long as they use the same ID
    negotiated: false,
    // TODO: Set to false so the messages are faster and less reliable
    ordered: true,
    // If maxRetransmits and maxPacketLifeTime aren't set then reliable mode will be on
    // TODO: Send multiple frames of player input every frame to avoid late/missing frames
    //maxRetransmits: 0,
    // The maximum number of milliseconds that attempts to transfer a message may take in unreliable mode.
    //maxPacketLifeTime: 30000
};

let dataChannel;

export let isConnectedToPeers = false;

export function createDataChannel(roomName, socket) {
    rtcPeerConn = new RTCPeerConnection(rtcPeerConnectionConfiguration);
    // Send any ice candidates to the other peer
    rtcPeerConn.onicecandidate = onIceCandidate(socket);
    // Let the 'negotiationneeded' event trigger offer generation
    rtcPeerConn.onnegotiationneeded = function () {
        console.log("Creating an offer")
        rtcPeerConn.createOffer(sendLocalDesc(socket), logError('createOffer'));
    };
    console.log("Creating a data channel");
    dataChannel = rtcPeerConn.createDataChannel(roomName, dataChannelOptions);
    dataChannel.onopen = dataChannelStateOpen;
    dataChannel.onmessage = receiveDataChannelMessage;
    dataChannel.onerror = logError('createAnswer');
    dataChannel.onclose = function(TODO) {
        console.log(`Data channel closed for scoket: ${socket}`, TODO)
    };
}

export function joinDataChannel(socket) {
    console.log("Joining a data channel");
    rtcPeerConn = new RTCPeerConnection(rtcPeerConnectionConfiguration);
    rtcPeerConn.ondatachannel = receiveDataChannel;
    // Send any ice candidates to the other peer
    rtcPeerConn.onicecandidate = onIceCandidate(socket);
}

function receiveDataChannel(rtcDataChannelEvent) {
    console.log("Receiving a data channel", rtcDataChannelEvent);
    dataChannel = rtcDataChannelEvent.channel;
    dataChannel.onopen = dataChannelStateOpen;
    dataChannel.onmessage = receiveDataChannelMessage;
    dataChannel.onerror = logError('createAnswer');
    dataChannel.onclose = function(TODO) {
        console.log(`Data channel closed for scoket: ${socket}`, TODO)
    };
}

function onIceCandidate(socket) {
    return function (event) {
        if (event.candidate) {
            console.log("Sending ice candidates to peer.");
            socket.emit('signalRequest', {
                signal: event.candidate
            });
        }
    }
}

function dataChannelStateOpen(event) {
    console.log("Data channel opened", event);
    isConnectedToPeers = true;

    if(!isAssetLoadingComplete) {
        document.getElementById("startGameButton").textContent = "Loading...";
    }
    else {
        document.getElementById('startGameButton').removeAttribute('disabled');
        document.getElementById("startGameButton").textContent = "Start Game";
    }
}

function receiveDataChannelMessage(messageEvent) {
    switch(dataChannel.protocol) {
        case "json":
            const data = JSON.parse(messageEvent.data)
            playerInputHandler(data);
            break;
        case "raw":
            break;
      }
}

export function signalHandler(socket) {
    return function (signal) {
        if (signal.sdp) {
            console.log("Setting remote description", signal);
            rtcPeerConn.setRemoteDescription(
                signal,
                function () {
                    // If we received an offer, we need to answer
                    if (rtcPeerConn.remoteDescription.type === 'offer') {
                        console.log("Offer received, sending answer")
                        rtcPeerConn.createAnswer(sendLocalDesc(socket), logError('createAnswer'));
                    }
                },
                logError('setRemoteDescription'));
        }
        else if (signal.candidate){
            console.log("Adding ice candidate ", signal)
            rtcPeerConn.addIceCandidate(new RTCIceCandidate(signal));
        }
    }
}

function sendLocalDesc(socket) {
    return function(description) {
        rtcPeerConn.setLocalDescription(
            description,
            function () {
                console.log("Setting local description", description);
                socket.emit('signalRequest', {
                    playerNumber: socket.id,
                    signal: description
                });
            },
            logError('setLocalDescription'));
    };
}

export function sendPlayerInput(playerInput){
    dataChannel.send(JSON.stringify(playerInput));
}

function logError(caller) {
    return function(error) {
        console.log('[' + caller + '] [' + error.name + '] ' + error.message);
    }
}

Answer 1

A TURN server is a solution to the problem. If there were workarounds that didn't require it, nobody would be using it. A common misconception here is that if you add a TURN server to the system, it will relay all traffic. That isn't true, it is only used as a fallback for the connections that can not be established otherwise. In comparison to the alternative of routing all your game messages through a websocket server this will still save you 80%+ of the traffic.

The next step is to install a TURN server. coturn is widely used and reasonably well documented. It is stable enough that, once setup, the amount of maintenance required is very low.