Adding listener on root to navigate to video

[moficodes]

This question is similar to #55

In my app router I have

  ConnectyCube.videochat.onCallListener = function (session, extension) {
    console.log('listener trying to work');
    console.log('INCOMING CALL: ', session);
    console.log('INCOMING CALL: ', extension);
    navigation.navigate('VideoScreen', {
      session: session,
      extension: extension,
      isVideoCall: true,
      opponentsIds: [session.currentUserID],
    });
  };

To setup a listener to navigate to VideoScreen (same as one from example) and set session to router params.

This works fine and navigates to VideoScreen. and in video screen constructor i have

constructor(props) {
    super(props);

    const {route} = this.props;
    this._session = null;
    this.opponentsIds = route.params.opponentsIds;

    this.state = {
      localStream: null,
      remoteStreams: [],
      selectedUsersIds: [],
      isActiveSelect: true,
      isActiveCall: false,
      isIncomingCall: false,
    };

    if (route.params.session) {
      this._onCallListener(route.params.session, route.params.extension);
    }

    this._setUpListeners();

    this.listener = ConnectyCube.videochat.onCallListener;
  }

Which callse the _onCallListener with the session and extension. This starts the call fine. But the person who gets called does not see the video of person calling.

I the other issue there was a comment about using react-redux. I am having a hard time understanding how to set this up.

Any guidance and/or code example is greatly appreciated.

[moficodes]

@ccvlad

[ccvlad]

@moficodes

Did you setup ConnectyCube.videochat.onRemoteStreamListener? After receive and accept a call you will receive a remote stream in the ConnectyCube.videochat.onRemoteStreamListener. You can find it in our docs.

Using react-redux, react state/props, hooks etc. these are developer preferences. First of all you have to create ConnectyCube session to use ConnectyCube API then connect to chat to enable call's signaling via chat and init videochat's listeners to receive call's data.

1. Try to get a call and go to the VideoScreen as you've described above then setup onRemoteStreamListener in the VideoScreen component, so you would get remote stream inside the component.

2. You also can connect react-redux storage in the VideoScreen and obtain remote stream as incoming props. By this way you are able to initialise videochat's listeners were you want (eg. in root component or some service) then just dispatch data (remote streams) to redux store inside the onRemoteStreamListener.

3. Also it is possible to use the EventEmitter to create event and pass remote stream as data. Subscribe to the event via addEventListener method to listen the event and get data with it inside the VideoScreen component.

[moficodes]

thanks