update web client
This commit is contained in:
parent
bbc19ad9ec
commit
09be2806cc
|
|
@ -29,6 +29,17 @@
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
||||||
|
<!-- <div class="text-center" id="videoCard">
|
||||||
|
<span id="receivedMessage"></span>
|
||||||
|
<video width="100%"id="videoStream"></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="floatingCam">
|
||||||
|
<div id="floatingCamheader">LIVE</div>
|
||||||
|
<video id="myCamera" width="100%"></video>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
LOCAL VIDEO<video id="localVideo" autoplay></video>
|
LOCAL VIDEO<video id="localVideo" autoplay></video>
|
||||||
<br></br>
|
<br></br>
|
||||||
REMOTE VIDEO<video id="remoteVideo" autoplay></video>
|
REMOTE VIDEO<video id="remoteVideo" autoplay></video>
|
||||||
|
|
|
||||||
372
src/App.js
372
src/App.js
|
|
@ -4,53 +4,44 @@ import './App.css';
|
||||||
|
|
||||||
const io = require("socket.io-client");
|
const io = require("socket.io-client");
|
||||||
|
|
||||||
let localStream = new MediaStream();
|
var socket, stream;
|
||||||
let remoteStream = new MediaStream();
|
|
||||||
|
|
||||||
let rtcPeerConnection = null;
|
var config = {
|
||||||
// let navigator = null;
|
iceServers: [{
|
||||||
|
urls: [ "stun:dev.linx.safemobil.com:3478" ]
|
||||||
|
}, {
|
||||||
|
username: "sergiu ",
|
||||||
|
credential: "test123",
|
||||||
|
urls: [
|
||||||
|
"turn:dev.linx.safemobil.com:3478"
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
//FOR CHROME
|
||||||
|
rtcpMuxPolicy:"negotiate"
|
||||||
|
}
|
||||||
|
|
||||||
|
// var config = {
|
||||||
|
// iceServers: [{
|
||||||
|
// urls: [ "stun:numb.viagenie.ca" ]
|
||||||
|
// }, {
|
||||||
|
// username: "claudiustancu@outlook.com",
|
||||||
|
// credential: "Parola123",
|
||||||
|
// urls: [
|
||||||
|
// "turn:numb.viagenie.ca"
|
||||||
|
// ]
|
||||||
|
// }],
|
||||||
|
|
||||||
|
// //FOR CHROME
|
||||||
|
// rtcpMuxPolicy:"negotiate"
|
||||||
|
// }
|
||||||
|
|
||||||
|
var pc = new RTCPeerConnection(config)
|
||||||
|
|
||||||
|
let localStream, remoteStream
|
||||||
|
|
||||||
let localVideo = document.getElementById("localVideo");
|
let localVideo = document.getElementById("localVideo");
|
||||||
let remoteVideo = document.getElementById("remoteVideo");
|
let remoteVideo = document.getElementById("remoteVideo");
|
||||||
|
|
||||||
// var windowObjectReference;
|
|
||||||
// var popupUrl = "file:///C:/projects/safemobile/hub-test/src/PopupWindow.html";
|
|
||||||
var socket;
|
|
||||||
|
|
||||||
(() => {
|
|
||||||
setInterval(() => {
|
|
||||||
// if(rtcPeerConnection != null) { console.log('1'); }
|
|
||||||
// if(rtcPeerConnection && rtcPeerConnection.hasOwnProperty('signalingState')) { console.log('[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[2'); }
|
|
||||||
// if(rtcPeerConnection && rtcPeerConnection.hasOwnProperty('signalingState')) {
|
|
||||||
if(rtcPeerConnection !== null) {
|
|
||||||
|
|
||||||
console.log('[--------------STATE------------]', rtcPeerConnection.signalingState)
|
|
||||||
}
|
|
||||||
// }
|
|
||||||
}, 100)
|
|
||||||
})()
|
|
||||||
|
|
||||||
|
|
||||||
// rtcPeerConnection.setConfiguration(
|
|
||||||
// { iceServers: [{
|
|
||||||
// urls: "turn:dev.linx.safemobile.com:19302",
|
|
||||||
// username: "sergiu",
|
|
||||||
// credential: "test123"
|
|
||||||
// }]
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
// ({iceRestart: true}) // offer
|
|
||||||
|
|
||||||
// rtcPeerConnection.addTrack(localStream.getTracks()[1], localStream) // audio
|
|
||||||
|
|
||||||
// "urls": "turn:dev.linx.safemobile.com:19302?transport=udp",
|
|
||||||
|
|
||||||
const streamConstraints = {
|
|
||||||
audio: false,
|
|
||||||
video: true
|
|
||||||
};
|
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
@ -62,7 +53,7 @@ class App extends Component {
|
||||||
hubStatus: 0, // 0 uninitialized | 1 connecting | 2 connected | 3 connection error
|
hubStatus: 0, // 0 uninitialized | 1 connecting | 2 connected | 3 connection error
|
||||||
socket: null,
|
socket: null,
|
||||||
arsSent: false,
|
arsSent: false,
|
||||||
dest_asset_id: '66',
|
dest_asset_id: '1',
|
||||||
isCaller: false,
|
isCaller: false,
|
||||||
callId: null,
|
callId: null,
|
||||||
// rtcPeerConnection: null,
|
// rtcPeerConnection: null,
|
||||||
|
|
@ -73,18 +64,30 @@ class App extends Component {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount= async () => {
|
||||||
// var windowObjectReference;
|
// var windowObjectReference;
|
||||||
// var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
|
// var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
|
||||||
// console.log('11111');
|
// console.log('11111');
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures);
|
// windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures);
|
||||||
// }, 500)
|
// }, 500)
|
||||||
|
stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false})
|
||||||
|
localStream = stream
|
||||||
|
localVideo.srcObject = stream
|
||||||
|
pc.ontrack = this.onAddStream;
|
||||||
|
// pc.addTrack(localStream.getTracks()[0], localStream);
|
||||||
|
pc.addTrack(localStream.getTracks()[0], localStream)
|
||||||
|
// pc.addTrack(localStream.getTracks()[1], localStream)
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddStream = (event) => {
|
||||||
|
console.log('onAddStream', event);
|
||||||
|
remoteVideo.srcObject = event.streams[0]
|
||||||
|
remoteStream = event.streams[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
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'
|
||||||
|
|
@ -97,7 +100,6 @@ 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']}) }, () => {
|
||||||
socket = this.state.socket;
|
socket = this.state.socket;
|
||||||
socket.on('connect', () => {
|
socket.on('connect', () => {
|
||||||
|
|
@ -109,154 +111,56 @@ class App extends Component {
|
||||||
account_id: this.state.user.account.id
|
account_id: this.state.user.account.id
|
||||||
}));
|
}));
|
||||||
this.setState({ arsSent: true });
|
this.setState({ arsSent: true });
|
||||||
|
|
||||||
// var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=false,resizable=yes,titlebar=false,width=640,height=640";
|
|
||||||
// // setTimeout(() => {
|
|
||||||
// window.socket = socket;
|
|
||||||
// windowObjectReference = window.open(popupUrl, "TEST", windowFeatures);
|
|
||||||
|
|
||||||
|
|
||||||
// windowObjectReference.addEventListener("message", (event) => {
|
|
||||||
// console.log('[WINDOW] event', event)
|
|
||||||
// console.log('[WINDOW] event.source.opener', event.source.opener.socket);
|
|
||||||
|
|
||||||
// event.source.opener.socket.emit('ars', JSON.stringify({
|
|
||||||
// ars: true,
|
|
||||||
// asset_id: this.state.user.asset.id,
|
|
||||||
// account_id: this.state.user.account.id
|
|
||||||
// }));
|
|
||||||
|
|
||||||
// // console.log('B', B);
|
|
||||||
// }, false);
|
|
||||||
|
|
||||||
// windowObjectReference.document.close();
|
|
||||||
// windowObjectReference.focus();
|
|
||||||
|
|
||||||
// windowObjectReference.postMessage('[WINDOW] messageeeeeeeeeeeeee', popupUrl)
|
|
||||||
|
|
||||||
// }, 2000)
|
|
||||||
|
|
||||||
// window.addEventListener("message", (event) => {
|
|
||||||
// console.log('[MAIN] event', event)
|
|
||||||
// // Do we trust the sender of this message? (might be
|
|
||||||
// // different from what we originally opened, for example).
|
|
||||||
// if (event.origin !== popupUrl)
|
|
||||||
// return;
|
|
||||||
|
|
||||||
// // event.source.postMessage("hi there yourself! the secret response " + "is: rheeeeet!", event.origin);
|
|
||||||
|
|
||||||
// // event.source is popup
|
|
||||||
// // event.data is "hi there yourself! the secret response is: rheeeeet!"
|
|
||||||
// }, false);
|
|
||||||
|
|
||||||
|
|
||||||
// window.postMessage("hello there!", popupUrl);
|
|
||||||
|
|
||||||
console.log('111111111111111')
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// HUB 'video' event handler
|
// HUB 'video' event handler
|
||||||
socket.on('video', (data) => {
|
socket.on('video', async (data) => {
|
||||||
const parseDate = JSON.parse(data);
|
|
||||||
console.log('[VIDEO]', parseDate);
|
|
||||||
if(parseDate.type === 'notify-request') {
|
|
||||||
// console.error('11111111 navigator', navigator);
|
|
||||||
navigator.mediaDevices.getUserMedia(streamConstraints)
|
|
||||||
.then(stream => {
|
|
||||||
localStream = stream
|
|
||||||
localVideo.srcObject = stream
|
|
||||||
this.setState({ dest_asset_id: parseInt(parseDate.origin_asset_id), callId: parseInt(parseDate.video_call_id) });
|
|
||||||
socket.emit('video', JSON.stringify({
|
|
||||||
origin_asset_id: this.state.user.asset.id,
|
|
||||||
dest_asset_id: parseInt(parseDate.origin_asset_id),
|
|
||||||
type: 'notify-answer',
|
|
||||||
origin_asset_priority: this.state.user.asset.priority,
|
|
||||||
origin_asset_type_name: this.state.user.user_role.name,
|
|
||||||
origin_asset_name: this.state.user.name,
|
|
||||||
video_call_id: parseDate.video_call_id,
|
|
||||||
answer: 'accepted' // answer: 'rejected'
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log('An error occured', err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handler for 'notify-end'(when the video closed)
|
|
||||||
if(parseDate.type === 'notify-end') {
|
|
||||||
console.log('notify-end');
|
|
||||||
this.cleanVideoStreams();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handler for 'notify-answer'
|
const parseData = JSON.parse(data);
|
||||||
if(parseDate.type === 'notify-answer') {
|
console.log('[VIDEO]', parseData);
|
||||||
if(parseDate.answer === 'rejected') {
|
|
||||||
this.closeVideo()
|
if(parseData.type === 'notify-request') {
|
||||||
return
|
await pc.setLocalDescription(await pc.createOffer())
|
||||||
} else if(parseDate.answer === 'accepted') {
|
socket.emit('video', JSON.stringify({
|
||||||
navigator.mediaDevices.getUserMedia(streamConstraints).then(stream => {
|
origin_asset_id: this.state.user.asset.id,
|
||||||
localStream = stream;
|
dest_asset_id: parseInt(parseData.origin_asset_id),
|
||||||
localVideo.srcObject = stream;
|
type: 'offer',
|
||||||
rtcPeerConnection = new RTCPeerConnection(this.calculateIceServers());
|
origin_asset_priority: this.state.user.asset.priority,
|
||||||
|
origin_asset_type_name: this.state.user.user_role.name,
|
||||||
rtcPeerConnection.onicecandidate = this.onIceCandidate;
|
origin_asset_name: this.state.user.asset.name,
|
||||||
rtcPeerConnection.ontrack = this.onAddStream;
|
video_call_id: parseData.video_call_id,
|
||||||
rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream);
|
answer: 'accepted', // answer: 'rejected'
|
||||||
rtcPeerConnection.createOffer()
|
sdp: pc.localDescription
|
||||||
.then(async (sessionDescription) => {
|
}));
|
||||||
await rtcPeerConnection.setLocalDescription(sessionDescription);
|
this.setState({ callId: parseInt(parseData.video_call_id), dest_asset_id: parseInt(parseData.origin_asset_id) })
|
||||||
socket.emit('video', JSON.stringify({
|
}
|
||||||
origin_asset_id: this.state.user.asset.id,
|
else if(parseData.type === 'offer') {
|
||||||
type: 'offer',
|
if(parseData.sdp.type === 'offer') {
|
||||||
sdp: sessionDescription,
|
console.log('[OFFER]');
|
||||||
|
this.setState({ callId: parseInt(parseData.video_call_id) })
|
||||||
|
this.offerReceived(parseData)
|
||||||
|
} else if(parseData.sdp.type === 'answer') {
|
||||||
|
console.log('[ANSWER]');
|
||||||
|
await pc.setRemoteDescription(parseData.sdp)
|
||||||
|
pc.onicecandidate = ({candidate}) => {
|
||||||
|
console.log('candidate1', candidate);
|
||||||
|
this.state.socket.emit('video', JSON.stringify({
|
||||||
|
type: 'candidate',
|
||||||
|
candidate,
|
||||||
dest_asset_id: parseInt(this.state.dest_asset_id),
|
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||||
video_call_id: parseDate.video_call_id
|
test: '222222222222'
|
||||||
}));
|
}));
|
||||||
this.setState({ isCaller: true, callId: parseInt(parseDate.video_call_id) })
|
}
|
||||||
})
|
}
|
||||||
.catch(e => { console.log('[-------------ERROR-------------]', e); })
|
} else if(parseData.type === 'candidate') {
|
||||||
})
|
console.log('candidate parseData', parseData);
|
||||||
.catch(err => {
|
if(parseData.candidate) {
|
||||||
console.log('An error occured', err);
|
console.log('parseData.candidate', parseData.candidate)
|
||||||
})
|
pc.addIceCandidate(parseData.candidate).catch(e => {console.log(e)})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handler for 'offer'
|
|
||||||
if(parseDate.type === 'offer') {
|
|
||||||
|
|
||||||
if(!this.state.isCaller) {
|
|
||||||
rtcPeerConnection = new RTCPeerConnection(this.calculateIceServers());
|
|
||||||
rtcPeerConnection.onicecandidate = this.onIceCandidate;
|
|
||||||
rtcPeerConnection.ontrack = this.onAddStream;
|
|
||||||
rtcPeerConnection.addTrack(localStream.getTracks()[0], localStream);
|
|
||||||
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(parseDate.sdp))
|
|
||||||
rtcPeerConnection.createAnswer()
|
|
||||||
.then(async (sessionDescription) => {
|
|
||||||
rtcPeerConnection.setLocalDescription(sessionDescription);
|
|
||||||
socket.emit('video', JSON.stringify({
|
|
||||||
origin_asset_id: this.state.user.asset.id,
|
|
||||||
type: 'offer',
|
|
||||||
sdp: sessionDescription,
|
|
||||||
dest_asset_id: parseInt(this.state.dest_asset_id),
|
|
||||||
video_call_id: parseDate.video_call_id
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch(e => { console.log('[-------------ERROR-------------]', e); })
|
|
||||||
} else {
|
|
||||||
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(parseDate.sdp));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(parseDate.type === 'candidate') {
|
|
||||||
if(rtcPeerConnection) {
|
|
||||||
const candidate = new RTCIceCandidate({
|
|
||||||
sdpMLineIndex: parseDate.label,
|
|
||||||
candidate: parseDate.candidate
|
|
||||||
});
|
|
||||||
rtcPeerConnection.addIceCandidate(candidate);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -264,41 +168,63 @@ class App extends Component {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateIceServers = () => {
|
offerReceived = async (offer) => {
|
||||||
const obj = {
|
|
||||||
"iceServers": [
|
|
||||||
{
|
|
||||||
"urls": this.state.stunUrl,
|
|
||||||
"username": "",
|
|
||||||
"credential": ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"urls": this.state.turnUrl,
|
|
||||||
"username": this.state.turnUsername,
|
|
||||||
"credential": this.state.turnCredential,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
console.log('calculateIceServers-----------------------', obj);
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
onAddStream = (event) => {
|
console.log('Received offer', offer)
|
||||||
remoteVideo.srcObject = event.streams[0];
|
|
||||||
remoteStream = event.streams[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
onIceCandidate = (event) => {
|
await pc.setRemoteDescription(offer.sdp)
|
||||||
if(event.candidate) {
|
|
||||||
console.log('sending ice candidate', event.candidate);
|
pc.onicecandidate = ({candidate}) => {
|
||||||
this.state.socket.emit('video', JSON.stringify({
|
this.state.socket.emit('video', JSON.stringify({
|
||||||
type: 'candidate',
|
type: 'candidate',
|
||||||
label: event.candidate.sdpMLineIndex,
|
candidate: candidate,
|
||||||
id: event.candidate.sdpMid,
|
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||||
candidate: event.candidate.candidate,
|
test: '1111111111'
|
||||||
dest_asset_id: this.state.dest_asset_id
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
await pc.setLocalDescription(await pc.createAnswer())
|
||||||
|
|
||||||
|
pc.onnegotiationneeded = async () => {
|
||||||
|
console.log('---------onnegotiationneeded--------');
|
||||||
|
try {
|
||||||
|
await pc.setLocalDescription(await pc.createOffer());
|
||||||
|
// socket.emit('signal', {destination:remoteUser, data:pc.localDescription})
|
||||||
|
socket.emit('video', JSON.stringify({
|
||||||
|
origin_asset_id: this.state.user.asset.id,
|
||||||
|
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||||
|
type: 'offer',
|
||||||
|
origin_asset_priority: this.state.user.asset.priority,
|
||||||
|
origin_asset_type_name: this.state.user.user_role.name,
|
||||||
|
origin_asset_name: this.state.user.asset.name,
|
||||||
|
video_call_id: this.state.callId,
|
||||||
|
sdp: pc.localDescription
|
||||||
}));
|
}));
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
console.log({
|
||||||
|
origin_asset_id: this.state.user.asset.id,
|
||||||
|
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||||
|
type: 'offer',
|
||||||
|
origin_asset_priority: this.state.user.asset.priority,
|
||||||
|
origin_asset_type_name: this.state.user.user_role.name,
|
||||||
|
origin_asset_name: this.state.user.asset.name,
|
||||||
|
video_call_id: null,
|
||||||
|
sdp: pc.localDescription
|
||||||
|
});
|
||||||
|
this.state.socket.emit('video', JSON.stringify({
|
||||||
|
origin_asset_id: this.state.user.asset.id,
|
||||||
|
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||||
|
type: 'offer',
|
||||||
|
origin_asset_priority: this.state.user.asset.priority,
|
||||||
|
origin_asset_type_name: this.state.user.user_role.name,
|
||||||
|
origin_asset_name: this.state.user.asset.name,
|
||||||
|
video_call_id: null,
|
||||||
|
sdp: pc.localDescription
|
||||||
|
}));
|
||||||
|
console.log('---------onnegotiationneeded END--------');
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChangeLogin = (e) => {
|
handleChangeLogin = (e) => {
|
||||||
|
|
@ -339,6 +265,13 @@ class App extends Component {
|
||||||
origin_asset_name: this.state.user.name,
|
origin_asset_name: this.state.user.name,
|
||||||
video_call_id: null
|
video_call_id: null
|
||||||
}));
|
}));
|
||||||
|
// var userToCall = document.getElementById('calluser').value
|
||||||
|
// remoteUser = userToCall
|
||||||
|
// document.getElementById('invitestatus').innerHTML = " INVITATIE TRIMISA"
|
||||||
|
// document.getElementById('loadingOverlay').style.display = "block"
|
||||||
|
// var x = document.getElementById('calluser');
|
||||||
|
// x.style.display = "none";
|
||||||
|
// socket.emit('call', userToCall)
|
||||||
}
|
}
|
||||||
|
|
||||||
closeVideo = () => {
|
closeVideo = () => {
|
||||||
|
|
@ -351,19 +284,12 @@ class App extends Component {
|
||||||
this.cleanVideoStreams();
|
this.cleanVideoStreams();
|
||||||
}
|
}
|
||||||
|
|
||||||
cleanVideoStreams = () => {
|
|
||||||
rtcPeerConnection != null && rtcPeerConnection.close();
|
|
||||||
// this.setState({ callId: null, rtcPeerConnection: null });
|
|
||||||
localVideo.srcObject = null;
|
|
||||||
remoteVideo.srcObject = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { login, password, user, hubStatus, arsSent, dest_asset_id, isCaller, callId, stunUrl, turnUrl, turnUsername, turnCredential } = { ...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>WebRTC Client 0.8</h1>
|
<h1>WebRTC Client 0.8 - {Math.random()}</h1>
|
||||||
<br></br>
|
<br></br>
|
||||||
|
|
||||||
<h2><u>STUN and TURN servers</u></h2>
|
<h2><u>STUN and TURN servers</u></h2>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue