集成 TUICalling (Flutter)

最近更新时间:2021-12-29 15:09:00

如需快速实现视频通话功能,您可以直接基于我们提供的 Demo 进行修改适配,也可以使用我们提供的 TRTCCalling 组件并实现自定义 UI 界面。

复用 Demo 的 UI 界面

步骤1:创建新的应用

  1. 登录实时音视频控制台,选择【开发辅助】>【快速跑通Demo】。
  2. 输入应用名称,例如 TestVideoCall ,单击【创建】。
注意:

本功能同时使用了腾讯云 实时音视频 TRTC即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信 IM 服务。 即时通信 IM 属于增值服务,详细计费规则请参见 即时通信 IM 价格说明

步骤2:下载 SDK 和 Demo 源码

  1. 根据实际业务需求下载 SDK 及配套的 Demo 源码
  2. 下载完成后,单击【已下载,下一步】。

步骤3:配置 Demo 工程文件

  1. 进入修改配置页,根据您下载的源码包,选择相应的开发环境。
  2. 找到并打开 /example/lib/debug/GenerateTestUserSig.dart 文件。
  3. 设置 GenerateTestUserSig.dart 文件中的相关参数:
    • SDKAPPID:默认为 PLACEHOLDER ,请设置为实际的 SDKAppID。
    • SECRETKEY:默认为 PLACEHOLDER ,请设置为实际的密钥信息。
  4. 粘贴完成后,单击【已复制粘贴,下一步】即创建成功。
  5. 编译完成后,单击【回到控制台概览】即可。
    注意:

    • 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试
    • 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

步骤4:运行 Demo

注意:

Android 端需要在真机下运行,不支持模拟器调试。

  1. 执行 flutter pub get
  2. 编译运行调试:
    1. 执行 flutter run
    2. 使用 Android Studio(3.5及以上的版本)打开源码工程,单击【运行】即可。

步骤5:修改 Demo 源代码

源码 文件夹 TRTCCallingDemo 中包含两个子文件夹 ui 和 model,其中 ui 文件夹中均为界面代码:

文件或文件夹 功能描述
TRTCCallingVideo.dart 展示音视频通话的主界面,通话的接听和拒绝就是在这个界面中完成的
TRTCCallingContact.dart 用于展示选择联系人的界面,可以通过此界面搜索已注册用户,发起通话

实现自定义 UI 界面

源码 文件夹 TRTCCallingDemo 中包含两个子文件夹 ui 和 model,其中 model 文件夹中包含了我们实现的可重用开源组件 TRTCCalling,您可以在 TRTCCalling.dart 文件中看到该组件提供的接口函数。

您可以使用开源组件 TRTCCalling 实现自己的 UI 界面,即只复用 model 部分,自行实现 UI 部分。

步骤1:集成 SDK

音视频通话组件 TRTCCalling 依赖 TRTC SDKIM SDK,您可以通过配置 pubspec.yaml 自动下载更新。

在项目的 pubspec.yaml 中写如下依赖:

dependencies:
  tencent_trtc_cloud: 最新版本号
  tencent_im_sdk_plugin: 最新版本号

步骤2:配置权限及混淆规则

需要在 Info.plist 中加入对相机和麦克风的权限申请:

<key>NSMicrophoneUsageDescription</key>
<string>授权麦克风权限才能正常语音通话</string>

步骤3:导入 TRTCCalling 组件

拷贝以下目录中的所有文件到您的项目中:

/lib/TRTCCallingDemo/model

步骤4:初始化并登录组件

  1. 调用 TRTCCalling.sharedInstance() 获取组件实例。
  2. 调用 login(SDKAppID, userId, userSig) 完成组件的登录,其中几个关键参数的填写请参考下表:
    参数名作用
    SDKAppID 您可以在 实时音视频控制台 中查看 SDKAppID。
    userId 当前用户的 ID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符(-)和下划线(_)。建议结合业务实际账号体系自行设置。
    userSig 腾讯云设计的一种安全保护签名,计算方式请参考 如何计算及使用 UserSig
    // 初始化
    sCall = await TRTCCalling.sharedInstance();
    sCall.login(1400000123, "userA", "xxxx");

步骤5:实现 1v1 视频通话

  1. 发起方:调用 TRTCCallingcall() 方法发起通话的请求, 并传入用户 ID(userid)和通话类型(type),通话类型参数传入TRTCCalling.typeVideoCall
  2. 接收方:当接收方处于已登录状态时,会收到名为 onInvited() 的事件通知,回调中 callType 的参数是发起方填写的通话类型,您可以通过此参数启动相应的界面。
  3. 接收方:如果希望接听电话,接收方可以调用 accept() 函数,并同时调用 openCamera() 函数打开自己本地的摄像头。接收方也可以调用 reject() 拒绝此次通话。
  4. 当双方的音视频通道建立完成后,通话的双方都会接收到名为 onUserVideoAvailable() 的事件通知,表示对方的视频画面已经拿到。此时双方用户均可以调用startRemoteView() 展示远端的视频画面。远端的声音默认是自动播放的。

组件 API 列表

TRTCCalling 组件的 API 接口列表如下:

接口函数 接口功能
registerListener 增加 TRTCCalling 监听器,用户可以通过该监听器获取状态通知
unRegisterListener 移除监听器
destroy 销毁实例
login 登录 IM,所有功能需要先进行登录后才能使用
logout 登出 IM,登出后无法再进行拨打操作
call C2C 邀请通话,被邀请方会收到 onInvited 的事件通知
accept 作为被邀请方接听来电
reject 作为被邀请方拒绝来电
hangup 结束通话
startRemoteView 将远端用户的摄像头数据渲染到指定的 TXCloudVideoView 中
stopRemoteView 停止渲染某个远端用户的摄像头数据
openCamera 开启摄像头,并渲染在指定的 TXCloudVideoView 中
closeCamera 关闭摄像头
switchCamera 切换前后摄像头
setMicMute 是否静音 mic
setHandsFree 是否开启免提
目录