need to accept incoming call from any screen of the app

at the starting point of application we are using connectycube's onCallListener and when that listener gets called we are navigating to videoScreen with session and extension parameters which we get in onCallListener listener and after navigating to videoScreen we are checking in constructor whether session parameter is present and if it is present then calling VideoScreen's onCallListener method. also we are setting up all the listeners except onCallListener in constructor of VideoScreen as per the sample app. So the thing is now I am able to get call on any screen of my app and attend it but i cannot see video i.e. no remote streaming. I checked it and came to know that first time onRemoteStreamListener is not getting called but other listeners get called i.e. if I don't attend the call onStopCallListener gets called. and second time onRemoteStreamListener does get called but CallService.processOnRemoteStreamListener(userId) does not. can you please help me out in this because everything is working fine except video streaming..

from my app first screen we are getting call from listener and navigate to video screen below is my code for getting call and navigate:

ConnectyCube.videochat.onCallListener = function(session, extension) { const { navigation } = this.props navigation.navigate('VideoScreen', { session: session, extension: extension, isVideoCall: true }) };

and in video screen we have done code for this import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import ConnectyCube from 'react-native-connectycube'; import AwesomeAlert from 'react-native-awesome-alerts'; import RTCViewGrid from './RTCViewGrid'; import {CallService} from '../../../services'; import ToolBar from './ToolBar'; import UsersSelect from './UsersSelect'; import UsersService from '../../../services/users-service'

