本文档介绍如何使用 NetEase CallKit UI Flutter SDK 实现单聊呼叫功能，提供完整的 UI 界面和自定义方案。

概述

NetEase CallKit UI 是网易云信推出的音视频通话 UI 组件，支持快速集成一对一音视频通话功能，适用于 Android、iOS、Flutter 等多个平台。该组件提供了完整的通话界面，支持音频通话、视频通话、悬浮窗、来电横幅等功能。

NetEase CallKit UI 是网易云信推出的一体化音视频通话解决方案，支持快速集成一对一音视频通话功能，适用于 Android、iOS、Flutter 等多个平台。

主要特性

• 完整通话界面: 内置接听、挂断、静音、切换摄像头等操作界面。
• 悬浮窗支持: 支持通话过程中的悬浮窗显示（允许用户在通话中同时操作其他应用）。
• 来电横幅: 应用在后台时，支持显示来电通知。
• 跨平台兼容: 支持 Android、iOS、Flutter 等平台。
• 高度可定制: 支持 UI 自定义和功能扩展。

开发环境

已安装 Flutter 开发环境，版本需为 2.2.0 及以上。

准备工作

根据本文操作前，请确保您已经完成了以下设置：

• 在 网易云信控制台 创建应用，并获取了对应的 App Key。

• 开通以下服务，若未开通，请参考 开通服务 进行开通。

  • IM 即时通讯。当使用呼叫组件自带的话单功能时，需开通 IM。
  • 信令。用于实现点对点呼叫邀请以及音视频通话。
  • 音视频通话 2.0。用于实现实时音视频通话。
  • 如需要抄送，请提前开通消息抄送中的 话单 抄送服务，实现在一通通话结束后，发送事件通知消息，标记此次通话是否接通以及通话时间、类型等数据。

• 已创建 Flutter 项目，或有可基于的 Flutter 项目。

集成步骤

步骤一：导入插件

在工程的根目录下，通过命令行执行以下命令安装 netease_callkit_ui 插件。

flutter pub add netease_callkit_ui

步骤二：配置权限

根据平台需求，配置相应的权限。

Android：

在 android/app/src/main/AndroidManifest.xml 文件中，添加以下权限：

xml<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

iOS：

在 ios/Runner/Info.plist 文件中，添加以下键值对：

xml<key>NSCameraUsageDescription</key>
<string>需要访问摄像头以进行视频通话</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以进行音频通话</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>需要访问蓝牙以连接音频设备</string>

步骤三：初始化组件路由和国际化文案

在应用启动时，需要先初始化国际化文案，在 MaterialApp 中配置国际化：

dartimport 'package:flutter_localizations/flutter_localizations.dart';
import 'package:netease_callkit_ui/src/i18n/i18n_utils.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        NECallKitUI.delegate,
        ...AppLocalizations.localizationsDelegates
      ],
      supportedLocales: AppLocalizations.supportedLocales,
      navigatorObservers: [NECallKitUI.navigatorObserver],
      // 其他配置...
    );
  }
}

步骤四：初始化并登录

请选择方式一或方式二进行初始化，二者只能选其一。

方式一：在应用启动时，初始化并登录 IM 和 CallKit UI：

dartimport 'package:netease_callkit_ui/ne_callkit_ui.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  final extraConfig = NEExtraConfig(
    lckConfig: NELCKConfig(
      enableLiveCommunicationKit: true, //指定打开 LiveCommunicationKit 功能，默认关闭。
    ),
  );
  
  // 初始化 CallKit UI
  await NECallKitUI.instance.login(
    appKey: 'your_app_key',        // 替换为您的 AppKey
    userId: 'your_account_id',        // 替换为当前用户的 accountId
    userSig: 'your_user_sig',      // 替换为当前用户的 userSig，云信IM token
    certificateConfig: NECertificateConfig(
      apnsCername: 'your_apns_cername',  // iOS 推送证书名，
      pkCername: 'your_pk_cername',      // iOS VoIP 证书名
    ), // 推送根据业务需求，可不填
    extraConfig: extraConfig,
  );
  
  runApp(MyApp());
}

方式二：如果已经初始化并登录 IM，可以单独进行 CallKit UI 的初始化：

dart//设置 extraConfig 中 lckConfig 参数，并指定 enableLiveCommunicationKit 为 true
final extraConfig = NEExtraConfig(
  lckConfig: NELCKConfig(
    enableLiveCommunicationKit: true, //指定打开 LiveCommunicationKit 功能，默认关闭。
  ),
);

NECallKitUI.instance.setupEngine("your_app_key", "your_account_id", extraConfig: extraConfig);

基本功能

发起通话

使用 call 方法发起通话：

dartimport 'package:netease_callkit/netease_callkit.dart';

// 发起视频通话
await NECallKitUI.instance.call(
  'target_user_id',           // 被呼叫用户的 userID
  NECallType.video,           // 通话类型：音频或视频
  NECallParams(               // 可选的通话参数
    extraInfo: '自定义信息',   // 额外信息
    rtcChannelName: 'custom_channel', // 自定义RTC频道名
  ),
);

// 发起音频通话
await NECallKitUI.instance.call(
  'target_user_id',
  NECallType.audio,
);

启用悬浮窗

请参考 悬浮窗文档。

登出

退出登录：

dartawait NECallKitUI.instance.logout();