CallKit plug-in doesn't work

[gagandeep-s]

CallKit plug-in doesn't work when integrated in an Ionic 3 App (tested on Android phone).

Issue When an incoming call comes - Incoming call, its ending, its deferring, etc never gets detected and no event written in callkit plugin gets fired!!!

Note: CallKit & BackgroundMode instance gets created successfully.

Here are the integration steps.

Ionic Project Integration Steps

1. Generate new ionic 3 app.
2. Add cordova plugin "ionic-plugin-callkit"
3. Add cordova plugin "cordova-plugin-background-mode"

CallKit Plugin Integration Steps

1. Generate "CallKitService" class:

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
declare const CallKit;

@Injectable()
export class CallKitService {
   private callUUID: string;
   private callKit: any;

   constructor(platform: Platform) {
      if (platform.is("ios") || platform.is("android") || platform.is("windows")) {
         this.callUUID = "";
         this.callKit = new CallKit();
      }
   }

   /**
   * Determine whether the plugin is available.
   *
   * @return {boolean} `true` if the plugin is available.
   */
   private hasCallKit() {
      return typeof CallKit !== "undefined" && this.callKit;
   }

   /**
   * Wrapper for functions which cannot be executed without the plugin.
   *
   * @param {Function} fn Function to be called only if plugin is available.
   *
   * @return {Function} A function running `fn` (with its arguments), if plugin is available.
   */
   private execWithPlugin(fn) {
      return function () {
         if (!this.hasCallKit()) {
            console.error('callkit plugin not available');
            return;
         }

         fn.apply(this, Array.prototype.slice.call(arguments));
      };
   }

   register(callChanged, audioSystem) {
      if (typeof CallKit !== "undefined") {
         this.callKit = new CallKit();
         this.callKit.register(callChanged, audioSystem);
      }
   }

   reportIncomingCall(name, params) {
      this.callKit.reportIncomingCall(name, params, (uuid) => {
         this.callUUID = uuid;
      });
   }

   askNotificationPermission() {
      // only useful on iOS 9, as we use local notifications to report incoming calls
      this.callKit.askNotificationPermission();
   }

   startCall(name, isVideo) {
      this.callKit.startCall(name, isVideo, (uuid) => {
         this.callUUID = uuid;
      });
   }

   callConnected(uuid) {
      this.callKit.callConnected(this.callUUID);
   }

   endCall(notify) {
      this.callKit.endCall(this.callUUID, notify);
   }

   finishRing() {
      this.callKit.finishRing();
   }
}

2. In app.component.ts constructor

import { CallKitService } from '../services/call-kit.service';
declare const cordova;

platform.ready().then(() => {
         // Okay, so the platform is ready and our plugins are available.
         // Here you can do any higher level native things you might need.
         statusBar.styleDefault();
         splashScreen.hide();

         (<any>cordova).plugins.backgroundMode.setDefaults({ title: "Test", text: "Test" });
         (<any>cordova).plugins.backgroundMode.enable();
         callKitService.register(that.callChanged, that.audioSystem);
      });

   callChanged(data) {
      console.log("onCallChanged: " + JSON.stringify(data));
   }

   audioSystem(data) {
      console.log("onAudioSystem: " + JSON.stringify(data));
   }

[Taracque]

Do you know how CallKit works? It will not detect incoming call, nor it will notify your app. CallKit is to display native incoming call screen from your app. You have to call the reportIncomingCall to display the native incoming call screen.

[sanuj123]

Can we extract the phone number of the incoming call through the reportIncomingCall function in the above code ??