Update client
This commit is contained in:
parent
831e52f0dc
commit
3f599fd979
92
src/App.js
92
src/App.js
@ -135,16 +135,17 @@ 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
|
||||
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 = 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({
|
||||
@ -223,47 +224,37 @@ class App extends Component {
|
||||
console.log('[VIDEO]', parseData);
|
||||
|
||||
if(parseData.type === 'notify-request') {
|
||||
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
|
||||
// }));
|
||||
// }
|
||||
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)
|
||||
@ -320,7 +311,7 @@ class App extends Component {
|
||||
} else if (parseData.type === 'notify-end') {
|
||||
this.cleanVideoStreams();
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -432,6 +423,13 @@ class App extends Component {
|
||||
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 };
|
||||
return (
|
||||
@ -516,7 +514,7 @@ class App extends Component {
|
||||
|
||||
<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}</h4>
|
||||
<h4>Call id: {callId && callId}</h4>
|
||||
|
||||
<br></br>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user