Update video web client to support recreate the SDP if the retry event is sent; refactor and update client
This commit is contained in:
Sergiu Toma
parent
997bfdf77a
commit
c8d4739c0a
File diff suppressed because it is too large
Load Diff
755
src/App.js
755
src/App.js
|
|
@ -1,110 +1,15 @@
|
|||
import React, { Component } from 'react'
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './App.css';
|
||||
|
||||
const io = require("socket.io-client");
|
||||
const io = require('socket.io-client');
|
||||
|
||||
var stream, pc;
|
||||
let localStream;
|
||||
// let remoteStream;
|
||||
|
||||
// var config = {
|
||||
// iceServers: [{
|
||||
// //urls: [ "stun:numb.viagenie.ca"
|
||||
// urls: [ "stun:dev.linx.safemobile.com:19302" ]
|
||||
// }, {
|
||||
// //username: "claudiustancu@outlook.com",
|
||||
// username: "sergiu",
|
||||
// //credential: "Parola123",
|
||||
// credential: "test123",
|
||||
// urls: [
|
||||
// // "turn:numb.viagenie.ca"
|
||||
// "turn:dev.linx.safemobile.com:19302"
|
||||
// ]
|
||||
// }],
|
||||
// //FOR CHROME
|
||||
// rtcpMuxPolicy:"negotiate"
|
||||
// }
|
||||
|
||||
var config = {
|
||||
iceServers: [{
|
||||
urls: [ "stun:18.185.97.230:3478" ]
|
||||
}, {
|
||||
username: "sergiu",
|
||||
credential: "test123",
|
||||
urls: [
|
||||
"turn:18.185.97.230:3478"
|
||||
]
|
||||
}],
|
||||
//FOR CHROME
|
||||
rtcpMuxPolicy:"negotiate"
|
||||
}
|
||||
|
||||
// var config = {
|
||||
// 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 config = {
|
||||
// iceServers: [{
|
||||
// //urls: [ "stun:numb.viagenie.ca"
|
||||
// urls: [ "stun:dev.linx.safemobile.com" ]
|
||||
// }, {
|
||||
// //username: "claudiustancu@outlook.com",
|
||||
// username: "sergiu",
|
||||
// //credential: "Parola123",
|
||||
// credential: "test123",
|
||||
// urls: [
|
||||
// // "turn:numb.viagenie.ca"
|
||||
// "turn:dev.linx.safemobile.com"
|
||||
// ]
|
||||
// }],
|
||||
|
||||
// //FOR CHROME
|
||||
// rtcpMuxPolicy:"negotiate"
|
||||
// }
|
||||
|
||||
// var config = {
|
||||
// iceServers: [{
|
||||
// urls: [ "stun:18.194.53.12:3478" ]
|
||||
// }, {
|
||||
// username: "omulpaianjen",
|
||||
// credential: "peterparker",
|
||||
// urls: [
|
||||
// "turn:18.194.53.12:3478"
|
||||
// ]
|
||||
// }],
|
||||
|
||||
// //FOR CHROME
|
||||
// rtcpMuxPolicy:"negotiate"
|
||||
// }
|
||||
|
||||
let localStream, remoteStream
|
||||
|
||||
let localVideo = document.getElementById("localVideo");
|
||||
let remoteVideo = document.getElementById("remoteVideo");
|
||||
let localVideo = document.getElementById('localVideo');
|
||||
let remoteVideo = document.getElementById('remoteVideo');
|
||||
|
||||
class App extends Component {
|
||||
constructor() {
|
||||
|
|
@ -120,350 +25,364 @@ class App extends Component {
|
|||
dest_asset_id: '1',
|
||||
isCaller: false,
|
||||
callId: null,
|
||||
// rtcPeerConnection: null,
|
||||
stunUrl: 'stun:10.120.1.134:19302',
|
||||
turnUrl: 'turn:10.120.1.134:19302',
|
||||
stunUrl: 'stun:18.197.242.79:3478',
|
||||
turnUrl: 'turn:18.197.242.79:3478',
|
||||
turnUsername: 'sergiu',
|
||||
turnCredential: 'test123'
|
||||
turnCredential: 'test123',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount= async () => {
|
||||
// var windowObjectReference;
|
||||
// var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
|
||||
// console.log('11111');
|
||||
// setTimeout(() => {
|
||||
// windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures);
|
||||
// }, 500)
|
||||
stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false})
|
||||
localStream = stream
|
||||
localVideo.srcObject = stream
|
||||
|
||||
// pc = new RTCPeerConnection(config)
|
||||
// pc.ontrack = this.onAddStream;
|
||||
// // pc.addTrack(localStream.getTracks()[0], localStream);
|
||||
// pc.addTrack(localStream.getTracks()[0], localStream)
|
||||
// // pc.addTrack(localStream.getTracks()[1], localStream)
|
||||
// pc.oniceconnectionstatechange = this.onIceConnectionStateChange;
|
||||
// pc.onsignalingstatechange = this.onSignalingStateChange;
|
||||
// pc.onicecandidate = ({candidate}) => {
|
||||
// console.log('IIIIIIIIIIIIIIIIIIIIIIIII2', this.state.callId);
|
||||
// this.state.socket.emit('video', JSON.stringify({
|
||||
// type: 'candidate',
|
||||
// candidate: candidate,
|
||||
// dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||
// video_call_id: this.state.callId,
|
||||
// test: '1111111111'
|
||||
// }));
|
||||
// }
|
||||
}
|
||||
|
||||
onIceConnectionStateChange = (event) => {
|
||||
console.log('onIceConnectionStateChange', event);
|
||||
}
|
||||
|
||||
onSignalingStateChange = async ({currentTarget}) => {
|
||||
console.log('onSignalingStateChange', currentTarget);
|
||||
// if(currentTarget.connectionState === 'new') {
|
||||
// console.log('pc.localDescription', pc.localDescription);
|
||||
// if(pc.localDescription) {
|
||||
// console.log('SEND SDP onSignalingStateChange');
|
||||
// // await pc.setLocalDescription(await pc.createAnswer())
|
||||
// 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: this.state.callId,
|
||||
// sdp: pc.localDescription
|
||||
// }));
|
||||
// }
|
||||
// }
|
||||
}
|
||||
componentDidMount = async () => {
|
||||
console.log('🟢 START');
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: true,
|
||||
audio: false,
|
||||
});
|
||||
localStream = stream;
|
||||
localVideo.srcObject = stream;
|
||||
};
|
||||
|
||||
onAddStream = (event) => {
|
||||
console.log('onAddStream', event);
|
||||
remoteVideo.srcObject = event.streams[0]
|
||||
remoteStream = event.streams[0]
|
||||
}
|
||||
remoteVideo.srcObject = event.streams[0];
|
||||
// remoteStream = event.streams[0];
|
||||
};
|
||||
|
||||
videoConfig = () => {
|
||||
return {
|
||||
iceServers: [
|
||||
{
|
||||
urls: [this.state.stunUrl],
|
||||
},
|
||||
{
|
||||
username: this.state.turnUsername,
|
||||
credential: this.state.turnCredential,
|
||||
urls: [this.state.turnUrl],
|
||||
},
|
||||
],
|
||||
rtcpMuxPolicy: 'negotiate',
|
||||
};
|
||||
};
|
||||
|
||||
handleLoginClick = async () => {
|
||||
const loginRequest = await fetch('https://stage.linx.safemobile.com/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"login": this.state.login,
|
||||
"password": this.state.password
|
||||
})
|
||||
});
|
||||
const loginRequest = await fetch(
|
||||
'https://dev.linx.safemobile.com/api/login',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
login: this.state.login,
|
||||
password: this.state.password,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const loginResponseJson = await loginRequest.json();
|
||||
|
||||
this.setState({ user: loginResponseJson.data }, () => {
|
||||
// Connect to HUB
|
||||
this.setState({ socket: io("https://hub.stage.linx.safemobile.com/", {reconnect:true, transports: ['websocket']}) }, () => {
|
||||
// socket = this.state.socket;
|
||||
this.state.socket.on('connect', () => {
|
||||
this.setState({ hubStatus: 2 })
|
||||
// Send ARS after connected to HUB
|
||||
this.state.socket.emit('ars', JSON.stringify({
|
||||
ars: true,
|
||||
asset_id: this.state.user.asset.id,
|
||||
account_id: this.state.user.account.id
|
||||
}));
|
||||
this.setState({ arsSent: true });
|
||||
});
|
||||
this.setState(
|
||||
{
|
||||
socket: io('https://hub.dev.linx.safemobile.com/', {
|
||||
reconnect: true,
|
||||
transports: ['websocket'],
|
||||
}),
|
||||
},
|
||||
() => {
|
||||
this.state.socket.on('connect', () => {
|
||||
this.setState({ hubStatus: 2 });
|
||||
// Send ARS after connected to HUB
|
||||
this.state.socket.emit(
|
||||
'ars',
|
||||
JSON.stringify({
|
||||
ars: true,
|
||||
asset_id: this.state.user.asset.id,
|
||||
account_id: this.state.user.account.id,
|
||||
})
|
||||
);
|
||||
this.setState({ arsSent: true });
|
||||
});
|
||||
|
||||
// HUB 'video' event handler
|
||||
this.state.socket.on('video', async (data) => {
|
||||
// HUB 'video' event handler
|
||||
this.state.socket.on('video', async (data) => {
|
||||
const parseData = JSON.parse(data);
|
||||
console.log('[VIDEO]', parseData);
|
||||
|
||||
if (parseData.type === 'notify-request') {
|
||||
console.log('NOTIFY-REQUEST');
|
||||
|
||||
const parseData = JSON.parse(data);
|
||||
console.log('[VIDEO]', parseData);
|
||||
pc = new RTCPeerConnection(this.videoConfig());
|
||||
pc.ontrack = this.onAddStream;
|
||||
pc.addTrack(localStream.getTracks()[0], localStream);
|
||||
// pc.addTrack(localStream.getTracks()[1], localStream)
|
||||
pc.oniceconnectionstatechange = this.onIceConnectionStateChange;
|
||||
pc.onsignalingstatechange = this.onSignalingStateChange;
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
|
||||
if(parseData.type === 'notify-request') {
|
||||
pc = new RTCPeerConnection(config)
|
||||
pc.ontrack = this.onAddStream;
|
||||
// pc.addTrack(localStream.getTracks()[0], localStream);
|
||||
pc.addTrack(localStream.getTracks()[0], localStream)
|
||||
// pc.addTrack(localStream.getTracks()[1], localStream)
|
||||
pc.oniceconnectionstatechange = this.onIceConnectionStateChange;
|
||||
pc.onsignalingstatechange = this.onSignalingStateChange;
|
||||
console.log('NOTIFY-REQUEST');
|
||||
await pc.setLocalDescription(await pc.createOffer())
|
||||
this.state.socket.emit('video', JSON.stringify({
|
||||
origin_asset_id: this.state.user.asset.id,
|
||||
dest_asset_id: parseInt(parseData.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.asset.name,
|
||||
video_call_id: parseInt(parseData.video_call_id),
|
||||
answer: 'accepted', // answer: 'rejected'
|
||||
sdp: pc.localDescription
|
||||
}));
|
||||
this.setState({ callId: parseInt(parseData.video_call_id), dest_asset_id: parseInt(parseData.origin_asset_id) })
|
||||
}
|
||||
|
||||
if(parseData.type === 'notify-answer') {
|
||||
pc = new RTCPeerConnection(config)
|
||||
pc.ontrack = this.onAddStream;
|
||||
// pc.addTrack(localStream.getTracks()[0], localStream);
|
||||
pc.addTrack(localStream.getTracks()[0], localStream)
|
||||
// pc.addTrack(localStream.getTracks()[1], localStream)
|
||||
pc.oniceconnectionstatechange = this.onIceConnectionStateChange;
|
||||
pc.onsignalingstatechange = this.onSignalingStateChange;
|
||||
console.log('NOTIFY-ANSWER');
|
||||
this.setState({ callId: parseInt(parseData.video_call_id) })
|
||||
this.offerReceived(parseData)
|
||||
// await pc.setLocalDescription(await pc.createOffer())
|
||||
// console.log('IIIIIIIIIIIIIIIIIIIIIIIII', this.state.callId);
|
||||
// socket.emit('video', JSON.stringify({
|
||||
// origin_asset_id: this.state.user.asset.id,
|
||||
// dest_asset_id: parseInt(parseData.origin_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: parseInt(parseData.video_call_id),
|
||||
// answer: 'accepted', // answer: 'rejected'
|
||||
// sdp: pc.localDescription
|
||||
// }));
|
||||
// this.setState({ callId: parseInt(parseData.video_call_id), dest_asset_id: parseInt(parseData.origin_asset_id) })
|
||||
}
|
||||
else if(parseData.type === 'offer') {
|
||||
if(parseData.sdp.type === 'offer') {
|
||||
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),
|
||||
video_call_id: parseData.video_call_id,
|
||||
test: '222222222222',
|
||||
}));
|
||||
this.state.socket.emit(
|
||||
'video',
|
||||
JSON.stringify({
|
||||
origin_asset_id: this.state.user.asset.id,
|
||||
dest_asset_id: parseInt(parseData.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.asset.name,
|
||||
video_call_id: parseInt(parseData.video_call_id),
|
||||
answer: 'accepted', // answer: 'rejected'
|
||||
sdp: pc.localDescription,
|
||||
})
|
||||
);
|
||||
this.setState({
|
||||
callId: parseInt(parseData.video_call_id),
|
||||
dest_asset_id: parseInt(parseData.origin_asset_id),
|
||||
});
|
||||
}
|
||||
|
||||
if (parseData.type === 'notify-answer') {
|
||||
pc = new RTCPeerConnection(this.videoConfig());
|
||||
pc.ontrack = this.onAddStream;
|
||||
pc.addTrack(localStream.getTracks()[0], localStream);
|
||||
// pc.addTrack(localStream.getTracks()[1], localStream)
|
||||
pc.oniceconnectionstatechange = this.onIceConnectionStateChange;
|
||||
pc.onsignalingstatechange = this.onSignalingStateChange;
|
||||
console.log('NOTIFY-ANSWER');
|
||||
this.setState({ callId: parseInt(parseData.video_call_id) });
|
||||
this.offerReceived(parseData);
|
||||
} else if (parseData.type === 'offer') {
|
||||
if (parseData.sdp.type === 'offer') {
|
||||
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),
|
||||
video_call_id: parseData.video_call_id,
|
||||
})
|
||||
);
|
||||
};
|
||||
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: this.state.callId,
|
||||
sdp: pc.localDescription,
|
||||
})
|
||||
);
|
||||
}
|
||||
} else if (parseData.type === 'candidate') {
|
||||
console.log('candidate parseData', parseData);
|
||||
if (parseData.candidate) {
|
||||
console.log('parseData.candidate', parseData.candidate);
|
||||
pc.addIceCandidate(parseData.candidate).catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
} else if (parseData.type === 'notify-end') {
|
||||
this.cleanVideoStreams();
|
||||
} else if (parseData.type === 'retry') {
|
||||
if (parseData.description === 'sdp') {
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
this.state.socket.emit(
|
||||
'video',
|
||||
JSON.stringify({
|
||||
origin_asset_id: this.state.user.asset.id,
|
||||
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||
video_call_id: this.state.callId,
|
||||
type: 'retry',
|
||||
description: 'sdp',
|
||||
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: this.state.callId,
|
||||
sdp: pc.localDescription
|
||||
}));
|
||||
}
|
||||
} else if(parseData.type === 'candidate') {
|
||||
console.log('candidate parseData', parseData);
|
||||
if(parseData.candidate) {
|
||||
console.log('parseData.candidate', parseData.candidate)
|
||||
pc.addIceCandidate(parseData.candidate).catch(e => {console.log(e)})
|
||||
}
|
||||
} else if (parseData.type === 'notify-end') {
|
||||
this.cleanVideoStreams();
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
offerReceived = async (offer) => {
|
||||
console.log('------- offerReceived -------', offer);
|
||||
|
||||
console.log('Received offer', offer)
|
||||
await pc.setLocalDescription(await pc.createAnswer());
|
||||
await pc.setRemoteDescription(offer.sdp);
|
||||
|
||||
await pc.setRemoteDescription(offer.sdp)
|
||||
|
||||
pc.onicecandidate = ({candidate}) => {
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII2', this.state.callId);
|
||||
this.state.socket.emit('video', JSON.stringify({
|
||||
type: 'candidate',
|
||||
candidate: candidate,
|
||||
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||
video_call_id: this.state.callId,
|
||||
test: '1111111111'
|
||||
}));
|
||||
}
|
||||
|
||||
await pc.setLocalDescription(await pc.createAnswer())
|
||||
pc.onicecandidate = ({ candidate }) => {
|
||||
this.state.socket.emit(
|
||||
'video',
|
||||
JSON.stringify({
|
||||
type: 'candidate',
|
||||
candidate: candidate,
|
||||
dest_asset_id: parseInt(this.state.dest_asset_id),
|
||||
video_call_id: this.state.callId,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
pc.onnegotiationneeded = async () => {
|
||||
console.log('---------onnegotiationneeded--------');
|
||||
console.log('--------- onnegotiationneeded START --------');
|
||||
try {
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII3', this.state.callId);
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
// socket.emit('signal', {destination:remoteUser, data: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: this.state.callId,
|
||||
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: this.state.callId,
|
||||
sdp: pc.localDescription,
|
||||
})
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII4', this.state.callId);
|
||||
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: this.state.callId,
|
||||
sdp: pc.localDescription
|
||||
}));
|
||||
console.log('---------onnegotiationneeded END--------');
|
||||
}
|
||||
|
||||
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: this.state.callId,
|
||||
sdp: pc.localDescription,
|
||||
})
|
||||
);
|
||||
console.log('--------- onnegotiationneeded END --------');
|
||||
};
|
||||
|
||||
handleChangeLogin = (e) => {
|
||||
this.setState({ login: e.target.value});
|
||||
}
|
||||
this.setState({ login: e.target.value });
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
this.setState({ password: e.target.value});
|
||||
}
|
||||
this.setState({ password: e.target.value });
|
||||
};
|
||||
|
||||
handleChangeDestAssetId = (e) => {
|
||||
this.setState({ dest_asset_id: e.target.value});
|
||||
}
|
||||
this.setState({ dest_asset_id: e.target.value });
|
||||
};
|
||||
|
||||
handleChangeStunUrl = (e) => {
|
||||
this.setState({ stunUrl: e.target.value});
|
||||
}
|
||||
|
||||
this.setState({ stunUrl: e.target.value });
|
||||
};
|
||||
|
||||
handleChangeTurnUrl = (e) => {
|
||||
this.setState({ turnUrl: e.target.value});
|
||||
}
|
||||
this.setState({ turnUrl: e.target.value });
|
||||
};
|
||||
|
||||
handleChangeTurnUsername = (e) => {
|
||||
this.setState({ turnUsername: e.target.value});
|
||||
}
|
||||
this.setState({ turnUsername: e.target.value });
|
||||
};
|
||||
|
||||
handleChangeTurnCredential = (e) => {
|
||||
this.setState({ turnCredential: e.target.value});
|
||||
}
|
||||
this.setState({ turnCredential: e.target.value });
|
||||
};
|
||||
|
||||
handleClickEvent = () => {
|
||||
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: 'notify-request',
|
||||
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: this.state.callId
|
||||
}));
|
||||
}
|
||||
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: 'notify-request',
|
||||
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: this.state.callId,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
closeVideo = () => {
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII7', this.state.callId);
|
||||
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: 'notify-end',
|
||||
video_call_id: this.state.callId
|
||||
}));
|
||||
console.log('----- closeVideo -----', this.state.callId);
|
||||
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: 'notify-end',
|
||||
video_call_id: this.state.callId,
|
||||
})
|
||||
);
|
||||
this.cleanVideoStreams();
|
||||
}
|
||||
};
|
||||
|
||||
cleanVideoStreams = () => {
|
||||
this.setState({ dest_asset_id: '', callId: null });
|
||||
pc.close();
|
||||
// localVideo.srcObject = null;
|
||||
// remoteVideo.srcObject = null;
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="App">
|
||||
|
||||
<h1>WebRTC Client 0.2 - {Math.random()}</h1>
|
||||
<div className='App'>
|
||||
<h1>WebRTC DEV Client 0.3</h1>
|
||||
<br></br>
|
||||
|
||||
<h2><u>STUN and TURN servers</u></h2>
|
||||
|
||||
<h2>
|
||||
<u>STUN and TURN servers</u>
|
||||
</h2>
|
||||
STUN Server URL :
|
||||
<input
|
||||
placeholder='ex: stun:stun.services.mozilla.com'
|
||||
placeholder='ex: stun:stun.services.mozilla.com:3478'
|
||||
onChange={this.handleChangeStunUrl}
|
||||
value={stunUrl}
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/><br></br>
|
||||
|
||||
/>
|
||||
<br></br>
|
||||
TURN Server URL :
|
||||
<input
|
||||
placeholder='ex: turn:numb.viagenie.ca'
|
||||
placeholder='ex: turn:numb.viagenie.ca:3478'
|
||||
onChange={this.handleChangeTurnUrl}
|
||||
value={turnUrl}
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/><br></br>
|
||||
|
||||
/>
|
||||
<br></br>
|
||||
TURN Server Username :
|
||||
<input
|
||||
placeholder='ex: gigel'
|
||||
onChange={this.handleChangeTurnUsername}
|
||||
value={turnUsername}
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/><br></br>
|
||||
|
||||
/>
|
||||
<br></br>
|
||||
TURN Server Credential :
|
||||
<input
|
||||
placeholder='ex: superGiGi'
|
||||
|
|
@ -471,68 +390,88 @@ class App extends Component {
|
|||
value={turnCredential}
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/>
|
||||
|
||||
<br></br><br></br>
|
||||
|
||||
<h2><u>Login</u></h2>
|
||||
|
||||
<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>
|
||||
|
||||
/>
|
||||
<br></br>
|
||||
Password :
|
||||
<input
|
||||
placeholder='password'
|
||||
onChange={this.handleChangePassword}
|
||||
value={password}
|
||||
style={{ margin: 10, width: 250 }}
|
||||
/><br></br>
|
||||
|
||||
<button onClick={this.handleLoginClick} style={{ margin: 10, width: 100 }}>LOGIN</button>
|
||||
{/* <button onClick={this.testMessage} style={{ margin: 10, width: 200 }}>TEST MESSAGE</button> */}
|
||||
/>
|
||||
<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>
|
||||
{
|
||||
user && (
|
||||
<React.Fragment>
|
||||
<h4>account_id: {user.account.id}</h4>
|
||||
<h4>user_id: {user.id}</h4>
|
||||
<h4>asset_id: {user.asset.id}</h4>
|
||||
<h4>user_role: {user.user_role.name}</h4>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
<h2><u>HUB</u></h2>
|
||||
|
||||
<h4>status: {(hubStatus === 0 ? 'uninitialized' : hubStatus === 1 ? 'connecting' : hubStatus === 2 ? 'connected' : 'connection error' )}</h4>
|
||||
|
||||
<h2>
|
||||
<u>isCaller:</u> {isCaller ? 'TRUE' : 'FALSE'}
|
||||
</h2>
|
||||
<h2>
|
||||
<u>User details:</u>
|
||||
</h2>
|
||||
{user && (
|
||||
<React.Fragment>
|
||||
<h4>account_id: {user.account.id}</h4>
|
||||
<h4>user_id: {user.id}</h4>
|
||||
<h4>asset_id: {user.asset.id}</h4>
|
||||
<h4>user_role: {user.user_role.name}</h4>
|
||||
</React.Fragment>
|
||||
)}
|
||||
<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>
|
||||
<h4>Call id: {callId && callId}</h4>
|
||||
|
||||
<br></br>
|
||||
|
||||
<input
|
||||
placeholder='destination_asset_id'
|
||||
onChange={this.handleChangeDestAssetId}
|
||||
value={dest_asset_id}
|
||||
/>
|
||||
|
||||
<button onClick={this.handleClickEvent} disabled={dest_asset_id.length === 0 ? true : false}>Send `video` notify-request</button>
|
||||
|
||||
<button
|
||||
onClick={this.handleClickEvent}
|
||||
disabled={dest_asset_id.length === 0 ? true : false}
|
||||
>
|
||||
Send `video` notify-request
|
||||
</button>
|
||||
<br></br>
|
||||
|
||||
<button onClick={this.closeVideo} style={{ margin: 40}} disabled={callId !== null ? false : true}>Close Video</button>
|
||||
|
||||
<button
|
||||
onClick={this.closeVideo}
|
||||
style={{ margin: 40 }}
|
||||
disabled={callId !== null ? false : true}
|
||||
>
|
||||
Close Video
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
Loading…
Reference in New Issue