tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
即时通信 IM
    文档
    Download PDF

    Flutter

    最后更新时间：2024-03-20 16:54:30
    下载PDF
      本文将介绍如何用最短的时间完成 TUICallKit 组件的接入，跟随本文档，您可以在 10 分钟内完接入工作，并最终得到一个包含完备 UI 界面的音视频通话功能。

      环境准备

      Flutter 3.0及更高版本。

      步骤1：开通服务

      TUICallKit 是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。为了您能更好地体验音视频通话 Call 功能，我们免费为每个 SDKAppID 提供了7天体验版（体验版不额外赠送通话时长），每个 SDKAppID 可免费体验2次，每次有效期均为7天；同时一个账号下所有 SDKAppID 的体验总次数为10次。
      您可以在 即时通信 IM 控制台中开通 Call 体验版，具体操作步骤如下：
      1. 访问 IM 控制台，选择数据中心并新建应用。若您已有应用可跳过该步骤。
      2. 单击目标应用卡片，进入应用的基础配置页面。
      3. 找到音视频通话能力（Call）卡片，单击免费体验。
      4. 确认弹窗内容后，单击立即体验，即可成功开通音视频通话体验版。开通完成后即可根据本文档进行集成。
      5. 如果您的业务上线，需要购买正式版本，可前往控制台进行购买，请参考：购买正式版。

      步骤2：导入TUICallKit组件

      使用 Flutter 导入组件，具体步骤如下：
      1. 在您的 pubspec.yaml 文件中添加 tencent_calls_uikit 插件依赖，点击插件超链接切换到Versions目录下查询最新版本。
      dependencies:  
        tencent_calls_uikit: 最新版本
      2. 执行以下命令安装组件：
        flutter pub get

      步骤3：完成工程配置

      1. 将 TUICallKit的navigatorObserver 添加到 App组件中，以MateriaApp为例，代码如下：
      import 'package:tencent_calls_uikit/tuicall_kit.dart';
      
      MaterialApp（
           navigatorObservers：[TUICallKit.navigatorObserver]，
           ...
      ）
      2. 如果您需要编译运行在 Android 平台，由于我们在 SDK 内部使用了Java 的反射特性，需要将 SDK 中的部分类加入不混淆名单，因此需要您在 proguard-rules.pro 文件中添加如下代码：
      -keep class com.tencent.** { *; }
      3. 如果您的工程需要在iOS 模拟器上调试，您需要在工程的/ios/Podfile文件中添加以下代码：
      post_install do |installer|
        installer.pods_project.targets.each do |target|
          flutter_additional_ios_build_settings(target)
          target.build_configurations.each do |config|
            config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
            config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
          end
        end
      end
      4. 如果您需要使用 iOS 的音视频功能，您需要授权麦克风和摄像头的使用权限。
      授权操作方法：在您的 iOS 工程的 Info.plist 中添加以下两项，分别对应麦克风和摄像头在系统弹出授权对话框时的提示信息。
      <key>NSCameraUsageDescription</key>
      <string>CallingApp需要访问您的相机权限，开启后录制的视频才会有画面</string>
      <key>NSMicrophoneUsageDescription</key>
      <string>CallingApp需要访问您的麦克风权限，开启后录制的视频才会有声音</string>

      步骤4：登录 TUICallKit 组件

      在您的项目中添加如下代码，这个步骤异常关键，因为只有在登录成功后才能正常使用 TUICallKit 的各项功能，故请您耐心检查相关参数是否配置正确：
      TUIResult result = TUICallKit.instance.login(SDKAppID,       // 请替换为第一步得到的SDKAppID
                                                   'userId',       // 请替换为您的User ID
                                                   'userSig');     // 您可以在控制台计算一个UserSig并填到该位置
      参数说明 这里详细介绍一下 login 函数中所需要用到的几个关键参数：
      SDKAppID：在步骤一中的最后一步中您已经获取到，这里不再赘述。
      UserID：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
      UserSig：使用 步骤一 的第 2 步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。
      更多信息请参见 如何计算及使用 UserSig。
      注意：
      这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下:
      SDKAppID 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。
      UserSig 被错配成了加密密钥（Secretkey），UserSig 是用 SecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的，而不是直接把 Secretkey 配置成 UserSig。
      UserID 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。
      Github 中的示例代码使用了 genTestUserSig 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在 App 的代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 userSig 的计算逻辑放在服务端进行，并由 App 在每次使用 TUICallKit 组件时向您的服务器请求实时计算出的 UserSig。

      步骤5：拨打通话

      1对1视频通话

      通过调用 TUICallKit 的 call 函数并指定通话类型和被叫方的 userId，就可以发起语音或者视频通话。
      // 假设给mike拨打视频电话
      TUICallKit.instance.call('mike', TUICallMediaType.video);
      参数
      类型
      含义
      userId
      String
      目标用户的 UserID："mike"
      callMediaType
      TUICallMediaType
      通话的媒体类型，示例：TUICallMediaType.video或 TUICallMediaType.audio

      群内视频通话

      通过调用 TUICallKit 的 groupCall 函数并指定通话类型和被叫方的 UserID 列表，就可以发起群内的语音或者视频通话。
      // 假设在groupId:0001的群组内，向denny, mike 和 tommy 发起视频通话
      TUICallKit.instance.groupCall('0001', ['denny', 'mike', 'tommy'], TUICallMediaType.video);
      参数
      类型
      含义
      groupId
      String
      群组 ID
      userIdList
      Array
      目标用户的 userId 列表
      callMediaType
      TUICallMediaType
      通话的媒体类型，示例：TUICallMediaType.video 或 TUICallMediaType.audio
      说明
      群组的创建详见： IM 群组管理 ，或者您也可以直接使用 IM TUIKit，一站式集成聊天、通话等场景。
      TUICallKit 目前还不支持发起非群组的多人视频通话，如果您有此类需求，欢迎反馈： TUIKit 需求收集表。

      步骤6：接听通话

      在 步骤四 完成后，收到来电请求后，TUICallKit 组件会自动启动相应的接听界面。

      步骤7：更多特性

      一、设置昵称&头像

      如果您需要自定义昵称或头像，可以使用如下接口进行更新：
      // 函数定义为: Future<TUIResult> setSelfInfo(String nickname, String avatar)
      TUIResult result = TUICallKit.instance.setSelfInfo('userName', 'url:********');
      注意
      因为用户隐私限制，非好友之间的通话，被叫的昵称和头像更新可能会有延迟，一次通话成功后就会顺利更新。

      二、离线唤醒

      完成以上步骤，就可以实现音视频通话的拨打和接通，但如果您的业务场景需要在 应用的进程被杀死后或者应用退到后台后，还可以正常接收到音视频通话请求，就需要增加离线唤醒功能，详情见 离线唤醒（Flutter）。

      三、悬浮窗功能

      如果您的业务需要开启悬浮窗功能，您可以在 TUICallKit 组件初始化时调用以下接口开启该功能：
      TUICallKit.instance.enableFloatWindow(true);

      四. 通话状态监听

      如果您的业务需要 监听通话的状态，例如通话开始、结束，以及通话过程中的网络质量等等，可以监听以下事件：
      TUICallEngine.instance.addObserver(TUICallObserver(
          onError: (int code, String message) {
            //您的回调处理逻辑    
          }, onCallBegin: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole) {
            //您的回调处理逻辑    
          }, onCallEnd: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole, double totalTime) {  
            //您的回调处理逻辑    
          },, onUserNetworkQualityChanged: (List<TUINetworkQualityInfo> networkQualityList) {
            //您的回调处理逻辑    
          }, onCallReceived: (String callerId, List<String> calleeIdList, String groupId, TUICallMediaType callMediaType) {
            //您的回调处理逻辑    
          }
      ));

      五、自定义铃音

      如果您需要自定义来电铃音，可以通过如下接口进行设置：
      TUICallKit.instance.setCallingBell('flie path');

      常见问题

      1、错误提示“The package you purchased does not support this ability”？

      如遇以上错误提示，是由于您当前应用的音视频通话能力包过期或未开通，见步骤一：开通服务，领取或者开通音视频通话能力，进而继续使用 TUICallKit 组件。

      2、如何购买套餐？

      请参考购买链接 购买正式版。

      3、Android 编译报错：uses-sdk:minSdkVersion 16 cannot be smaller than version 19.

      详细的报错信息如下：
      uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:tencent_calls_uikit] /Users/xxx/xxxx/xxxx/xxxx/demo/flutter/callkit/callkit/build/tencent_calls_uikit/intermediates/merged_manifest/debug/AndroidManifest.xml as the library might be using APIs not available in 16
      Suggestion: use a compatible library with a minSdk of at most 16,
                      or increase this project's minSdk version to at least 19,
                      or use tools:overrideLibrary="com.tencent.cloud.tuikit.flutter.tuicallkit" to force usage (may lead to runtime failures)
      这是因为 tencent_call_uikit Plugin Android 端支持的 minSdkVersion 是 19，可以将您工程中的 android/app/build.gradle文件中的 minSdkVersion修改为 19 及其以上即可。

      交流与反馈

      如果有任何需要或者反馈，您可以联系：colleenyu@tencent.com。
      
      
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款