Added fields for stun/turn server

This commit is contained in:
Sergiu Toma 2021-01-20 10:25:06 +02:00
parent 7fc88198cb
commit ef7eaee602
2 changed files with 114 additions and 17 deletions

View File

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

View File

@ -7,13 +7,24 @@ const io = require("socket.io-client");
let localStream = null; let localStream = null;
let remoteStream = 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 localVideo = document.getElementById("localVideo");
let remoteVideo = document.getElementById("remoteVideo"); let remoteVideo = document.getElementById("remoteVideo");
@ -37,7 +48,11 @@ class App extends Component {
dest_asset_id: '', dest_asset_id: '',
isCaller: false, isCaller: false,
callId: null, 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 () => { handleLoginClick = async () => {
const loginRequest = await fetch('https://dev.linx.safemobile.com/api/login', { const loginRequest = await fetch('https://dev.linx.safemobile.com/api/login', {
// const loginRequest = await fetch('http://localhost:41418/login', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -60,6 +76,7 @@ class App extends Component {
const loginResponseJson = await loginRequest.json(); const loginResponseJson = await loginRequest.json();
this.setState({ user: loginResponseJson.data }, () => { this.setState({ user: loginResponseJson.data }, () => {
// Connect to HUB // 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']}) }, () => { this.setState({ socket: io("https://hub.dev.linx.safemobile.com/", {reconnect:true, transports: ['websocket']}) }, () => {
const socket = this.state.socket; const socket = this.state.socket;
socket.on('connect', () => { socket.on('connect', () => {
@ -112,8 +129,9 @@ class App extends Component {
console.log('Created getUserMedia', stream); console.log('Created getUserMedia', stream);
localStream = stream; localStream = stream;
localVideo.srcObject = stream; localVideo.srcObject = stream;
console.log('iceServers', this.calculateIceServers())
// Create SDP // Create SDP
this.setState({ rtcPeerConnection: new RTCPeerConnection(iceServer) }, () => { this.setState({ rtcPeerConnection: new RTCPeerConnection(this.calculateIceServers()) }, () => {
this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate; this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate;
this.state.rtcPeerConnection.ontrack = this.onAddStream; this.state.rtcPeerConnection.ontrack = this.onAddStream;
this.state.rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream); // video this.state.rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream); // video
@ -150,8 +168,9 @@ class App extends Component {
console.log('Created getUserMedia', stream); console.log('Created getUserMedia', stream);
localStream = stream; localStream = stream;
localVideo.srcObject = stream; localVideo.srcObject = stream;
console.log('iceServers', this.calculateIceServers())
// Create SDP // Create SDP
this.setState({ rtcPeerConnection: new RTCPeerConnection(iceServer) }, () => { this.setState({ rtcPeerConnection: new RTCPeerConnection(this.calculateIceServers()) }, () => {
this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate; this.state.rtcPeerConnection.onicecandidate = this.onIceCandidate;
this.state.rtcPeerConnection.ontrack = this.onAddStream; this.state.rtcPeerConnection.ontrack = this.onAddStream;
this.state.rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream); // video 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) => { onAddStream = (event) => {
console.log('onAddStream', event); console.log('onAddStream', event);
remoteVideo.srcObject = event.streams[0]; remoteVideo.srcObject = event.streams[0];
@ -230,6 +263,22 @@ class App extends Component {
this.setState({ dest_asset_id: e.target.value}); 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 = () => { handleClickEvent = () => {
this.state.socket.emit('video', JSON.stringify({ this.state.socket.emit('video', JSON.stringify({
origin_asset_id: this.state.user.asset.id, origin_asset_id: this.state.user.asset.id,
@ -260,23 +309,72 @@ class App extends Component {
} }
render() { 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 ( return (
<div className="App"> <div className="App">
<h1>HUB TESTER</h1> <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 <input
placeholder='user' placeholder='user'
onChange={this.handleChangeLogin} onChange={this.handleChangeLogin}
value={login} value={login}
/> style={{ margin: 10, width: 250 }}
/><br></br>
Password :
<input <input
placeholder='password' placeholder='password'
onChange={this.handleChangePassword} onChange={this.handleChangePassword}
value={password} 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> <br></br>
<h2><u>isCaller:</u> {isCaller ? 'TRUE' : 'FALSE'}</h2> <h2><u>isCaller:</u> {isCaller ? 'TRUE' : 'FALSE'}</h2>
<h2><u>User details:</u></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>status: {(hubStatus === 0 ? 'uninitialized' : hubStatus === 1 ? 'connecting' : hubStatus === 2 ? 'connected' : 'connection error' )}</h4>
<h4>ARS Sent: {arsSent === true ? 'TRUE' : 'FALSE'}</h4> <h4>ARS Sent: {arsSent === true ? 'TRUE' : 'FALSE'}</h4>