CalKit user guide

npm i zego-callkit-react-native

yarn add zego-callkit-react-native

import CallKit from 'zego-callkit-react-native';

CallKit.setInitConfiguration({localizedName:"Your app name or others"});

function handleIncomingPush(extras: Record<string, any>, uuid: string) {
   // Get the payload field passed with the push notification.
   const payload = extras['payload'];
}
CallKit.getInstance().on('didReceiveIncomingPush',handleIncomingPush);

// Before pulling the CallKit, call `setInitConfiguration` at least once.
CallKit.setInitConfiguration({localizedName: 'ZEGO'});

// Create a CXCallUpdate object
const cxCallUpdate = new CXCallUpdate({
    remoteHandle: /* Set CXHandle object here */,
    localizedCallerName: "Caller Name", // Caller name
    supportsHolding: true,
    supportsGrouping: false,
    supportsUngrouping: false,
    supportsDTMF: true,
    hasVideo: false
});

// Generate a UUID, please use version 4 for UUID.
const uuid = "your-unique-uuid-string"; // Please replace with the actual UUID

// Call the reportIncomingCall method
CallKit.getInstance().reportIncomingCall(cxCallUpdate, uuid)
    .then(() => {
        console.log("Incoming call reported successfully");
    })
    .catch(error => {
        console.error("Error reporting incoming call: ", error);
    });

// `CXCallEndedReason` indicate the reason why an incoming call is ended. In the sample code, the call is declined by the caller.
// `uuid` is the UUID obtained from the `didReceiveIncomingPush` method or that passed by the `reportIncomingCall` method.
CallKit.getInstance().reportCallEnded(CXCallEndedReason.AnsweredElsewhere,"BE5832D3-DCAE-4B4C-9B51-33400A5EA69E");

// Callbacks when a VoIP push notification is received.
// `uuid` is the unique ID of the call.
function handleIncomingPush(extras: Record<string, any>, uuid: string) {
    // The payload string is the same as the extended data carried in the `ZIMPushConfig` class.
    const payload = extras['payload'];
}
CallKit.getInstance().on('didReceiveIncomingPush',handleIncomingPush);

// The event that the user taps the Answer button.
function handlePerformAnswerCallPush(action: CXAnswerCallAction) {
    console.log("handlePerformAnswerCallPush 用户点击接受",action);
    // Received successfully, call the action fulfill function
    action.fulfill();
}
CallKit.getInstance().on('performAnswerCallAction',handlePerformAnswerCallPush);

// The event that the user taps the Decline button.
function handlePerformEndCallAction(action: CXEndCallAction) {
   console.log("handlePerformEndCallAction 用户点击挂断", action);
   // Hang up the phone, call the action fulfill function
   action.fulfill();
}
CallKit.getInstance().on('performEndCallAction', handlePerformEndCallAction);

// The event that the user taps the Mute button.
function handlePerformSetMutedCallAction(action: CXSetMutedCallAction) {
    console.log("handlePerformSetMutedCallAction User clicked mute", action);
    // When the mute button is turned on, muted is true
    const isMuted = action.muted;
    // Add mute logic here
    // Call the action fulfill function
    action.fulfill();
}
CallKit.getInstance().on('performSetMutedCallAction', handlePerformSetMutedCallAction);

// supportsVideo needs to be true when initializing
var config = {
    localizedName: 'localizedName',
    supportsVideo: true // set supportsVideo to true
};
CallKit.setInitConfiguration(config);

// CXCallUpdate hasVideo needs to be true
var update = {
    hasVideo: true, // set hasVideo to true
    // If you want the "Video" button in the call interface to redirect to your app, you need to set remoteHandle
    remoteHandle: {
        type: 'CXHandleTypeGeneric', // set the appropriate type based on the actual situation
        value: 'Caller\'s contact information' // set the caller's contact information
    }
};
// Generate a unique id for this call, uuid version is v4
var uuid = "";

// Call the reportIncomingCall method
CallKit.getInstance().reportIncomingCall(update, uuid);

let pushConfig = {};

// Set properties of pushConfig
pushConfig.title = "System call title"; // Set the title of the system call
pushConfig.payload = "Business required payload"; // Set the payload for business
pushConfig.resourcesID = "resourcesID configured by contacting ZEGOCLOUD technical support"; // Set the resource ID, need to contact ZEGOCLOUD technical support for configuration

let voIPConfig = new ZIMVoIPConfig(); 

// Configure VoIP settings
voIPConfig.iOSVoIPHandleType = ZIMCXHandleType.generic; // Set the Handle type of iOS VoIP to generic
voIPConfig.iOSVoIPHandleValue = "Alice"; // Set the sender's contact information
voIPConfig.iOSVoIPHasVideo = true; // Set if it is a video call

// Associate VoIP configuration with push configuration
pushConfig.voIPConfig = voIPConfig;

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler{
    INInteraction *interaction = userActivity.interaction;
    INIntent *intent = interaction.intent;
    // When the user tap the Video button, the following condition is met. Note that the event can be triggered by tapping the button or an entry in the call history.
    if([userActivity.activityType isEqual:@"INStartVideoCallIntent"]){
        INPerson *person = [(INStartAudioCallIntent *)intent contacts][0];
        // The `CXHandle` field in the `ZIMVoIPConfig` class is obtained, which can be used to implement your business logic.
        CXHandle *handle = [[CXHandle alloc] initWithType:(CXHandleType)person.personHandle.type value:person.personHandle.value];
        // The following sample UI information will be displayed in a pop-up window.
        UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"tips" message:[NSString stringWithFormat:@"If the user action type is `INStartVideoCallIntent`, the video mode is used. User information: %@",handle.value] preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        }];
        [alertView addAction:action];
        [[UIViewControllerCJHelper findCurrentShowingViewController] presentViewController:alertView animated:YES completion:nil];
        return true;
    }
    return false;
}