not working when deployed in AWS

[gowthamyaal]

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

[nguymin4]

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.

[gowthamyaal]

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(, document.getElementById('root')); )

[joshuaaguilar20]

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

[wlans]

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

[lubhub612]

how I see in client parts ?