react-videocall icon indicating copy to clipboard operation
react-videocall copied to clipboard

not working when deployed in AWS

Open gowthamyaal opened this issue 6 years ago • 5 comments

image

the above image is captured while working in AWS, and the peer screens are not sharing... the below image is captured while working in local environment and is working perfectly. where i am wrong, Thanks in advance image

gowthamyaal avatar Aug 11 '18 08:08 gowthamyaal

To summarize:

  1. You can access the app so it was deployed successfully.
  2. The server give you an ID so the socket works.
  3. Video doesn't work

So it means something is wrong with the client side not server side, I guess.

nguymin4 avatar Aug 11 '18 09:08 nguymin4

yes, but i don't know what to do, its working perfectly in local, here is my client code.

[](import React, { Component } from 'react'; import { render } from 'react-dom'; import _ from 'lodash'; import socket from './socket'; //import io from 'socket.io-client'; import PeerConnection from './PeerConnection'; import MainWindow from './MainWindow'; import CallWindow from './CallWindow'; import CallModal from './CallModal'; class App extends Component { constructor(props) { super(props); this.state = { clientId: '', callWindow: '', callModal: '', callFrom: '', localSrc: null, peerSrc: null }; this.pc = {}; this.config = null; this.startCallHandler = this.startCall.bind(this); this.endCallHandler = this.endCall.bind(this); this.rejectCallHandler = this.rejectCall.bind(this); }

getUrlVars(){ var vars = {}; var parts = window.location.href.replace( /[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) { vars[key] = value; } ); return vars; }; componentWillMount() { var id=this.getUrlVars()["id"];

  return fetch("http://192.168.1.13:5000/id", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json"
      },
      body: JSON.stringify({
        id:id
      })
    })
      .then(response => response.json())
      .then(res => {
		    if(res.msg==="true")
		  {

 		  socket
  .on('init', data => {
	 
	   		  this.setState({ clientId: data.id })})
  .on('request', data => this.setState({ callModal: 'active', callFrom: data.from }))
  .on('call', (data) => {
    if (data.sdp) {
      this.pc.setRemoteDescription(data.sdp);
      if (data.sdp.type === 'offer') this.pc.createAnswer();
    } else this.pc.addIceCandidate(data.candidate);
  })
  .on('end', this.endCall.bind(this, false))
  .emit('init');
	  } 
		  } );

}

startCall(isCaller, friendID, config) { this.config = config; console.log(isCaller,friendID,config) this.pc = new PeerConnection(friendID) .on('localStream', (src) => { const newState = { callWindow: 'active', localSrc: src }; if (!isCaller) newState.callModal = ''; this.setState(newState); }) .on('peerStream', src => this.setState({ peerSrc: src })) .start(isCaller, config); }

rejectCall() { socket.emit('end', { to: this.state.callFrom }); this.setState({ callModal: '' }); }

endCall(isStarter) { if (_.isFunction(this.pc.stop)) this.pc.stop(isStarter); this.pc = {}; this.config = null; this.setState({ callWindow: '', localSrc: null, peerSrc: null }); }

render() {

return (
  <div >
    <MainWindow
      clientId={this.state.clientId}
      startCall={this.startCallHandler}
    />
    <CallWindow
      status={this.state.callWindow}
      localSrc={this.state.localSrc}
      peerSrc={this.state.peerSrc}
      config={this.config}
      mediaDevice={this.pc.mediaDevice}
      endCall={this.endCallHandler}
    />
    <CallModal
      status={this.state.callModal}
      startCall={this.startCallHandler}
      rejectCall={this.rejectCallHandler}
      callFrom={this.state.callFrom}
    />
  </div >
);

} }

render(<App />, document.getElementById('root')); )

gowthamyaal avatar Aug 13 '18 04:08 gowthamyaal

This is a security setting in aws and has to do with servers and proxy. hope it helps

joshuaaguilar20 avatar Dec 15 '18 23:12 joshuaaguilar20

You might need to use a TURN server as a ICE candidate.

wlans avatar May 09 '19 04:05 wlans

how I see in client parts ?

lubhub612 avatar Feb 15 '20 16:02 lubhub612