Flutter通话保持插件mitek_callkeep的使用

Flutter通话保持插件mitek_callkeep的使用

展示通过iOS CallKit和Android自定义UI在Flutter中显示来电通知/屏幕。

原生设置

mitek_callkeep 需要以下权限。

Android

无需额外设置。

iOS

在 Info.plist 文件中添加：

<key>UIBackgroundModes</key>
<array>
    <string>processing</string>
    <string>remote-notification</string>
    <string>voip</string>
</array>

然后需要更新 AppDelegate.swift 来处理PushKit，因为由于iOS 13 PushKit VoIP限制，推送处理必须通过原生iOS代码进行。

import UIKit
import PushKit
import Flutter
import mitek_callkeep

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate, PKPushRegistryDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
        // 设置VOIP
        let mainQueue = DispatchQueue.main
        let voipRegistry: PKPushRegistry = PKPushRegistry(queue: mainQueue)
        voipRegistry.delegate = self
        voipRegistry.desiredPushTypes = [PKPushType.voIP]
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
    
    // 处理更新的推送凭据
    func pushRegistry(_ registry: PKPushRegistry, didUpdate credentials: PKPushCredentials, for type: PKPushType) {
        print(credentials.token)
        let deviceToken = credentials.token.map { String(format: "%02x", $0) }.joined()
        print(deviceToken)
        // 将设备令牌保存到服务器
        MitekCallKeepPlugin.sharedInstance?.setDevicePushTokenVoIP(deviceToken)
    }
    
    func pushRegistry(_ registry: PKPushRegistry, didInvalidatePushTokenFor type: PKPushType) {
        print("didInvalidatePushTokenFor")
        MitekCallKeepPlugin.sharedInstance?.setDevicePushTokenVoIP("")
    }
    
    // 处理传入的推送
    func pushRegistry(_ registry: PKPushRegistry, didReceiveIncomingPushWith payload: PKPushPayload, for type: PKPushType, completion: @escaping () -> Void) {
        print("didReceiveIncomingPushWith")
        guard type == .voIP else { return }
        
        let id = payload.dictionaryPayload["id"] as? String ?? ""
        let callerName = payload.dictionaryPayload["callerName"] as? String ?? ""
        let userId = payload.dictionaryPayload["callerId"] as? String ?? ""
        let handle = payload.dictionaryPayload["handle"] as? String ?? ""
        let isVideo = payload.dictionaryPayload["isVideo"] as? Bool ?? false
        
        let data = MitekCallKeep.Data(id: id, callerName: callerName, handle: handle, hasVideo: isVideo)
        // 设置更多数据
        data.extra = ["userId": userId, "platform": "ios"]
        data.appName = "Done"
        // data.iconName = ...
        // data.....
        MitekCallKeepPlugin.sharedInstance?.displayIncomingCall(data, fromPushKit: true)
    }   
}

使用方法

设置

你需要有基本的 CallKeep 配置以减少代码重复并使显示来电更加容易：

final callKeepBaseConfig = CallKeepBaseConfig(
    appName: 'Done',
    androidConfig: CallKeepAndroidConfig(
        logo: 'logo',
        notificationIcon: 'notification_icon',
        ringtoneFileName: 'ringtone.mp3',
        accentColor: '#34C7C2',
    ),
    iosConfig: CallKeepIosConfig(
        iconName: 'Icon',
        maximumCallGroups: 1,
    ),
);

显示来电

配置和uuid是必需的参数：

// 配置和uuid是必需的参数
final config = CallKeepIncomingConfig.fromBaseConfig(
    config: callKeepBaseConfig,
    uuid: uuid,
    contentTitle: 'Incoming call from Done',
    hasVideo: hasVideo,
    handle: handle,
    callerName: incomingCallUsername,
    extra: callData,
);
await CallKeep.instance.displayIncomingCall(config);

显示未接来电通知（仅限Android）

配置和uuid是必需的参数：

// 配置和uuid是必需的参数
final config = CallKeepIncomingConfig.fromBaseConfig(
    config: callKeepBaseConfig,
    uuid: uuid,
    contentTitle: 'Incoming call from Done',
    hasVideo: hasVideo,
    handle: handle,
    callerName: incomingCallUsername,
    extra: callData,
);
await CallKeep.instance.showMissCallNotification(config);

开始外呼

配置和uuid是必需的参数：

// 配置和uuid是必需的参数
final config = CallKeepOutgoingConfig.fromBaseConfig(
    config: DoneCallsConfig.instance.callKeepBaseConfig,
    uuid: uuid,
    handle: handle,
    hasVideo: hasVideo ?? false,
);
CallKeep.instance.startCall(config);

处理事件

监听事件：

CallKeep.instance.onEvent.listen((event) async {
    // TODO: 实现其他事件
    if (event == null) return;
    switch (event.type) {
        case CallKeepEventType.callAccept:
            final data = event.data as CallKeepCallData;
            print('call answered: ${data.toMap()}');
            NavigationService.instance
                .pushNamedIfNotCurrent(AppRoute.callingPage, args: data.toMap());
            if (callback != null) callback.call(event);
            break;
        case CallKeepEventType.callDecline:
            final data = event.data as CallKeepCallData;
            print('call declined: ${data.toMap()}');
            await requestHttp("ACTION_CALL_DECLINE_FROM_DART");
            if (callback != null) callback.call(data);
            break;
        default:
            break;
    }
});

自定义（Android）

你可以通过在 {{yourApp}}/android/app/src/main/res/values 和 {{yourApp}}/android/app/src/main/res/values-{{languageCode}} 添加值来定制背景颜色和添加本地化文本。

主要值包括： 在 colors.xml 中：

<!-- 用于显示在自定义来电UI顶部的十六进制颜色值 -->
<color name="incoming_call_bg_color">#80ffffff</color>

在 strings.xml 中：

<!-- 接受按钮来电文本，便于本地化 -->
<string name="accept_text">接受</string>
<!-- 拒绝按钮来电文本，便于本地化 -->
<string name="decline_text">拒绝</string>
<!-- 未接来电文本，便于本地化 -->
<string name="text_missed_call">未接来电</string>
<!-- 回拨按钮文本，便于本地化 -->
<string name="text_call_back">回拨</string>
<!-- 自定义来电UI头部，便于本地化 -->
<!-- 这也可以从Flutter中设置 -->
<string name="call_header">来自CallKeep的来电</string>