Added fields for stun/turn server
This commit is contained in:
parent
7fc88198cb
commit
ef7eaee602
@ -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",
|
||||||
|
130
src/App.js
130
src/App.js
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user