export default class VideoScreen extends React.Component { constructor(props) { super(props); this._setUpListeners();

this._session = null; this.opponentsIds = props.navigation.getParam('opponentsIds'); this.selectedUsersIds = props.navigation.getParam('selectedUsersIds'); this.isVideoCall = props.navigation.getParam('isVideoCall'); this.state = { localStream: null, remoteStreams: [], isActiveSelect: true, isActiveCall: false, isIncomingCall: false, };

if(this.props.navigation.getParam('session')) { this._onCallListener(this.props.navigation.getParam('session'), this.props.navigation.getParam('extension')) } }

componentWillUnmount() { CallService.stopCall(); // AuthService.logout(); }

componentDidUpdate(prevProps, prevState) { const currState = this.state;

if ( prevState.remoteStreams.length === 1 && currState.remoteStreams.length === 0 ) { CallService.stopCall(); this.resetState();

// this.props.navigation.goBack(); } }

showInomingCallModal = session => { this._session = session; this.setState({isIncomingCall: true}); };

hideInomingCallModal = () => { this._session = null; this.setState({isIncomingCall: false}); };

// selectUser = userId => { // this.setState(prevState => ({ // selectedUsersIds: [...prevState.selectedUsersIds, userId], // })); // };

// unselectUser = userId => { // this.setState(prevState => ({ // selectedUsersIds: prevState.selectedUsersIds.filter(id => userId !== id), // })); // };

closeSelect = () => { this.setState({isActiveSelect: false}); };

setOnCall = () => { this.setState({isActiveCall: true}); };

initRemoteStreams = opponentsIds => { const emptyStreams = opponentsIds.map(userId => ({ userId, stream: null, }));

this.setState({remoteStreams: emptyStreams}); };

updateRemoteStream = (userId, stream) => { this.setState(({remoteStreams}) => { const updatedRemoteStreams = remoteStreams.map(item => { if (item.userId === userId) { return {userId, stream}; }

return {userId: item.userId, stream: item.stream};

});

return {remoteStreams: updatedRemoteStreams}; }); };

removeRemoteStream = userId => { this.setState(({remoteStreams}) => ({ remoteStreams: remoteStreams.filter(item => item.userId !== userId), })); };

setLocalStream = stream => { this.setState({localStream: stream}); };

resetState = () => { this.setState({ localStream: null, remoteStreams: [], // selectedUsersIds: [], isActiveSelect: true, isActiveCall: false, }); this.props.navigation.pop();

};

_setUpListeners() { // ConnectyCube.videochat.onCallListener = this._onCallListener; ConnectyCube.videochat.onAcceptCallListener = this._onAcceptCallListener; ConnectyCube.videochat.onRejectCallListener = this._onRejectCallListener; ConnectyCube.videochat.onStopCallListener = this._onStopCallListener; ConnectyCube.videochat.onUserNotAnswerListener = this._onUserNotAnswerListener; ConnectyCube.videochat.onRemoteStreamListener = this._onRemoteStreamListener; }

_onPressAccept = () => { CallService.acceptCall(this._session).then(stream => { const {opponentsIDs, initiatorID, currentUserID} = this._session; const opponentsIds = [initiatorID, ...opponentsIDs].filter( userId => currentUserID !== userId, );

this.initRemoteStreams(opponentsIds); this.setLocalStream(stream); this.closeSelect(); this.hideInomingCallModal(); }); };

_onPressReject = () => { CallService.rejectCall(this._session); this.hideInomingCallModal(); };

_onCallListener = (session, extension) => { CallService.processOnCallListener(session) .then(() => this.showInomingCallModal(session)) .catch(this.hideInomingCallModal); };

_onAcceptCallListener = (session, userId, extension) => { CallService.processOnAcceptCallListener(session, userId, extension) .then(this.setOnCall) .catch(this.hideInomingCallModal); };

_onRejectCallListener = (session, userId, extension) => { CallService.processOnRejectCallListener(session, userId, extension) .then(() => this.removeRemoteStream(userId)) .catch(this.hideInomingCallModal); };

_onStopCallListener = (session, userId, extension) => { const isStoppedByInitiator = session.initiatorID === userId;

CallService.processOnStopCallListener(userId, isStoppedByInitiator) .then(() => { if (isStoppedByInitiator) { this.resetState(); } else { this.removeRemoteStream(userId); } }) .catch(this.hideInomingCallModal); };

_onUserNotAnswerListener = (session, userId) => { CallService.processOnUserNotAnswerListener(userId) .then(() => this.removeRemoteStream(userId)) .catch(this.hideInomingCallModal); };

_onRemoteStreamListener = (session, userId, stream) => { CallService.processOnRemoteStreamListener(userId) .then(() => { this.updateRemoteStream(userId, stream); this.setOnCall(); }) .catch(this.hideInomingCallModal); };

render() { const { localStream, remoteStreams, isActiveSelect, isActiveCall, isIncomingCall, } = this.state; const initiatorName = isIncomingCall ? CallService.getUserById(this._session.initiatorID, 'name') : ''; const localStreamItem = localStream ? [{userId: 'localStream', stream: localStream}] : []; const streams = [...remoteStreams, ...localStreamItem]; CallService.setSpeakerphoneOn(remoteStreams.length > 0);

return ( <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>

{
  this.isVideoCall  === true && (
    <RTCViewGrid streams={streams} />

  )
}
<ToolBar
  selectedUsersIds={this.selectedUsersIds}
  localStream={localStream}
  isActiveSelect={isActiveSelect}
  isActiveCall={isActiveCall}
  closeSelect={this.closeSelect}
  initRemoteStreams={this.initRemoteStreams}
  setLocalStream={this.setLocalStream}
  resetState={this.resetState}
/>
<AwesomeAlert
  show={isIncomingCall}
  showProgress={false}
  title={`Incoming call from ${initiatorName}`}
  closeOnTouchOutside={false}
  closeOnHardwareBackPress={true}
  showCancelButton={true}
  showConfirmButton={true}
  cancelText="Reject"
  confirmText="Accept"
  cancelButtonColor="red"
  confirmButtonColor="green"
  onCancelPressed={this._onPressReject}
  onConfirmPressed={this._onPressAccept}
  onDismiss={this.hideInomingCallModal}
  alertContainerStyle={{zIndex: 1}}
  titleStyle={{fontSize: 21}}
  cancelButtonTextStyle={{fontSize: 18}}
  confirmButtonTextStyle={{fontSize: 18}}
/>

); } }

ConnectyCube / connectycube-reactnative-samples

need to accept incoming call from any screen of the app #60