Added fields for stun/turn server

package.json

@@ -2,6 +2,7 @@
   "name": "hub-tester-webrtc-video",
   "version": "0.1.0",
   "private": true,
+  "homepage": ".",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.3",

src/App.js

@@ -7,13 +7,24 @@ const io = require("socket.io-client");
 let localStream = null;
 let remoteStream = null;
 
-const iceServer = {
+// const iceServer = {
-  'iceServer': [
+//   'iceServer': [
-      // { 'urls': 'stun:stun.services.mozilla.com' }, // public
+//       // { 'urls': 'stun:stun.services.mozilla.com' }, // public
-      // { 'urls': 'stun:stun.l.google.com:19302' } // public
+//       // { 'urls': 'stun:stun.l.google.com:19302' } // public
-      { 'urls': 'dev.linx.safemobile.com:19302' }
+//       // { 'urls': 'dev.linx.safemobile.com:19302' },
-  ]
+//       // {
-}
+//       //   urls: 'turn:dev.linx.safemobile.com:19302',
+//       //   username: "safemobile",
+//       //   credential: "Safemobile123"
+//       // }
+//       // , 
+//       {
+//         urls: 'turn:numb.viagenie.ca',
+//         username: "webrtc@live.com",
+//         credential: "muazkh"
+//       }
+//   ]
+// }
 
 let localVideo = document.getElementById("localVideo");
 let remoteVideo = document.getElementById("remoteVideo");
@@ -37,7 +48,11 @@ class App extends Component {
       dest_asset_id: '',
       isCaller: false,
       callId: null,
-      rtcPeerConnection: null
+      rtcPeerConnection: null,
+      stunUrl: 'stun:dev.linx.safemobile.com:19302',
+      turnUrl: 'turn:dev.linx.safemobile.com:19302',
+      turnUsername: 'safemobile',
+      turnCredential: 'Safemobile123'
     };
   }
 
