Update client
This commit is contained in:
164
src/App.js
164
src/App.js
@ -4,7 +4,7 @@ import './App.css';
|
||||
|
||||
const io = require("socket.io-client");
|
||||
|
||||
var socket, stream;
|
||||
var stream, pc;
|
||||
|
||||
// var config = {
|
||||
// iceServers: [{
|
||||
@ -101,8 +101,6 @@ var config = {
|
||||
// rtcpMuxPolicy:"negotiate"
|
||||
// }
|
||||
|
||||
var pc = new RTCPeerConnection(config)
|
||||
|
||||
let localStream, remoteStream
|
||||
|
||||
let localVideo = document.getElementById("localVideo");
|
||||
@ -137,6 +135,7 @@ class App extends Component {
|
||||
// setTimeout(() => {
|
||||
// windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures);
|
||||
// }, 500)
|
||||
pc = new RTCPeerConnection(config)
|
||||
stream = await navigator.mediaDevices.getUserMedia({video:true, audio:false})
|
||||
localStream = stream
|
||||
localVideo.srcObject = stream
|
||||
@ -144,6 +143,43 @@ class App extends Component {
|
||||
// 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
|
||||
// }));
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
onAddStream = (event) => {
|
||||
@ -167,11 +203,11 @@ class App extends Component {
|
||||
this.setState({ user: loginResponseJson.data }, () => {
|
||||
// Connect to HUB
|
||||
this.setState({ socket: io("https://hub.dev.linx.safemobile.com/", {reconnect:true, transports: ['websocket']}) }, () => {
|
||||
socket = this.state.socket;
|
||||
socket.on('connect', () => {
|
||||
// socket = this.state.socket;
|
||||
this.state.socket.on('connect', () => {
|
||||
this.setState({ hubStatus: 2 })
|
||||
// Send ARS after connected to HUB
|
||||
socket.emit('ars', JSON.stringify({
|
||||
this.state.socket.emit('ars', JSON.stringify({
|
||||
ars: true,
|
||||
asset_id: this.state.user.asset.id,
|
||||
account_id: this.state.user.account.id
|
||||
@ -180,27 +216,71 @@ class App extends Component {
|
||||
});
|
||||
|
||||
// HUB 'video' event handler
|
||||
socket.on('video', async (data) => {
|
||||
this.state.socket.on('video', async (data) => {
|
||||
|
||||
|
||||
const parseData = JSON.parse(data);
|
||||
console.log('[VIDEO]', parseData);
|
||||
|
||||
if(parseData.type === 'notify-request') {
|
||||
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) })
|
||||
console.log('NOTIFY-REQUEST');
|
||||
if(!this.state.callId) {
|
||||
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) })
|
||||
}
|
||||
// else {
|
||||
// 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: this.state.callId,
|
||||
// sdp: 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
|
||||
// }));
|
||||
// }
|
||||
}
|
||||
|
||||
if(parseData.type === 'notify-answer') {
|
||||
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') {
|
||||
@ -210,16 +290,26 @@ class App extends Component {
|
||||
} 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',
|
||||
}));
|
||||
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(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);
|
||||
@ -227,8 +317,10 @@ class App extends Component {
|
||||
console.log('parseData.candidate', parseData.candidate)
|
||||
pc.addIceCandidate(parseData.candidate).catch(e => {console.log(e)})
|
||||
}
|
||||
} else if (parseData.type === 'notify-end') {
|
||||
this.cleanVideoStreams();
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -261,7 +353,7 @@ class App extends Component {
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII3', this.state.callId);
|
||||
await pc.setLocalDescription(await pc.createOffer());
|
||||
// socket.emit('signal', {destination:remoteUser, data:pc.localDescription})
|
||||
socket.emit('video', JSON.stringify({
|
||||
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',
|
||||
@ -318,7 +410,6 @@ class App extends Component {
|
||||
}
|
||||
|
||||
handleClickEvent = () => {
|
||||
console.log('IIIIIIIIIIIIIIIIIIIIIIIII6', 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),
|
||||
@ -328,13 +419,6 @@ class App extends Component {
|
||||
origin_asset_name: this.state.user.name,
|
||||
video_call_id: this.state.callId
|
||||
}));
|
||||
// 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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user