Add TURN server

Author: Keith Bannister

.gitignore

@@ -4,6 +4,8 @@ venv/
 package-lock.json
 node_modules/
 public/game/phaser3_assets
+.env
+
 
 # Logs
 logs

package.json

@@ -13,6 +13,7 @@
     "cookie-parser": "~1.4.4",
     "datauri": "^3.0.0",
     "debug": "~2.6.9",
+    "dotenv": "^8.2.0",
     "express": "~4.16.1",
     "express-session": "^1.17.1",
     "face-api.js": "^0.22.2",

public/game/js/game.js

@@ -1,19 +1,21 @@
 'use strict'
 
-function createMyPeerConnection() {
-  var config = {
-    sdpSemantics: 'unified-plan'
+function createMyPeerConnection(iceServer) {
+  let config = {
+    sdpSemantics: 'unified-plan',
+    iceServers: [iceServer]
   };
 
-  if (document.getElementById('use-stun').checked) {
-    config.iceServers = [{
-      urls: ['stun:stun.l.google.com:19302'
-            //'turn:freya.bannister.id.au:3479'
-          ]
-    }];
-  }
+  //
+  // if (document.getElementById('use-stun').checked) {
+  //   config.iceServers = [{
+  //     urls: ['stun:stun.l.google.com:19302'
+  //           //'turn:freya.bannister.id.au:3479'
+  //         ]
+  //   }];
+  // }
 
-  pc = new RTCPeerConnection(config);
+  let pc = new RTCPeerConnection(config);
 
   // register some listeners to help debugging
   pc.addEventListener('icegatheringstatechange', function() {
@@ -47,16 +49,16 @@ class WebRTCConnection {
         await this.onmessage(webrtcdata);
       }
     });
-    this.setupPeerConnection();
+    this.pc = null;
   }
 
-  setupPeerConnection = () => {
+  setupPeerConnection = (server) => {
     this.isPolite = false;
     this.makingOffer = false;
     this.ignoreOffer = false;
     this.remoteId = null;
     this.tracksToAdd = []; //[...this.allTracks];
-    this.pc = createMyPeerConnection();
+    this.pc = createMyPeerConnection(server);
     pc = this.pc;
     const signaler = this;
     pc.onnegotiationneeded = async () => {
@@ -96,7 +98,10 @@ class WebRTCConnection {
   }
 
   addEventListener = (evtname, func) => {
-    this.pc.addEventListener(evtname, func);
+
+    if (this.pc !== null) {
+      this.pc.addEventListener(evtname, func);
+    }
 
     if (!(evtname in Object.keys(this.listeners))) {
       this.listeners[evtname] = [];
@@ -110,6 +115,11 @@ class WebRTCConnection {
     this.sendTracksIfPossible();
   }
 
+  set iceServer(server) {
+    this._iceServer = server;
+    this.setupPeerConnection(server);
+  }
+
   sendTracksIfPossible = () => {
       const msg = `
       Attempting to send tracks signallingState: ${this.pc.signalingState}
@@ -536,6 +546,10 @@ function create() {
     star_animation_no = (star_animation_no + 1)% anims.length;
   });
 
+  this.socket.on('iceServers', function(iceServer) {
+    self.webrtcConnection.iceServer = iceServer;
+  });
+
   this.cursors = this.input.keyboard.createCursorKeys();
   this.leftKeyPressed = false;
   this.rightKeyPressed = false;

rockethedz_game_server/js/game.js

@@ -106,6 +106,7 @@ function create() {
     addPlayer(self, players[socket.id]);
     // send the players object to the new player
     socket.emit('currentPlayers', players);
+    socket.emit('iceServers', window.getIceServer(socket.id));
     // update all other players of the new player
     socket.broadcast.emit('newPlayer', players[socket.id]);
     // send the star object to the new player

rockethedz_game_server/js/server.js

@@ -9,6 +9,41 @@ const { JSDOM } = jsdom;
 
 games = {};
 
+function calcTURNCredentials(name, secret, expire_sec) {
+  // From Here: https://www.google.com/search?client=firefox-b-d&q=how+to+use+COTURN+REST+API
+    const unixTimeStamp = parseInt(Date.now()/1000) + expire_sec;
+    const username = [unixTimeStamp, name].join(':');
+    let hmac = crypto.createHmac('sha1', secret);
+    hmac.setEncoding('base64');
+    hmac.write(username);
+    hmac.end();
+    const password = hmac.read();
+    return {
+        username: username,
+        password: password
+    };
+}
+
+function getIceServer(name) {
+  // Returns an ice server configuration for the given username
+  // That can be plugged straight into a webtrc setup
+  // See: https://tools.ietf.org/html/draft-uberti-behave-turn-rest-00
+  // See: https://developer.mozilla.org/en-US/docs/Web/API/RTCIceServer
+  // turn defualt port: 3478 turns: 5349
+  let expire_sec = process.env.TURN_EXPIRE_SEC || 86400;
+  let turn_server = process.env.TURN_SERVER || 'localhost';
+  let turn_port = process.env.TURN_PORT || 5349;
+  let turn_proto = process.env.TURN_PROTO || 'turns'; // 'turn' or 'turns'
+  let cred = calcTURNCredentials(name, process.env.TURN_SECRET, expire_sec);
+  const iceServer = {
+    username:cred.username,
+    credential:cred.password,
+    urls: [turn_proto + ':' + turn_server + ':' + turn_port + '?transport=udp',
+           turn_proto + ':' + turn_server + ':' + turn_port + '?transport=tcp']
+  };
+
+  return iceServer;
+}
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
@@ -78,8 +113,9 @@ function setupAuthoritativePhaser(gameId, io) {
       dom.window.URL.revokeObjectURL = (objectURL) => {};
       dom.window.io = io.of(socketNamespace);
       dom.window.gameId = gameId;
+      dom.window.getIceServer = getIceServer;
       dom.window.onFinished = () => {
-        console.log('Game ${gameid} finished');
+        console.log('Game', gameId, 'finished');
         dom.window.close();
         delete games[gameId];
       }