From ef7eaee602e93ea229a4ddf76eb900a456901ef9 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 20 Jan 2021 10:25:06 +0200 Subject: [PATCH] Added fields for stun/turn server --- package.json | 1 + src/App.js | 130 ++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 114 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 408cc31..c7fcaf9 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 09e7488..f2e706b 100644 --- a/src/App.js +++ b/src/App.js @@ -7,13 +7,24 @@ const io = require("socket.io-client"); let localStream = null; let remoteStream = null; -const iceServer = { - 'iceServer': [ - // { 'urls': 'stun:stun.services.mozilla.com' }, // public - // { 'urls': 'stun:stun.l.google.com:19302' } // public - { 'urls': 'dev.linx.safemobile.com:19302' } - ] -} +// const iceServer = { +// 'iceServer': [ +// // { 'urls': 'stun:stun.services.mozilla.com' }, // public +// // { 'urls': 'stun:stun.l.google.com:19302' } // public +// // { '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 (
+

HUB TESTER

+ +

+ +

STUN and TURN servers

+ + STUN Server URL : +

+ + TURN Server URL : +

+ + TURN Server Username : +

+ + TURN Server Credential : + + +



+ +

Login

+ + Username : + style={{ margin: 10, width: 250 }} + />

+ + Password : - + style={{ margin: 10, width: 250 }} + />

+ +

+

isCaller: {isCaller ? 'TRUE' : 'FALSE'}

User details:

{ @@ -290,9 +388,7 @@ class App extends Component { ) } -

- HUB -

+

HUB

status: {(hubStatus === 0 ? 'uninitialized' : hubStatus === 1 ? 'connecting' : hubStatus === 2 ? 'connected' : 'connection error' )}

ARS Sent: {arsSent === true ? 'TRUE' : 'FALSE'}