@@ -48,6 +63,7 @@ class App extends Component {
 
   handleLoginClick = async () => {
     const loginRequest = await fetch('https://dev.linx.safemobile.com/api/login', {
+      // const loginRequest = await fetch('http://localhost:41418/login', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -60,6 +76,7 @@ class App extends Component {
     const loginResponseJson = await loginRequest.json();
     this.setState({ user: loginResponseJson.data }, () => {
       // Connect to HUB
+      // this.setState({ socket: io("localhost:41414", {reconnect:true, transports: ['websocket']}) }, () => {
       this.setState({ socket: io("https://hub.dev.linx.safemobile.com/", {reconnect:true, transports: ['websocket']}) }, () => {
         const socket = this.state.socket;
         socket.on('connect', () => {
@@ -112,8 +129,9 @@ class App extends Component {
               console.log('Created getUserMedia', stream);
               localStream = stream;
               localVideo.srcObject = stream;
+              console.log('iceServers', this.calculateIceServers())
               // Create SDP
-              this.setState({ rtcPeerConnection: new RTCPeerConnection(iceServer) }, () => {
+              this.setState({ rtcPeerConnection: new RTCPeerConnection(this.calculateIceServers()) }, () => {
                 this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate;
                 this.state.rtcPeerConnection.ontrack = this.onAddStream;
                 this.state.rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream); // video
@@ -150,8 +168,9 @@ class App extends Component {
                 console.log('Created getUserMedia', stream);
                 localStream = stream;
                 localVideo.srcObject = stream;
+                console.log('iceServers', this.calculateIceServers())
                 // Create SDP
-                this.setState({ rtcPeerConnection: new RTCPeerConnection(iceServer) }, () => {
+                this.setState({ rtcPeerConnection: new RTCPeerConnection(this.calculateIceServers()) }, () => {
                   this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate;
                   this.state.rtcPeerConnection.ontrack = this.onAddStream;
                   this.state.rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream); // video
@@ -199,6 +218,20 @@ class App extends Component {
     })
   }
 
+  calculateIceServers = () => {
+    return {
+      'iceServer': [
+        { 
+          'urls': this.state.stunUrl
+        }, {
+          urls: this.state.turnUrl,
+          username: this.state.turnUsername,
+          credential: this.state.turnCredential
+        }
+      ]
+    }
+  }
+
   onAddStream = (event) => {
       console.log('onAddStream', event);
       remoteVideo.srcObject = event.streams[0];
@@ -230,6 +263,22 @@ class App extends Component {
     this.setState({ dest_asset_id: e.target.value});
   }
 
+  handleChangeStunUrl = (e) => {
+    this.setState({ stunUrl: e.target.value});
+  }
+  
+  handleChangeTurnUrl = (e) => {
+    this.setState({ turnUrl: e.target.value});
+  }
+
+  handleChangeTurnUsername = (e) => {
+    this.setState({ turnUsername: e.target.value});
+  }
+
+  handleChangeTurnCredential = (e) => {
+    this.setState({ turnCredential: e.target.value});
+  }
+
   handleClickEvent = () => {
     this.state.socket.emit('video', JSON.stringify({
       origin_asset_id: this.state.user.asset.id,
@@ -260,23 +309,72 @@ class App extends Component {
   }
 
   render() {
-    const { login, password, user, hubStatus, arsSent, dest_asset_id, isCaller, callId } = { ...this.state };
+    const { login, password, user, hubStatus, arsSent, dest_asset_id, isCaller, callId, stunUrl, turnUrl, turnUsername, turnCredential } = { ...this.state };
     return (
       <div className="App">
+
         <h1>HUB TESTER</h1>
+
+        <br></br>
+
+        <h2><u>STUN and TURN servers</u></h2>
+        
+        STUN Server URL :
+        <input
+          placeholder='ex:    stun:stun.services.mozilla.com'
+          onChange={this.handleChangeStunUrl}
+          value={stunUrl}
+          style={{ margin: 10, width: 250 }}
+        /><br></br>
+
+        TURN Server URL :
+        <input
+          placeholder='ex:    turn:numb.viagenie.ca'
+          onChange={this.handleChangeTurnUrl}
+          value={turnUrl}
+          style={{ margin: 10, width: 250 }}
+        /><br></br>
+        
+        TURN Server Username :
+        <input
+          placeholder='ex:    gigel'
+          onChange={this.handleChangeTurnUsername}
+          value={turnUsername}
+          style={{ margin: 10, width: 250 }}
+        /><br></br>
+
+        TURN Server Credential :
+        <input
+          placeholder='ex:    superGiGi'
+          onChange={this.handleChangeTurnCredential}
+          value={turnCredential}
+          style={{ margin: 10, width: 250 }}
+        />
+
+        <br></br><br></br>
+
+        <h2><u>Login</u></h2>
+
+        Username :
         <input
           placeholder='user'
           onChange={this.handleChangeLogin}
           value={login}
-        />
+          style={{ margin: 10, width: 250 }}
+        /><br></br>
+
+        Password :
         <input
           placeholder='password'
           onChange={this.handleChangePassword}
           value={password}
-        />
+          style={{ margin: 10, width: 250 }}
-        <button onClick={this.handleLoginClick}>LOGIN</button>
+        /><br></br>
+
+        <button onClick={this.handleLoginClick} style={{ margin: 10, width: 100 }}>LOGIN</button>
 
         <br></br>
+
         <h2><u>isCaller:</u> {isCaller ? 'TRUE' : 'FALSE'}</h2>
         <h2><u>User details:</u></h2>
         {
@@ -290,9 +388,7 @@ class App extends Component {
           )
         }
 
-        <h2>
+        <h2><u>HUB</u></h2>
-          <u>HUB</u>
-        </h2>
 
         <h4>status: {(hubStatus === 0 ? 'uninitialized' : hubStatus === 1 ? 'connecting' : hubStatus === 2 ? 'connected' : 'connection error' )}</h4>
         <h4>ARS Sent: {arsSent === true ? 'TRUE' : 'FALSE'}</h4>