diff --git a/.env b/.env index a43d6bb..41c8ff3 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -PORT=3001 \ No newline at end of file +PORT=3001 +GENERATE_SOURCEMAP=true \ No newline at end of file diff --git a/public/index.html b/public/index.html index cb86bad..9bd07e8 100644 --- a/public/index.html +++ b/public/index.html @@ -9,22 +9,8 @@ name="description" content="Web site created using create-react-app" /> - - - - - React App + + WebRTC Tester @@ -43,15 +29,6 @@ LOCAL VIDEO

REMOTE VIDEO - diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..75ab858 Binary files /dev/null and b/public/logo.png differ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/src/App.js b/src/App.js index cf93231..288e227 100644 --- a/src/App.js +++ b/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 = () => {