问题
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);
}
}
回答1:
There are a few different factors that could at at play here.
- NAT Types on both sides
- IP Family (IPv4 or IPv6)
- Protocols (Is UDP Allowed at all?)
I would determine what NAT type you are behind on each side, you can read more about that here https://webrtchacks.com/symmetric-nat. If both networks are behind symmetric NATs you are going to need a TURN server.
If you don't have a browser you could also use Pion TURN a Go TURN client and server.
I would also check when gathering candidates if there is an intersection on IPv4/IPv6. Some phone providers are only giving out IPv6.
UDP may not be allowed at all. This isn't common, but possible. In this case you will be forced to use TURN. NAT traversal via TCP is possible, but not supported by WebRTC AFAIK.
回答2:
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.
来源：https://stackoverflow.com/questions/59906509/how-do-you-get-around-nats-using-webrtc-without-a-turn-server