navegating other page when apiRTC events fired

[charles-dr]

I want to navigate between pages when receiving various signals. For instance, I am on Messages Page, and let's say I received a incoming call. At that time, I want to go to the chatReceivePage. My codes are implemented as follows.

Messages Page

declare var apiRTC;
export class MessagesPage {
  user_data = {};
  conversations = [];

  constructor(
        public navCtrl: NavController, 
        public navParams: NavParams, 
        public modalCtrl: ModalController,
        public events: Events,
        public apirtcProvider: ApiRtcProvider) {
      events.subscribe('getUserData_callback', (data) => {
          this.conversations = apirtcProvider.conversations;
      });
      this.apiRTCSessionReadyHandler();
  }

  apiRTCSessionReadyHandler(){
      apiRTC.addEventListener("receiveData" , this.receiveDataHandler);
      apiRTC.addEventListener("incomingCall", this.apirtcProvider.incomingCallHandler);
      apiRTC.addEventListener("userMediaError", this.apirtcProvider.userMediaErrorHandler);
      apiRTC.addEventListener("remoteStreamAdded", this.apirtcProvider.remoteStreamAddedHandler);
      apiRTC.addEventListener("userMediaSuccess", this.apirtcProvider.userMediaSuccessHandler);
      apiRTC.addEventListener("hangup", this.apirtcProvider.hangupHandler);
  }

}

apiRTC provider

declare var iosrtc;
declare var apiRTC;
declare var apiCC;    
export class ApiRtcProvider {
    url = "root_url";
    user_main = {}; user_data = {}; conversations = []; friends = []; 
    conversation_offset: number = 0;

    iosrtc: any;
    apiRTC : any;
    apiCC: any;
    distantNumber:any;
    webRTCClient:any;
    state:any;
    constructor(public http: Http,
                private event: Events,  
                public platform: Platform
        ){

    }
    apiRTCInit(){
        apiRTC.init({
            onReady: this.sessionReadyHandler,
            apiKey: "APIKEY",
            apiCCId : my apiCCID
        });
    }
    sessionReadyHandler(){
        console.log("SessionReadyHandler", "api-rtc.ts");
        apiRTC = apiRTC;
        apiRTC.addEventListener("receiveData" , this.receiveDataHandler);
        apiRTC.addEventListener("incomingCall", this.incomingCallHandler);
        apiRTC.addEventListener("userMediaError", this.userMediaErrorHandler);
        apiRTC.addEventListener("remoteStreamAdded", this.remoteStreamAddedHandler);
        apiRTC.addEventListener("userMediaSuccess", this.userMediaSuccessHandler);
        apiRTC.addEventListener("hangup", this.hangupHandler);
        apiCC = apiCC;
        webRTCClient = this.apiCC.session.createWebRTCClient({});
        webRTCClient.setUserAcceptOnIncomingCall(true);
    }
    incomingCallHandler(e) {
        this.event.publish('gotoIncomingPage', data);
        //Or we can do other things to navigate another pages    
        //I can't use any data of Ionic at this moment:(
        }
    }

Main problem is that Ionic handler(or data) is not recognized in the apiRTC event handler though it's defined in a Ionic provider or elsewhere. How can I navigate other pages when apiRTC events has been fired? Any help will be appreciate. Thank you.

[francois-legoff]

Hi @TaiJinYuan , Please see https://github.com/apizee/ApiRTC-ionic/pull/new/navigate-event In this branch, I set an apiRTC provider which use angular events to dispatch on pages or component to navigate.

[charles-dr]

Hi,@francois-legoff. Thank you for your perfect answer. But I have another problem.which is iosrtc. when I run this on iOS, iosrtc is null. I am not sure why this happens. I will be appreciate if you guide me one more how to user iosrtc. Thanks in advance.

[francois-legoff]

Hi @TaiJinYuan, can you try this platform.ready().then(() => { // Just for iOS devices. if (typeof cordova.plugins!=="undefined" && typeof cordova.plugins!==null && typeof cordova.plugins.iosrtc !== 'undefined') { cordova.plugins.iosrtc.registerGlobals(); } }); ? On app.component.ts file

[charles-dr]

Hi, @francois-legoff , Thanks for you reply each time 👍 . I will try it.