Added fields for stun/turn server
This commit is contained in:
parent
7fc88198cb
commit
ef7eaee602
|
|
@ -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",
|
||||
|
|
|
|||
130
src/App.js
130
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 (
|
||||
<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}
|
||||
/>
|
||||
<button onClick={this.handleLoginClick}>LOGIN</button>
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/><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>
|
||||
<u>HUB</u>
|
||||
</h2>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue